From 5857e04fa8a99547214eb91b3a49fcb453afe966 Mon Sep 17 00:00:00 2001
From: Kyle Ramachandran <kyleramachandran@berkeley.edu>
Date: Sat, 7 Dec 2024 16:03:47 -0800
Subject: [PATCH] remove isLoggedIn prop from NavColumn and Header

---
 components/Header/index.tsx    | 12 +++++++++---
 components/NavColumn/index.tsx | 20 ++++++++------------
 components/NavSystem.tsx       |  3 +--
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 8f67c7f..267a214 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -1,19 +1,25 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import CONFIG from '@/lib/configs';
+import { useAuth } from '@/utils/AuthProvider';
 import { useProfile } from '@/utils/ProfileProvider';
 import Icon from '../Icon';
 import { Container, HamburgerButton } from './styles';
 
 interface HeaderProps {
   toggleNavColumn: () => void;
-  isLoggedIn: boolean;
 }
 
-export default function Header({ toggleNavColumn, isLoggedIn }: HeaderProps) {
+export default function Header({ toggleNavColumn }: HeaderProps) {
   const currentPath = usePathname();
   const { profileReady, profileData } = useProfile();
+  const { userId } = useAuth();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  useEffect(() => {
+    setIsLoggedIn(userId !== null);
+  }, [userId]);
 
   const onNavColumnClick = () => {
     toggleNavColumn();
diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx
index 32b843f..4e94aad 100644
--- a/components/NavColumn/index.tsx
+++ b/components/NavColumn/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import CONFIG from '@/lib/configs';
@@ -32,7 +32,6 @@ import {
 interface NavColumnProps {
   isOpen: boolean;
   onClose: () => void;
-  isLoggedIn: boolean;
 }
 
 type NavLink = {
@@ -50,15 +49,16 @@ const navLinks: NavLink[] = [
   },
 ];
 
-export default function NavColumn({
-  isOpen,
-  onClose,
-  isLoggedIn,
-}: NavColumnProps) {
+export default function NavColumn({ isOpen, onClose }: NavColumnProps) {
   const currentPath = usePathname();
-  const { signOut } = useAuth();
+  const { signOut, userId } = useAuth();
   const router = useRouter();
   const { profileData, profileReady } = useProfile();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  useEffect(() => {
+    setIsLoggedIn(userId !== null);
+  }, [userId]);
 
   const handleSignOut = () => {
     router.push(CONFIG.login);
@@ -66,10 +66,6 @@ export default function NavColumn({
     signOut();
   };
 
-  useEffect(() => {
-    console.log('profileData', profileData);
-  }, [profileData]);
-
   return (
     <>
       {isOpen && (
diff --git a/components/NavSystem.tsx b/components/NavSystem.tsx
index 13e90db..071fff6 100644
--- a/components/NavSystem.tsx
+++ b/components/NavSystem.tsx
@@ -15,11 +15,10 @@ export default function NavSystem() {
 
   return (
     <>
-      <Header toggleNavColumn={toggleNavColumn} isLoggedIn={userId !== null} />
+      <Header toggleNavColumn={toggleNavColumn} />
       <NavColumn
         isOpen={isNavColumnOpen}
         onClose={() => setIsNavColumnOpen(false)}
-        isLoggedIn={userId !== null}
       />
     </>
   );