improvements

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<void> {
+): Promise<MinimumServerResponse> {
-	return axios.post(
+	const {data} = await axios.post(
 		`${import.meta.env.VITE_SERVER_BASE_URL}/auth/resend-email`,
 		{
 			email,
 		},
 	)
+
+	return data
 }

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<FastAPIError>,
 	TVariables = unknown,
 	TContext = unknown,
@@ -34,33 +35,38 @@ export default function MutationStatusSnackbar<
 	TVariables,
 	TContext
 >): ReactElement {
+	const $severity = useRef<AlertProps["severity"]>()
+	const $message = useRef<string>()
+
 	const [open, setOpen] = useState<boolean>(false)
 
-	const severity = (() => {
+	useLayoutEffect(() => {
-		if (mutation.isError) {
+		setOpen(false)
-			return "error"
+	}, [mutation.isSuccess, mutation.isError])
-		}
-
-		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!"
-		}
-	})()
 
 	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}
 		>
-			<Alert severity={severity} variant="filled">
+			<Alert severity={$severity.current} variant="filled">
-				{message}
+				{$message.current}
 			</Alert>
 		</Snackbar>
 	)

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<void, AxiosError, string>(
+	const mutation = useMutation<MinimumServerResponse, AxiosError, string>(
 		resendEmailVerificationCode,
 		{
 			onSettled: resetInterval,

src/server-types.d.ts

@@ -47,3 +47,6 @@ export interface ServerSettings {
 	email_verification_length: number
 }
 
+export interface MinimumServerResponse {
+	detail?: string
+}