Skip to content

Returning the error message detail(when accepting/creating scrimmage) from backend to frontend #914

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nour-massri merged 2 commits into from
Jan 15, 2025
Merged

Returning the error message detail(when accepting/creating scrimmage) from backend to frontend #914

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f4be2a6
adding expressive frontend message saying ranked matches are disabled
nour-massri Jan 15, 2025
46b4264
linter
nour-massri Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 27 additions & 15 deletions frontend/src/api/compete/useCompete.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,12 +350,11 @@ export const useRequestScrimmage = (
scrimmageRequestRequest,
}: CompeteRequestCreateRequest) => {
const toastFn = async (): Promise<ScrimmageRequest> => {
const result = await requestScrimmage({
episodeId,
scrimmageRequestRequest,
});

try {
const result = await requestScrimmage({
episodeId,
scrimmageRequestRequest,
});
// Invalidate the outbox query
await queryClient.invalidateQueries({
queryKey: buildKey(scrimmageOutboxListFactory.queryKey, {
Expand All @@ -375,17 +374,24 @@ export const useRequestScrimmage = (
true,
),
});
} catch (e) {
toast.error((e as ResponseError).message);
}

return result;
return result;
} catch (e: unknown) {
const error = e as ResponseError;
// Parse the response text as JSON, detail propety contains the error message
const errorJson = (await error.response.json()) as {
detail?: string;
};
const errorDetail =
errorJson.detail ?? "An unexpected error occurred.";
throw new Error(errorDetail);
}
Comment on lines +379 to +388
Copy link
Contributor

@lowtorola lowtorola Jan 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great! At some point we need to go through and make this a type-ified function which errors in detail for every frontend mutation.

};

return await toast.promise(toastFn(), {
loading: "Requesting scrimmage...",
success: "Scrimmage requested!",
error: "Error requesting scrimmage. Is the requested team eligible?",
error: (error: Error) => error.message, // Return the error message thrown in toastFn
});
},
onSuccess,
Expand All @@ -409,9 +415,8 @@ export const useAcceptScrimmage = (
id,
}: CompeteRequestAcceptCreateRequest) => {
const toastFn = async (): Promise<void> => {
await acceptScrimmage({ episodeId, id });

try {
await acceptScrimmage({ episodeId, id });
// Invalidate the inbox query
await queryClient.invalidateQueries({
queryKey: buildKey(scrimmageInboxListFactory.queryKey, {
Expand All @@ -431,15 +436,22 @@ export const useAcceptScrimmage = (
true,
),
});
} catch (e) {
toast.error((e as ResponseError).message);
} catch (e: unknown) {
const error = e as ResponseError;
// Parse the response text as JSON, detail propety contains the error message
const errorJson = (await error.response.json()) as {
detail?: string;
};
const errorDetail =
errorJson.detail ?? "An unexpected error occurred.";
throw new Error(errorDetail);
}
};

await toast.promise(toastFn(), {
loading: "Accepting scrimmage...",
success: "Scrimmage accepted!",
error: "Error accepting scrimmage.",
error: (error: Error) => error.message, // Return the error message thrown in toastFn
});
},
});
Expand Down