Create me query, useMe hook and Remember me component

src/App.tsx

 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { BrowserRouter as Router } from 'react-router-dom';
+import RememberMe from './components/RememberMe';
 import { ClientContextProvider } from './context';
 import ThemeProvider from './context/ThemeProvider';
 import { UserStateProvider } from './context/UserContext';
@@ -14,11 +15,13 @@ function App(): React.ReactElement {
     <QueryClientProvider client={queryClient}>
       <ClientContextProvider>
         <UserStateProvider>
+          <RememberMe>
             <ThemeProvider theme={darkTheme}>
               <Router>
                 <Routes />
               </Router>
             </ThemeProvider>
+          </RememberMe>
         </UserStateProvider>
       </ClientContextProvider>
     </QueryClientProvider>

src/client/auth.ts

-import Axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
-import { EmptyReq, LoginReq, RegisterReq, UserResponse } from './types';
+import Axios, { AxiosRequestConfig } from 'axios';
+import { UserResponse } from './types';
 
-type LoginQuery = (data?: LoginReq) => Promise<AxiosResponse<UserResponse>>;
-type RegisterQuery = (data?: RegisterReq) => Promise<AxiosResponse<UserResponse>>;
-type MeQuery = (data?: EmptyReq, authToken?: string) => Promise<AxiosResponse<UserResponse>>;
+type MeQuery = () => Promise<UserResponse>;
+type LogoutQuery = () => Promise<any>;
 
 export type AuthClient = {
-  login: LoginQuery;
   me: MeQuery;
-  register: RegisterQuery;
+  logout: LogoutQuery;
 };
 
 export function auth(config: AxiosRequestConfig): AuthClient {
   const axios = Axios.create({
     ...config,
-    baseURL: `${config.baseURL}/api/auth`,
+    baseURL: `${config.baseURL}/api/v1/`,
   });
 
-  const login: LoginQuery = (data?: LoginReq): Promise<AxiosResponse<UserResponse>> => {
-    return axios.post<UserResponse>('/login', data);
+  const me: MeQuery = async (): Promise<UserResponse> => {
+    return (await axios.get<UserResponse>('/users/me')).data;
   };
 
-  const register: RegisterQuery = (data?: RegisterReq): Promise<AxiosResponse<UserResponse>> => {
-    return axios.post<UserResponse>('/register', data);
-  };
-
-  const me: MeQuery = (
-    data?: undefined,
-    authToken?: string,
-  ): Promise<AxiosResponse<UserResponse>> => {
-    return axios.get<UserResponse>('/me', {
-      headers: { Authorization: `Bearer ${authToken}` },
-    });
+  const logout: LogoutQuery = async (): Promise<any> => {
+    return (await axios.get<any>('/logout')).data;
   };
 
   return {
-    login,
-    register,
     me,
+    logout,
   };
 }

src/components/Header.tsx

@@ -17,6 +17,7 @@ import React, { useState } from 'react';
 import { useHistory } from 'react-router';
 import { useUserContext } from '../hooks/useUserContext';
 import SCHBodyIcon from '../svg/SCHBodyIcon';
+import WrapperLink from './WrapperLink';
 
 export interface AppBarMenuItem {
   id: number;
@@ -188,9 +189,11 @@ const Header: React.FC<HeaderProps> = ({ customToolbar, handleLogout, menuItems
               </Box>
             </>
           ) : (
+            <WrapperLink to="/api/v1/login">
               <Button color="secondary" variant="contained">
                 Belépés
               </Button>
+            </WrapperLink>
           )}
         </Toolbar>
       )}

src/components/RememberMe.tsx

+import React, { useEffect } from 'react';
+import useMe from '../hooks/useMe';
+import { useUserContext } from '../hooks/useUserContext';
+
+interface Props {}
+
+const RememberMe: React.FC = ({ children }) => {
+  const { setProfile } = useUserContext();
+  const { data: me } = useMe();
+
+  useEffect(() => {
+    if (me) {
+      setProfile(me.user);
+    }
+  }, [me, setProfile]);
+
+  return <>{children}</>;
+};
+
+export default RememberMe;

src/context/UserContext.tsx

@@ -24,7 +24,7 @@ export const UserContext = createContext({} as UserContextType);
 const { Provider } = UserContext;
 
 export const UserStateProvider: React.FC = ({ children }) => {
-  const [profile, setProfile] = useState<IProfile | undefined>(initialState);
+  const [profile, setProfile] = useState<IProfile | undefined>();
 
   return <Provider value={{ profile, setProfile }}>{children}</Provider>;
 };

src/hooks/useLogin.ts

-import { useMutation } from 'react-query';
-import useClientContext from './useClientContext';
-
-export default function useLogin() {
-  const client = useClientContext();
-
-  return useMutation('login', client.client.auth.login);
-}

src/hooks/useMe.tsx

+import { useQuery, UseQueryResult } from 'react-query';
+import { UserResponse } from '../client/types';
+import useClientContext from './useClientContext';
+
+export default function useMe(): UseQueryResult<UserResponse, Error> {
+  const client = useClientContext();
+
+  return useQuery<UserResponse, Error>('me', async () => client.client.auth.me());
+}

src/setupProxy.js

@@ -4,7 +4,7 @@ module.exports = function (app) {
   app.use(
     '/api/v1',
     createProxyMiddleware({
-      target: 'https://body-dev.maze.sch.bme.hu/dev',
+      target: process.env.REACT_APP_PROXY_TARGET,
       changeOrigin: true,
     }),
   );