display user name in header

client/src/App.tsx

@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import Login from './routes/login';
 import Home from './routes/home';
 import { checkAuth } from './controllers/Auth';
+import { CookiesProvider } from 'react-cookie';
 
 // Create a client
 const queryClient = new QueryClient();
@@ -11,11 +12,13 @@ export default () => {
   return (
     <BrowserRouter>
       <QueryClientProvider client={queryClient}>
-        <Routes>
-          <Route path="/login" element={checkAuth() ? <Navigate to="/home" /> : <Login />} />
-          <Route path="/home" element={!checkAuth() ? <Navigate to="/login" /> : <Home />} />
-        </Routes>
-        <Outlet />
+        <CookiesProvider>
+          <Routes>
+            <Route path="/login" element={checkAuth() ? <Navigate to="/home" /> : <Login />} />
+            <Route path="/home" element={!checkAuth() ? <Navigate to="/login" /> : <Home />} />
+          </Routes>
+          <Outlet />
+        </CookiesProvider>
       </QueryClientProvider>
     </BrowserRouter>
   );

client/src/components/AppHeader.tsx

@@ -1,6 +1,33 @@
 import logo from '@assets/images/logo.svg';
+import { useQuery } from '@tanstack/react-query';
+import { Cookies, withCookies } from 'react-cookie';
+import { useNavigate } from 'react-router-dom';
+
+const getMeInfo = async () => {
+  const token = new Cookies().get('token');
+  const response = await fetch('/api/me', {
+    method: 'GET',
+    mode: 'cors',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return response.json();
+};
+
+
 
 const AppHeader = () => {
+  const meInfo = useQuery(['me'], getMeInfo, {
+    onSuccess: (data) => {
+      return data;
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
   return (
     <div className="min-h-80 flex items-center justify-between bg-grey-dark p-2">
       <div className="app-header__logo">
@@ -12,9 +39,12 @@ const AppHeader = () => {
             <img src="https://randomuser.me/api/portraits/women/72.jpg" alt="avatar" />
           </div>
           <div className="app-header__user__name">
-            <span className="text-white">John Doe</span>
+            <span className="text-white">
+              {meInfo.isLoading ? '' : meInfo.data ? meInfo.data.firstName + ' ' + meInfo.data.lastName : ''}
+            </span>
           </div>
-          <button className="group relative flex w-auto justify-center rounded-md border border-red bg-red py-2 px-2 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2">
+          <button className="group relative flex w-auto justify-center rounded-md border border-red bg-red py-2 px-2 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
+          >
             Deonnexion
           </button>
         </div>
@@ -23,4 +53,4 @@ const AppHeader = () => {
   );
 };
 
-export default AppHeader;
+export default withCookies(AppHeader);