Fix private routes with outlet and OutletContext wip

src/adapters/authAdapter.ts

@@ -35,6 +35,10 @@ class AuthAdapter extends BaseAdapter {
 
     return this.prototype.postRequest('oauth/token', { data: requestParams });
   }
+
+  static getUser() {
+    return this.prototype.getRequest('me', {});
+  }
 }
 
 export default AuthAdapter;

src/components/PrivateRoutes/index.tsx

@@ -1,11 +1,45 @@
-import { Navigate, Outlet } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { Navigate, Outlet, useOutletContext } from 'react-router-dom';
 
-import useUser from 'hooks/useUser';
+import AuthAdapter from 'adapters/authAdapter';
+import { getToken } from 'helpers/userToken';
+import type { User } from 'types/User';
+
+type ContextType = User;
+
+import { LOGIN_URL } from '../../constants';
 
 function PrivateRoutes() {
-  const { currentUser } = useUser();
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchCurrentUser = async () => {
+      const token = getToken().access_token;
+
+      if (!token) {
+        setLoading(false);
+      } else {
+        const response = await AuthAdapter.getUser();
+
+        const data = await response.data;
 
-  return currentUser ? <Outlet context={{ currentUser }} /> : <Navigate to="/login" />;
+        setUser(data.attributes);
+        setLoading(false);
+      }
+    };
+    fetchCurrentUser();
+  }, []);
+
+  if (loading) {
+    return null;
+  }
+
+  return user ? <Outlet context={user} /> : <Navigate to={LOGIN_URL} />;
 }
 
 export default PrivateRoutes;
+
+export function useUser() {
+  return useOutletContext<ContextType>();
+}

src/screens/Home/index.tsx

@@ -1,7 +1,16 @@
-import React from 'react';
+import { useUser } from 'components/PrivateRoutes';
 
 const HomeScreen = (): JSX.Element => {
-  return <div data-test-id="app-main-heading">Home Screen</div>;
+  const user = useUser();
+
+  return (
+    <>
+      <div className="my-8 text-white opacity-50" data-test-id="app-main-heading">
+        Home Screen
+      </div>
+      <div className="my-8 text-white opacity-50">{user && user.email}</div>
+    </>
+  );
 };
 
 export default HomeScreen;

src/types/User.ts

@@ -0,0 +1,5 @@
+export type User = {
+  email: string;
+  name: string;
+  avatarUrl: string;
+};