backstory/frontend/src/routes/CandidateRoute.tsx

58 lines
1.7 KiB
TypeScript

import React, { useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Box } from '@mui/material';
import { SetSnackType } from '../components/Snack';
import { LoadingComponent } from '../components/LoadingComponent';
import { User, Guest, Candidate } from 'types/types';
import { useAuth } from 'hooks/AuthContext';
import { useAppState, useSelectedCandidate } from 'hooks/GlobalContext';
interface CandidateRouteProps {
guest?: Guest | null;
user?: User | null;
}
const CandidateRoute: React.FC<CandidateRouteProps> = (props: CandidateRouteProps) => {
const { apiClient } = useAuth();
const { selectedCandidate, setSelectedCandidate } = useSelectedCandidate();
const { setSnack } = useAppState();
const { username } = useParams<{ username: string }>();
const navigate = useNavigate();
useEffect(() => {
if (selectedCandidate?.username === username || !username) {
return;
}
const getCandidate = async (reference: string): Promise<void> => {
try {
const result: Candidate = await apiClient.getCandidate(reference);
setSelectedCandidate(result);
navigate('/chat');
} catch {
setSnack(`Unable to obtain information for ${username}.`, 'error');
navigate('/');
}
};
getCandidate(username);
}, [setSelectedCandidate, selectedCandidate, username, navigate, setSnack, apiClient]);
if (selectedCandidate?.username !== username) {
return (
<Box>
<LoadingComponent
loadingText="Fetching candidate information..."
loaderType="linear"
withFade={true}
fadeDuration={1200}
/>
</Box>
);
} else {
return <></>;
}
};
export { CandidateRoute };