add profileData to NavColumn

calblueprint · Dec 3, 2024 · 6660055 · 6660055
1 parent 69277cf
commit 6660055
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
@@ -13,7 +13,7 @@ interface HeaderProps {
 
 export default function Header({ toggleNavColumn, isLoggedIn }: HeaderProps) {
   const currentPath = usePathname();
-  const { profileReady } = useProfile();
+  const { profileReady, profileData } = useProfile();
 
   const onNavColumnClick = () => {
     toggleNavColumn();
@@ -32,8 +32,9 @@ export default function Header({ toggleNavColumn, isLoggedIn }: HeaderProps) {
         <Icon type="logo" />
       </Link>
       {isLoggedIn ? (
-        profileReady ? (
+        profileReady && profileData !== null ? (
           // display profile icon if user is logged in and onboarded
+          // this should route to /my-account in the future
           <Icon type="profile" />
         ) : (
           // display onboarding link if user is logged in but not onboarded

diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx
@@ -6,6 +6,7 @@ import { IconType } from '@/lib/icons';
 import COLORS from '@/styles/colors';
 import { H3, H4 } from '@/styles/text';
 import { useAuth } from '@/utils/AuthProvider';
+import { useProfile } from '@/utils/ProfileProvider';
 import Icon from '../Icon';
 import NavColumnItem from '../NavColumnItem';
 import {
@@ -20,6 +21,7 @@ import {
   Overlay,
   Profile,
   ProfileDisplayContainer,
+  ProfileIcon,
   SignOutButton,
   SignUpButton,
 } from './styles';
@@ -53,6 +55,7 @@ export default function NavColumn({
   const currentPath = usePathname();
   const { signOut } = useAuth();
   const router = useRouter();
+  const { profileData } = useProfile();
 
   const handleSignOut = () => {
     router.push(CONFIG.login);
@@ -94,13 +97,13 @@ export default function NavColumn({
             {isLoggedIn ? (
               <ProfileDisplayContainer>
                 <Profile>
-                  <Icon type="profile" />
+                  <ProfileIcon type="profile" />
                   <NameAndStatus>
                     <H3 $color={COLORS.shrub} style={{ fontWeight: 300 }}>
-                      Name
+                      Your Account
                     </H3>
                     <H4 $color={COLORS.shrub} style={{ fontWeight: 300 }}>
-                      Type of Garden
+                      {profileData?.user_type}
                     </H4>
                   </NameAndStatus>
                 </Profile>

diff --git a/components/NavColumn/styles.ts b/components/NavColumn/styles.ts
@@ -123,3 +123,8 @@ export const SignOutButton = styled.button`
   cursor: pointer;
   font-size: 0.875rem;
 `;
+
+export const ProfileIcon = styled(Icon)`
+  min-height: 40px;
+  min-width: 40px;
+`;