From 98c2cf43222c47882df184f73691db46c8d2e6b6 Mon Sep 17 00:00:00 2001
From: Liam Stevens <8955671+liamstevens111@users.noreply.github.com>
Date: Wed, 8 Mar 2023 16:28:29 +0700
Subject: [PATCH] [#19] Add header element and pass user instead of context for
 Outlet in router

---
 src/components/Header/index.tsx        | 16 ++++++++++++++++
 src/components/PrivateRoutes/index.tsx | 20 +++++++++++---------
 src/screens/Home/index.tsx             |  6 ------
 3 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Header/index.tsx

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
new file mode 100644
index 0000000..ef1f11f
--- /dev/null
+++ b/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;
diff --git a/src/components/PrivateRoutes/index.tsx b/src/components/PrivateRoutes/index.tsx
index 74d261e..ce3c46d 100644
--- a/src/components/PrivateRoutes/index.tsx
+++ b/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>();
-}
diff --git a/src/screens/Home/index.tsx b/src/screens/Home/index.tsx
index 6cc0710..c87cb3e 100644
--- a/src/screens/Home/index.tsx
+++ b/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>
     </>
   );
 };