Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 21x 34x 34x 8x 1x 23x 2x 11x 107x 107x 107x 107x 107x 107x 16x 4x 107x 107x | import React from "react";
import { useMutation } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { EmptyCard } from "~app/components/empty-card";
import { ErrorMessage } from "~app/components/error-message";
import { PageHeader } from "~app/components/page-header";
import { useTrpcMutationOptions } from "~app/hooks/use-trpc-mutation-options";
import type { TRPCMutationResult } from "~app/trpc";
import { getPathHooks } from "~app/utils/navigation";
import { useTRPC } from "~app/utils/trpc";
import { ButtonLink } from "~components/link";
import { Spinner } from "~components/spinner";
import { Text } from "~components/text";
import { options as authConfirmEmailOptions } from "~mutations/auth/confirm-email";
const ConfirmEmail: React.FC<{
confirmMutation: TRPCMutationResult<"auth.confirmEmail">;
token: string;
}> = ({ confirmMutation, token }) => {
const { t } = useTranslation("register");
switch (confirmMutation.status) {
case "pending":
return <Spinner size="lg" />;
case "error":
return (
<ErrorMessage
message={confirmMutation.error.message}
button={{
text: t("confirm.retryButton"),
onPress: () => confirmMutation.mutate({ token }),
}}
/>
);
case "idle":
return null;
case "success":
return (
<>
<Text variant="h3">{confirmMutation.data.email}</Text>
<Text variant="h4">{t("confirm.success.header")}</Text>
<ButtonLink to="/" color="primary">
{t("confirm.success.home")}
</ButtonLink>
</>
);
}
};
export const ConfirmEmailScreen = () => {
const { useQueryState } = getPathHooks("/_public/confirm-email");
const [token] = useQueryState("token");
const { t } = useTranslation("register");
const trpc = useTRPC();
const confirmEmailMutation = useMutation(
trpc.auth.confirmEmail.mutationOptions(
useTrpcMutationOptions(authConfirmEmailOptions),
),
);
const confirmEmail = React.useCallback(() => {
Iif (!token || confirmEmailMutation.status !== "idle") {
return;
}
confirmEmailMutation.mutate({ token });
}, [token, confirmEmailMutation]);
React.useEffect(confirmEmail, [confirmEmail]);
return (
<>
<PageHeader>{t("confirm.header")}</PageHeader>
{token ? (
<ConfirmEmail confirmMutation={confirmEmailMutation} token={token} />
) : (
<EmptyCard title={t("confirm.error.title")}>
<Text variant="h3" className="text-center">
{t("confirm.error.description")}
</Text>
</EmptyCard>
)}
</>
);
};
|