Improve error handling, automatically renew access token
This commit is contained in:
@@ -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 (
|
||||
|
||||
Reference in New Issue
Block a user