[#19] Add header element and pass user instead of context for Outlet …

…in router

src/components/Header/index.tsx

@@ -0,0 +1,16 @@
+import { User } from 'types/User';
+
+type HeaderProps = {
+  user: User;
+};
+
+function Header({ user }: HeaderProps) {
+  return (
+    <header className="flex w-screen flex-row items-center justify-between p-0">
+      <div className="">Test logo for {user.email}</div>
+      <div className="profile-image">Test image for {user.name}</div>
+    </header>
+  );
+}
+
+export default Header;

src/components/PrivateRoutes/index.tsx

@@ -1,11 +1,10 @@
 import { useState, useEffect } from 'react';
-import { Navigate, Outlet, useOutletContext } from 'react-router-dom';
+import { Navigate, Outlet } from 'react-router-dom';
 
+import Header from 'components/Header';
 import { getItem } from 'helpers/localStorage';
 import type { User } from 'types/User';
 
-type ContextType = User;
-
 import { LOGIN_URL } from '../../constants';
 
 function PrivateRoutes() {
@@ -16,7 +15,7 @@ function PrivateRoutes() {
     const fetchCurrentUser = async () => {
       const userProfile = getItem('UserProfile');
       if (userProfile?.user) {
-        setUser({ ...userProfile.user });
+        setUser({ name: userProfile.user.name, email: userProfile.user.email, avatarUrl: userProfile.user.avatar_url });
       }
 
       setLoading(false);
@@ -28,11 +27,14 @@ function PrivateRoutes() {
     return <h3>Loading...</h3>;
   }
 
-  return user ? <Outlet context={user} /> : <Navigate to={LOGIN_URL} />;
+  return user ? (
+    <>
+      <Header user={user} />
+      <Outlet />
+    </>
+  ) : (
+    <Navigate to={LOGIN_URL} />
+  );
 }
 
 export default PrivateRoutes;
-
-export function useUser() {
-  return useOutletContext<ContextType>();
-}

src/screens/Home/index.tsx

@@ -1,15 +1,9 @@
-import { useUser } from 'components/PrivateRoutes';
-
 const HomeScreen = (): JSX.Element => {
-  const user = useUser();
-
   return (
     <>
       <div className="my-8 text-white opacity-50" data-test-id="app-main-heading">
         Home Screen
       </div>
-      {/* TODO: Remove when header implemented in #19 */}
-      <div className="my-8 text-white opacity-50">{`${user?.name} - ${user?.email} - ${user?.avatarUrl}`}</div>
     </>
   );
 };