Improve error handling, automatically renew access token

This commit is contained in:
2025-11-06 20:47:08 +02:00
parent bb3900d23b
commit 65794be998
7 changed files with 374 additions and 175 deletions

View File

@@ -3,7 +3,7 @@ import Icon, { ICONS } from "./Icon";
import Modal from "./Modal";
import { useLocation, useNavigate } from "react-router";
import { API } from "~/api/api";
import { useAuth } from "~/context/AuthContext";
import { getApiErrorMessage, useAuth } from "~/context/AuthContext";
export default function Header() {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -72,30 +72,35 @@ export default function Header() {
return;
}
const response = await API.createPostRequest(
title, description,
enteredTags, imageFile.name,
imageFile.type, imageFile.size,
user
);
const data = await response.json();
if (!response.ok) {
setError(data.detail || `Upload failed with status ${response.status}.`);
return;
try {
const response = await API.createPostRequest(
title, description,
enteredTags, imageFile.name,
imageFile.type, imageFile.size,
user
);
const data = await response.json();
if (!response.ok) {
setError(getApiErrorMessage(data));
return;
}
const uploadUrl = data.fileUrl;
if (!uploadUrl) {
setError('Upload URL not provided by server.');
return;
}
const uploadResponse = await API.patchFileUploadUrl(uploadUrl, imageFile, user);
if (!uploadResponse.ok) {
const uploadError = await uploadResponse.json();
setError(getApiErrorMessage(uploadError));
return;
}
navigate(`/posts/${data.id}`);
onClose();
} catch (err: any) {
setError(getApiErrorMessage(err));
}
const uploadUrl = data.fileUrl;
if (!uploadUrl) {
setError('Upload URL not provided by server.');
return;
}
const uploadResponse = await API.patchFileUploadUrl(uploadUrl, imageFile, user);
if (!uploadResponse.ok) {
setError(`Image upload failed with status ${uploadResponse.status}.`);
return;
}
navigate(`/posts/${data.id}`);
onClose();
};
return (
@@ -145,25 +150,29 @@ export default function Header() {
return;
}
const response = await API.register(username, email, password);
if (!response.ok) {
const data = await response.json();
setError(data.detail || "Registration failed. Please try again.");
return;
try {
const response = await API.register(username, email, password);
if (!response.ok) {
const data = await response.json();
setError(getApiErrorMessage(data));
return;
}
// Automatically log in the user after successful registration
const loginResponse = await API.login(email, password);
if (loginResponse.ok) {
const loginData = await loginResponse.json();
login(loginData.accessToken, loginData.refreshToken);
}
onClose();
setUsername('');
setEmail('');
setPassword('');
setConfirmPassword('');
} catch (err: any) {
setError(getApiErrorMessage(err));
}
// Automatically log in the user after successful registration
const loginResponse = await API.login(email, password);
if (loginResponse.ok) {
const loginData = await loginResponse.json();
login(loginData.accessToken, loginData.refreshToken);
}
onClose();
setUsername('');
setEmail('');
setPassword('');
setConfirmPassword('');
};
return (
@@ -202,16 +211,22 @@ export default function Header() {
const handleSubmit: FormEventHandler = async (e) => {
e.preventDefault();
const response = await API.login(username, password);
if (!response.ok) {
setError("Login failed. Please check your credentials.");
return;
setError('');
try {
const response = await API.login(username, password);
if (!response.ok) {
const err = await response.json();
setError(getApiErrorMessage(err));
return;
}
const data = await response.json();
login(data.accessToken, data.refreshToken);
onClose();
setUsername('');
setPassword('');
} catch (err: any) {
setError(getApiErrorMessage(err));
}
const data = await response.json();
login(data.accessToken, data.refreshToken);
onClose();
setUsername('');
setPassword('');
};
return (