diff --git a/src/client/auth.ts b/src/client/auth.ts index a7e8a69af065fe5589bceb5962ff0a37e1040bfc..017fb7fadc90f40aabde0d96d32204fab2bdd9c6 100644 --- a/src/client/auth.ts +++ b/src/client/auth.ts @@ -1,7 +1,8 @@ import Axios, { AxiosRequestConfig } from 'axios'; +import type { ProfileWithStatus } from '../context'; import { IProfile } from '../types/Profile'; -type MeQuery = () => Promise<IProfile>; +type MeQuery = () => Promise<ProfileWithStatus>; type RegisterQuery = (data: ProfileData) => Promise<any>; export type ProfileData = { @@ -20,8 +21,10 @@ export function auth(config: AxiosRequestConfig): AuthClient { baseURL: `${config.baseURL}/api/v1/`, }); - const me: MeQuery = async (): Promise<IProfile> => { - return (await axios.get<IProfile>('/users/me')).data; + const me: MeQuery = async (): Promise<ProfileWithStatus> => { + const profileResp = await axios.get<IProfile>('/users/me'); + const isLoggedIn = profileResp.status === 404 || profileResp.status === 200; + return { profile: profileResp.data, isLoggedIn }; }; const register: RegisterQuery = async (data: ProfileData): Promise<any> => { diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 688f5ce8749e33439a3ba9f8e1f51d29331c2d40..67ce1667375c135f56e645142ec21dd529fee1ed 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -142,7 +142,7 @@ const Header: React.FC<HeaderProps> = ({ customToolbar, menuItems = MENU_ITEMS } /> ))} - {profile.role === 'ADMIN' && ( + {profile.profile && profile.profile.role === 'ADMIN' && ( <> {ADMIN_MENU_ITEMS.map((item) => ( <Tab @@ -174,7 +174,7 @@ const Header: React.FC<HeaderProps> = ({ customToolbar, menuItems = MENU_ITEMS } </IconButton> <Typography variant="h6" align="center" className={classes.texts}> - {profile.name} + {profile.profile && profile.profile.name} </Typography> <a href="/api/v1/logout"> <Box color="secondary.main"> diff --git a/src/components/RememberMe.tsx b/src/components/RememberMe.tsx index 7731549376a4a495de402dea89f3e099858ce005..d9e6dc452f1329e47403a1d063db62f1a4677a80 100644 --- a/src/components/RememberMe.tsx +++ b/src/components/RememberMe.tsx @@ -1,4 +1,6 @@ +import { isNil } from 'lodash'; import React, { useEffect } from 'react'; +import { Redirect } from 'react-router-dom'; import useMe from '../hooks/useMe'; import { useUserContext } from '../hooks/useUserContext'; @@ -16,6 +18,10 @@ const RememberMe: React.FC = ({ children }) => { } }, [me, setProfile]); + if (isNil(me?.profile) && me?.isLoggedIn) { + return <Redirect to="/register" />; + } + return <>{children}</>; }; diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx index 99051b030d1f504c8b0aebe8f1473411ccece217..cac0b3611410621645bee86a42312661d7190ff0 100644 --- a/src/context/UserContext.tsx +++ b/src/context/UserContext.tsx @@ -1,9 +1,14 @@ import React, { createContext, useState } from 'react'; import { IProfile } from '../types/Profile'; +export type ProfileWithStatus = { + profile?: IProfile; + isLoggedIn: boolean; +}; + export interface UserContextType { - profile: IProfile | undefined; - setProfile: (profile: IProfile | undefined) => void; + profile?: ProfileWithStatus; + setProfile: (profile: ProfileWithStatus | undefined) => void; } /* // Context @@ -24,7 +29,7 @@ export const UserContext = createContext({} as UserContextType); const { Provider } = UserContext; export const UserStateProvider: React.FC = ({ children }) => { - const [profile, setProfile] = useState<IProfile | undefined>(); + const [profile, setProfile] = useState<ProfileWithStatus>(); return <Provider value={{ profile, setProfile }}>{children}</Provider>; }; diff --git a/src/hooks/useMe.tsx b/src/hooks/useMe.tsx index 2929427bf23be771bbd28987ed730eea138b4af1..c52226a3e90d97b976639f7f42dd29466f649e8a 100644 --- a/src/hooks/useMe.tsx +++ b/src/hooks/useMe.tsx @@ -1,9 +1,9 @@ import { useQuery, UseQueryResult } from 'react-query'; -import { IProfile } from '../types/Profile'; +import { ProfileWithStatus } from '../context'; import useClientContext from './useClientContext'; -export default function useMe(): UseQueryResult<IProfile, Error> { +export default function useMe(): UseQueryResult<ProfileWithStatus, Error> { const client = useClientContext(); - return useQuery<IProfile, Error>('me', async () => client.client.auth.me()); + return useQuery<ProfileWithStatus, Error>('me', async () => client.client.auth.me()); }