diff --git a/src/apis/resend-email-verification-code.ts b/src/apis/resend-email-verification-code.ts index cf90f11..c71553b 100644 --- a/src/apis/resend-email-verification-code.ts +++ b/src/apis/resend-email-verification-code.ts @@ -1,12 +1,16 @@ import axios from "axios" -export default function resendEmailVerificationCode( +import {MinimumServerResponse} from "~/server-types" + +export default async function resendEmailVerificationCode( email: string, -): Promise { - return axios.post( +): Promise { + const {data} = await axios.post( `${import.meta.env.VITE_SERVER_BASE_URL}/auth/resend-email`, { email, }, ) + + return data } diff --git a/src/components/MutationStatusSnackbar.tsx b/src/components/MutationStatusSnackbar.tsx index 2542996..6d3d28b 100644 --- a/src/components/MutationStatusSnackbar.tsx +++ b/src/components/MutationStatusSnackbar.tsx @@ -1,10 +1,11 @@ import {AxiosError} from "axios" -import {ReactElement, useEffect, useState} from "react" +import {ReactElement, useEffect, useLayoutEffect, useRef, useState} from "react" import {UseMutationResult} from "@tanstack/react-query" -import {Alert, Snackbar} from "@mui/material" +import {Alert, AlertProps, Snackbar} from "@mui/material" import {FastAPIError} from "~/utils" +import {MinimumServerResponse} from "~/server-types" import getErrorMessage from "~/utils/get-error-message" export interface MutationStatusSnackbarProps< @@ -20,7 +21,7 @@ export interface MutationStatusSnackbarProps< } export default function MutationStatusSnackbar< - TData extends {data: {detail?: string}} = {data: {detail?: string}}, + TData extends MinimumServerResponse = MinimumServerResponse, TError extends AxiosError = AxiosError, TVariables = unknown, TContext = unknown, @@ -34,33 +35,38 @@ export default function MutationStatusSnackbar< TVariables, TContext >): ReactElement { + const $severity = useRef() + const $message = useRef() + const [open, setOpen] = useState(false) - const severity = (() => { - if (mutation.isError) { - return "error" - } - - if (mutation.isSuccess) { - return "success" - } - - return "info" - })() - const message = (() => { - if (mutation.isError) { - // @ts-ignore - return errorMessage ?? getErrorMessage(mutation.error) - } - - if (mutation.isSuccess) { - return successMessage ?? mutation.data?.data?.detail ?? "Success!" - } - })() + useLayoutEffect(() => { + setOpen(false) + }, [mutation.isSuccess, mutation.isError]) useEffect(() => { if (mutation.isSuccess || mutation.isError) { setOpen(true) + + $severity.current = (() => { + if (mutation.isError) { + return "error" + } + + if (mutation.isSuccess) { + return "success" + } + })() + $message.current = (() => { + if (mutation.isError) { + // @ts-ignore + return errorMessage ?? getErrorMessage(mutation.error) + } + + if (mutation.isSuccess) { + return successMessage ?? mutation.data?.detail ?? "Success!" + } + })() } }, [mutation.isSuccess, mutation.isError]) @@ -70,8 +76,8 @@ export default function MutationStatusSnackbar< onClose={() => setOpen(false)} autoHideDuration={5000} > - - {message} + + {$message.current} ) diff --git a/src/route-widgets/root/YouGotMail/ResendMailButton.tsx b/src/route-widgets/root/YouGotMail/ResendMailButton.tsx index 61ef97a..87d1880 100644 --- a/src/route-widgets/root/YouGotMail/ResendMailButton.tsx +++ b/src/route-widgets/root/YouGotMail/ResendMailButton.tsx @@ -10,6 +10,7 @@ import {useIntervalUpdate} from "~/hooks" import {resendEmailVerificationCode} from "~/apis" import {isDev} from "~/constants/development" import {MutationStatusSnackbar} from "~/components" +import {MinimumServerResponse} from "~/server-types" export interface ResendMailButtonProps { email: string @@ -24,7 +25,7 @@ export default function ResendMailButton({ const secondsPassed = differenceInSeconds(new Date(), startDate) const secondsLeft = RESEND_INTERVAL - secondsPassed - const mutation = useMutation( + const mutation = useMutation( resendEmailVerificationCode, { onSettled: resetInterval, diff --git a/src/server-types.d.ts b/src/server-types.d.ts index dd85dc3..8b99bc7 100644 --- a/src/server-types.d.ts +++ b/src/server-types.d.ts @@ -47,3 +47,6 @@ export interface ServerSettings { email_verification_length: number } +export interface MinimumServerResponse { + detail?: string +}