70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
import { Done, Error } from '@mui/icons-material';
|
|
import { CircularProgress, Grid, Link as MUILink, Typography } from '@mui/material';
|
|
import { useMutation } from '@tanstack/react-query';
|
|
import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
|
|
import { useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useApi } from '../../api/Api';
|
|
import HeaderlessLayout from '../../components/Layouts/HeaderlessLayout';
|
|
import { ROUTES } from '../../types/Routes';
|
|
|
|
const Home = () => {
|
|
const Api = useApi();
|
|
const { code } = Route.useSearch();
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
|
|
const confirmMutation = useMutation({
|
|
mutationFn: ({ code: _code }: { code: string }) => Api.confirmUser(_code),
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (code) setTimeout(() => confirmMutation.mutate({ code }), 1000);
|
|
}, []); //eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
useEffect(() => {
|
|
if (!code) {
|
|
navigate({ to: '/' });
|
|
}
|
|
}, [code]); //eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
return (
|
|
<HeaderlessLayout>
|
|
<Grid container spacing={2} sx={{ marginTop: 0 }}>
|
|
<Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center' }}>
|
|
{confirmMutation.isSuccess && <Done color="action" sx={{ fontSize: '200px' }} />}
|
|
{confirmMutation.isError && <Error color="action" sx={{ fontSize: '200px' }} />}
|
|
{(confirmMutation.isPending || confirmMutation.isIdle) && <CircularProgress size={200} />}
|
|
</Grid>
|
|
<Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center' }}>
|
|
{confirmMutation.isSuccess && <Typography variant="h5">{t('Confirm success header')}</Typography>}
|
|
{confirmMutation.isError && (
|
|
<Typography variant="h5" color="error">
|
|
{t('Confirm error header')}
|
|
</Typography>
|
|
)}
|
|
{(confirmMutation.isPending || confirmMutation.isIdle) && (
|
|
<Typography variant="h5">{t('Confirm pending header')}</Typography>
|
|
)}
|
|
</Grid>
|
|
{!confirmMutation.isPending && !confirmMutation.isIdle && (
|
|
<Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center' }}>
|
|
<MUILink component={Link} to="/" variant="h6" underline="none">
|
|
{t('Back to main')}
|
|
</MUILink>
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
</HeaderlessLayout>
|
|
);
|
|
};
|
|
|
|
export const Route = createFileRoute(`${ROUTES.CONFIRM}/`)({
|
|
validateSearch: (search: Record<string, unknown>): { code?: string } => {
|
|
return {
|
|
code: search?.code !== undefined ? (search?.code as string) : undefined,
|
|
};
|
|
},
|
|
component: Home,
|
|
});
|