From d5ec9b56aeeae4fe2d51a0189cf8e19a82c2f5c0 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Tue, 19 Nov 2024 22:00:35 -0800 Subject: [PATCH 01/21] created NavColumn, Header, and NavSystem components --- app/layout.tsx | 6 +- components/Header/index.tsx | 40 +++++++++++++ components/Header/styles.ts | 14 +++++ components/NavColumn/index.tsx | 15 +++++ components/NavColumn/styles.ts | 10 ++++ components/NavSystem.tsx | 20 +++++++ lib/configs.ts | 9 +++ lib/icons.tsx | 105 +++++++++++++++++++++++++++++++++ 8 files changed, 218 insertions(+), 1 deletion(-) create mode 100644 components/Header/index.tsx create mode 100644 components/Header/styles.ts create mode 100644 components/NavColumn/index.tsx create mode 100644 components/NavColumn/styles.ts create mode 100644 components/NavSystem.tsx create mode 100644 lib/configs.ts diff --git a/app/layout.tsx b/app/layout.tsx index a48c93f..3b550c5 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,5 +1,6 @@ import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; +import NavSystem from '@/components/NavSystem'; import StyledComponentsRegistry from '@/lib/registry'; import ProfileProvider from '@/utils/ProfileProvider'; import { AuthProvider } from '../utils/AuthProvider'; @@ -27,7 +28,10 @@ export default function RootLayout({ - {children} + + + {children} + diff --git a/components/Header/index.tsx b/components/Header/index.tsx new file mode 100644 index 0000000..242d613 --- /dev/null +++ b/components/Header/index.tsx @@ -0,0 +1,40 @@ +import React, { useEffect } from 'react'; +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; +import { useAuth } from '@/utils/AuthProvider'; +import Icon from '../Icon'; +import { Container, HamburgerButton } from './styles'; + +interface HeaderProps { + toggleNavColumn: () => void; +} + +export default function Header({ toggleNavColumn }: HeaderProps) { + const { userId } = useAuth(); + const currentPath = usePathname(); + + const onNavColumnClick = () => { + toggleNavColumn(); + }; + + if (currentPath === '/onboarding') { + return null; + } + + return ( + + + + + + + + {/* still need to check if onboarding completed or not, after ProfileContext merged*/} + {userId ? ( + + ) : ( + Login/Sign Up + )} + + ); +} diff --git a/components/Header/styles.ts b/components/Header/styles.ts new file mode 100644 index 0000000..4ee6acf --- /dev/null +++ b/components/Header/styles.ts @@ -0,0 +1,14 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 24px 12px; +`; + +export const HamburgerButton = styled.button` + background: none; + border: none; + cursor: pointer; +`; diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx new file mode 100644 index 0000000..1043e4e --- /dev/null +++ b/components/NavColumn/index.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { NavColumnContainer } from './styles'; + +interface NavColumnProps { + isOpen: boolean; +} + +type NavLink = { + name: string; + path: string; +}; + +export default function NavColumn({ isOpen }: NavColumnProps) { + return <>{isOpen && NavColumn}; +} diff --git a/components/NavColumn/styles.ts b/components/NavColumn/styles.ts new file mode 100644 index 0000000..62c010f --- /dev/null +++ b/components/NavColumn/styles.ts @@ -0,0 +1,10 @@ +import styled from 'styled-components'; +import COLORS from '@/styles/colors'; + +export const NavColumnContainer = styled.div` + width: 240px; + height: 100vh; + background: ${COLORS.shrub}; + position: fixed; + z-index: 1000; +`; diff --git a/components/NavSystem.tsx b/components/NavSystem.tsx new file mode 100644 index 0000000..33dc989 --- /dev/null +++ b/components/NavSystem.tsx @@ -0,0 +1,20 @@ +'use client'; + +import { useState } from 'react'; +import Header from './Header'; +import NavColumn from './NavColumn'; + +export default function NavSystem() { + const [isNavColumnOpen, setIsNavColumnOpen] = useState(false); + + const toggleNavColumn = () => { + setIsNavColumnOpen(!isNavColumnOpen); + }; + + return ( + <> +
+ + + ); +} diff --git a/lib/configs.ts b/lib/configs.ts new file mode 100644 index 0000000..8bc2ab5 --- /dev/null +++ b/lib/configs.ts @@ -0,0 +1,9 @@ +const CONFIG = { + homepage: '/', + login: '/login', + signup: '/signup', + onboarding: '/onboarding', + myAccount: '/my-account', +}; + +export default CONFIG; diff --git a/lib/icons.tsx b/lib/icons.tsx index 48dfffb..a4b9cd6 100644 --- a/lib/icons.tsx +++ b/lib/icons.tsx @@ -347,6 +347,111 @@ export const IconSvgs = { /> ), + hamburger: ( + + + + ), + profile: ( + + + + + + + + + + ), + logo: ( + + + + + + + + + + + + + + + ), }; export type IconType = keyof typeof IconSvgs; From 27e6772f776befce58b03da3cf48c08a598d5d5e Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Thu, 21 Nov 2024 18:34:51 -0800 Subject: [PATCH 02/21] added more routes, navcolumn styling --- components/Header/styles.ts | 1 + components/NavColumn/index.tsx | 47 +++++++++++++++++++++++++++++++--- components/NavColumn/styles.ts | 41 +++++++++++++++++++++++++++-- components/NavSystem.tsx | 5 +++- lib/configs.ts | 2 ++ 5 files changed, 90 insertions(+), 6 deletions(-) diff --git a/components/Header/styles.ts b/components/Header/styles.ts index 4ee6acf..c15036a 100644 --- a/components/Header/styles.ts +++ b/components/Header/styles.ts @@ -5,6 +5,7 @@ export const Container = styled.div` justify-content: space-between; align-items: center; padding: 20px 24px 12px; + z-index: 500; `; export const HamburgerButton = styled.button` diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx index 1043e4e..9553b82 100644 --- a/components/NavColumn/index.tsx +++ b/components/NavColumn/index.tsx @@ -1,8 +1,18 @@ import React from 'react'; -import { NavColumnContainer } from './styles'; +import Link from 'next/link'; +import CONFIG from '@/lib/configs'; +import Icon from '../Icon'; +import { + HamburgerButton, + HamburgerIcon, + NavColumnContainer, + NavColumnHeader, + Overlay, +} from './styles'; interface NavColumnProps { isOpen: boolean; + onClose: () => void; } type NavLink = { @@ -10,6 +20,37 @@ type NavLink = { path: string; }; -export default function NavColumn({ isOpen }: NavColumnProps) { - return <>{isOpen && NavColumn}; +const navLinks: NavLink[] = [ + { name: 'View Plants', path: CONFIG.viewPlants }, + { name: 'Planting Timeline', path: CONFIG.plantingTimeline }, +]; + +export default function NavColumn({ isOpen, onClose }: NavColumnProps) { + return ( + <> + {isOpen && ( + <> + + + +
+ {/* empty whitespace for positioning logo and hamburger */} +
+ + + + + + + + {navLinks.map((link: NavLink) => ( + + {link.name} + + ))} + + + )} + + ); } diff --git a/components/NavColumn/styles.ts b/components/NavColumn/styles.ts index 62c010f..0f8fa11 100644 --- a/components/NavColumn/styles.ts +++ b/components/NavColumn/styles.ts @@ -1,10 +1,47 @@ import styled from 'styled-components'; import COLORS from '@/styles/colors'; +import Icon from '../Icon'; export const NavColumnContainer = styled.div` - width: 240px; + width: 289px; height: 100vh; - background: ${COLORS.shrub}; + background: #f7f6f3; position: fixed; z-index: 1000; + top: 0; + left: 0; + display: flex; + flex-direction: column; + transition: transform 1s ease-in-out; +`; + +export const Overlay = styled.div<{ isOpen: boolean }>` + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ + z-index: 999; /* Ensure it is below the NavColumn but above other elements */ + display: ${props => (props.isOpen ? 'block' : 'none')}; +`; + +export const HamburgerButton = styled.button` + background: none; + border: none; + cursor: pointer; + color: ${COLORS.shrub}; + justify-self: flex-end; +`; + +// not working +export const HamburgerIcon = styled(Icon)` + fill: ${COLORS.shrub}; +`; + +export const NavColumnHeader = styled.div` + display: grid; + grid-template-columns: 1fr 1fr 1fr; + align-items: center; + padding: 24px 16px; `; diff --git a/components/NavSystem.tsx b/components/NavSystem.tsx index 33dc989..219aa22 100644 --- a/components/NavSystem.tsx +++ b/components/NavSystem.tsx @@ -14,7 +14,10 @@ export default function NavSystem() { return ( <>
- + setIsNavColumnOpen(false)} + /> ); } diff --git a/lib/configs.ts b/lib/configs.ts index 8bc2ab5..31c931c 100644 --- a/lib/configs.ts +++ b/lib/configs.ts @@ -4,6 +4,8 @@ const CONFIG = { signup: '/signup', onboarding: '/onboarding', myAccount: '/my-account', + viewPlants: '/view-plants', + plantingTimeline: '/seasonal-planting-guide', }; export default CONFIG; From 521e7c359ffc61b14d1bbe9110909441a995f352 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Fri, 22 Nov 2024 00:26:22 -0800 Subject: [PATCH 03/21] added NavColumnItems, more styling for NavColumn --- components/Header/index.tsx | 7 ++- components/NavColumn/index.tsx | 73 ++++++++++++++++++++++-------- components/NavColumn/styles.ts | 44 +++++++++++++++++- components/NavColumnItem/index.tsx | 37 +++++++++++++++ components/NavColumnItem/styles.ts | 44 ++++++++++++++++++ components/NavSystem.tsx | 5 +- lib/icons.tsx | 28 ++++++++++++ 7 files changed, 212 insertions(+), 26 deletions(-) create mode 100644 components/NavColumnItem/index.tsx create mode 100644 components/NavColumnItem/styles.ts diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 242d613..a564196 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -1,16 +1,15 @@ import React, { useEffect } from 'react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; -import { useAuth } from '@/utils/AuthProvider'; import Icon from '../Icon'; import { Container, HamburgerButton } from './styles'; interface HeaderProps { toggleNavColumn: () => void; + isLoggedIn: boolean; } -export default function Header({ toggleNavColumn }: HeaderProps) { - const { userId } = useAuth(); +export default function Header({ toggleNavColumn, isLoggedIn }: HeaderProps) { const currentPath = usePathname(); const onNavColumnClick = () => { @@ -30,7 +29,7 @@ export default function Header({ toggleNavColumn }: HeaderProps) { {/* still need to check if onboarding completed or not, after ProfileContext merged*/} - {userId ? ( + {isLoggedIn ? ( ) : ( Login/Sign Up diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx index 9553b82..793b3c1 100644 --- a/components/NavColumn/index.tsx +++ b/components/NavColumn/index.tsx @@ -1,53 +1,88 @@ import React from 'react'; import Link from 'next/link'; +import { usePathname } from 'next/navigation'; import CONFIG from '@/lib/configs'; +import { IconType } from '@/lib/icons'; import Icon from '../Icon'; +import NavColumnItem from '../NavColumnItem'; import { HamburgerButton, HamburgerIcon, + LoginButton, + LoginButtonsContainer, NavColumnContainer, NavColumnHeader, + NavLinksContainer, Overlay, + SignUpButton, } from './styles'; interface NavColumnProps { isOpen: boolean; onClose: () => void; + isLoggedIn: boolean; } type NavLink = { name: string; path: string; + iconName: IconType; }; const navLinks: NavLink[] = [ - { name: 'View Plants', path: CONFIG.viewPlants }, - { name: 'Planting Timeline', path: CONFIG.plantingTimeline }, + { name: 'View Plants', path: CONFIG.viewPlants, iconName: 'plant' }, + { + name: 'Planting Timeline', + path: CONFIG.plantingTimeline, + iconName: 'calendar', + }, ]; -export default function NavColumn({ isOpen, onClose }: NavColumnProps) { +export default function NavColumn({ + isOpen, + onClose, + isLoggedIn, +}: NavColumnProps) { + const currentPath = usePathname(); + return ( <> {isOpen && ( <> - -
- {/* empty whitespace for positioning logo and hamburger */} -
- - - - - - - - {navLinks.map((link: NavLink) => ( - - {link.name} - - ))} +
+ +
+ {/* empty whitespace for positioning logo and hamburger */} +
+ + + + + + + + + {navLinks.map((link: NavLink) => ( + + ))} + +
+ {isLoggedIn ? ( +
+ ) : ( + + Log In + Sign Up + + )} )} diff --git a/components/NavColumn/styles.ts b/components/NavColumn/styles.ts index 0f8fa11..028b2bc 100644 --- a/components/NavColumn/styles.ts +++ b/components/NavColumn/styles.ts @@ -1,3 +1,4 @@ +import Link from 'next/link'; import styled from 'styled-components'; import COLORS from '@/styles/colors'; import Icon from '../Icon'; @@ -13,6 +14,8 @@ export const NavColumnContainer = styled.div` display: flex; flex-direction: column; transition: transform 1s ease-in-out; + padding-bottom: 3rem; + justify-content: space-between; `; export const Overlay = styled.div<{ isOpen: boolean }>` @@ -21,8 +24,8 @@ export const Overlay = styled.div<{ isOpen: boolean }>` left: 0; width: 100vw; height: 100vh; - background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ - z-index: 999; /* Ensure it is below the NavColumn but above other elements */ + background-color: rgba(0, 0, 0, 0.5); + z-index: 999; display: ${props => (props.isOpen ? 'block' : 'none')}; `; @@ -44,4 +47,41 @@ export const NavColumnHeader = styled.div` grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 24px 16px; + z-index: 1001; +`; + +export const NavLinksContainer = styled.div` + display: flex; + flex-direction: column; +`; + +export const LoginButtonsContainer = styled.div` + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + margin: 0 16px 3rem 16px; +`; + +export const LoginButton = styled(Link)` + display: flex; + justify-content: center; + align-items: center; + border-radius: 20px; + border: 1px solid ${COLORS.shrub}; + background-color: #f7f6f3; + padding: 12px 0px 12px 0px; + color: ${COLORS.shrub}; + text-decoration: none; +`; + +export const SignUpButton = styled(Link)` + display: flex; + justify-content: center; + align-items: center; + border-radius: 20px; + border: none; + background-color: ${COLORS.shrub}; + padding: 12px 0px 12px 0px; + color: #ffffff; + text-decoration: none; `; diff --git a/components/NavColumnItem/index.tsx b/components/NavColumnItem/index.tsx new file mode 100644 index 0000000..ad1472e --- /dev/null +++ b/components/NavColumnItem/index.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { IconType } from '@/lib/icons'; +import Icon from '../Icon'; +import { + NavColumnItemContainer, + NavColumnItemOuterContainer, + SelectedIndicator, + StyledLink, +} from './styles'; + +interface NavColumnItemProps { + name: string; + path: string; + icon: IconType; + isSelected: boolean; + onClose: () => void; +} + +export default function NavColumnItem({ + name, + path, + icon, + isSelected, + onClose, +}: NavColumnItemProps) { + return ( + + {isSelected && } + + + + {name} + + + + ); +} diff --git a/components/NavColumnItem/styles.ts b/components/NavColumnItem/styles.ts new file mode 100644 index 0000000..10c331d --- /dev/null +++ b/components/NavColumnItem/styles.ts @@ -0,0 +1,44 @@ +import Link from 'next/link'; +import styled from 'styled-components'; +import COLORS from '@/styles/colors'; + +export const NavColumnItemOuterContainer = styled.div` + display: flex; + flex-direction: row; +`; + +export const NavColumnItemContainer = styled.div<{ isSelected: boolean }>` + display: flex; + flex-direction: row; + align-items: center; + padding: ${props => (props.isSelected ? '24px 24px 24px 20px' : '24px')}; + gap: 16px; + background-color: ${props => + props.isSelected + ? 'rgba(148, 181, 6, 0.1)' + : '#f7f6f3'}; // this is COLORS.shrub with 10% opacity + border-radius: ${props => (props.isSelected ? '0px 50px 50px 0px' : 'none')}; + width: 100%; +`; + +export const StyledLink = styled(Link)` + text-decoration: none; + color: ${COLORS.shrub}; + &:hover { + text-decoration: none; + } + &:focus, + &:active { + color: inherit; /* Ensure color does not change when clicked */ + text-decoration: none; + } +`; + +export const SelectedIndicator = styled.div` + background-color: ${COLORS.shrub}; + border: 1px solid ${COLORS.shrub}; + border-radius: 0px 50px 50px 0px; + height: 100%; + min-height: 72px; + min-width: 4px; +`; diff --git a/components/NavSystem.tsx b/components/NavSystem.tsx index 219aa22..13e90db 100644 --- a/components/NavSystem.tsx +++ b/components/NavSystem.tsx @@ -1,11 +1,13 @@ 'use client'; import { useState } from 'react'; +import { useAuth } from '@/utils/AuthProvider'; import Header from './Header'; import NavColumn from './NavColumn'; export default function NavSystem() { const [isNavColumnOpen, setIsNavColumnOpen] = useState(false); + const { userId } = useAuth(); const toggleNavColumn = () => { setIsNavColumnOpen(!isNavColumnOpen); @@ -13,10 +15,11 @@ export default function NavSystem() { return ( <> -
+
setIsNavColumnOpen(false)} + isLoggedIn={userId !== null} /> ); diff --git a/lib/icons.tsx b/lib/icons.tsx index a4b9cd6..894a349 100644 --- a/lib/icons.tsx +++ b/lib/icons.tsx @@ -452,6 +452,34 @@ export const IconSvgs = { /> ), + calendar: ( + + + + ), + plant: ( + + + + ), }; export type IconType = keyof typeof IconSvgs; From b06272fc4b213bc49b02870edba11de7a6133e80 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Fri, 22 Nov 2024 00:51:06 -0800 Subject: [PATCH 04/21] added conditional rendering depending on logged in --- components/Header/index.tsx | 2 +- components/NavColumn/index.tsx | 31 ++++++++++++++++++++++++++++--- components/NavColumn/styles.ts | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 63 insertions(+), 4 deletions(-) diff --git a/components/Header/index.tsx b/components/Header/index.tsx index a564196..eecca17 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import Icon from '../Icon'; diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx index 793b3c1..32041c7 100644 --- a/components/NavColumn/index.tsx +++ b/components/NavColumn/index.tsx @@ -3,6 +3,9 @@ import Link from 'next/link'; import { usePathname } from 'next/navigation'; import CONFIG from '@/lib/configs'; import { IconType } from '@/lib/icons'; +import COLORS from '@/styles/colors'; +import { H3, H4 } from '@/styles/text'; +import { useAuth } from '@/utils/AuthProvider'; import Icon from '../Icon'; import NavColumnItem from '../NavColumnItem'; import { @@ -10,10 +13,14 @@ import { HamburgerIcon, LoginButton, LoginButtonsContainer, + NameAndStatus, NavColumnContainer, NavColumnHeader, NavLinksContainer, Overlay, + Profile, + ProfileDisplayContainer, + SignOutButton, SignUpButton, } from './styles'; @@ -44,6 +51,7 @@ export default function NavColumn({ isLoggedIn, }: NavColumnProps) { const currentPath = usePathname(); + const { signOut } = useAuth(); return ( <> @@ -76,11 +84,28 @@ export default function NavColumn({ {isLoggedIn ? ( -
+ + + + +

+ Name +

+

+ Type of Garden +

+ + + Sign Out + ) : ( - Log In - Sign Up + + Log In + + + Sign Up + )} diff --git a/components/NavColumn/styles.ts b/components/NavColumn/styles.ts index 028b2bc..0bb89c2 100644 --- a/components/NavColumn/styles.ts +++ b/components/NavColumn/styles.ts @@ -85,3 +85,37 @@ export const SignUpButton = styled(Link)` color: #ffffff; text-decoration: none; `; + +export const ProfileDisplayContainer = styled.div` + display: flex; + flex-direction: column; + gap: 20px; + margin: 0px 24px 24px 24px; +`; + +export const Profile = styled.div` + display: flex; + flex-direction: row; + gap: 16px; + align-items: center; +`; + +export const NameAndStatus = styled.div` + display: flex; + flex-direction: column; + gap: 4px; +`; + +export const SignOutButton = styled.button` + display: flex; + width: 100%; + justify-content: center; + align-items: center; + border-radius: 20px; + border: 1px solid ${COLORS.error}; + background-color: #f7f6f3; + padding: 4px 0px 4px 0px; + color: ${COLORS.error}; + text-decoration: none; + cursor: pointer; +`; From d395efec49d30f202a63c61d23b60c5142562d1c Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Fri, 22 Nov 2024 00:56:08 -0800 Subject: [PATCH 05/21] fix lint errors --- components/NavColumn/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx index 32041c7..e3e7c8e 100644 --- a/components/NavColumn/index.tsx +++ b/components/NavColumn/index.tsx @@ -72,8 +72,9 @@ export default function NavColumn({ - {navLinks.map((link: NavLink) => ( + {navLinks.map((link: NavLink, key) => ( Date: Sat, 23 Nov 2024 21:20:06 -0800 Subject: [PATCH 06/21] remove duplicate plant and calendar icons and run prettier --- app/layout.tsx | 6 +++--- lib/icons.tsx | 28 ---------------------------- 2 files changed, 3 insertions(+), 31 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 3b550c5..2091aa9 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -29,9 +29,9 @@ export default function RootLayout({ - - {children} - + + {children} + diff --git a/lib/icons.tsx b/lib/icons.tsx index 894a349..a4b9cd6 100644 --- a/lib/icons.tsx +++ b/lib/icons.tsx @@ -452,34 +452,6 @@ export const IconSvgs = { /> ), - calendar: ( - - - - ), - plant: ( - - - - ), }; export type IconType = keyof typeof IconSvgs; From c97ec78cd312531885670d15370c8dd2e1a06dbb Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 23 Nov 2024 22:03:19 -0800 Subject: [PATCH 07/21] styling changes to NavColumn and Header --- components/NavColumn/index.tsx | 15 +++++++++---- components/NavColumn/styles.ts | 14 +++++++----- components/NavColumnItem/index.tsx | 7 +++--- components/NavColumnItem/styles.ts | 36 +++++++++++++++++++++--------- 4 files changed, 49 insertions(+), 23 deletions(-) diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx index e3e7c8e..ea90da3 100644 --- a/components/NavColumn/index.tsx +++ b/components/NavColumn/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import Link from 'next/link'; -import { usePathname } from 'next/navigation'; +import { usePathname, useRouter } from 'next/navigation'; import CONFIG from '@/lib/configs'; import { IconType } from '@/lib/icons'; import COLORS from '@/styles/colors'; @@ -52,6 +52,13 @@ export default function NavColumn({ }: NavColumnProps) { const currentPath = usePathname(); const { signOut } = useAuth(); + const router = useRouter(); + + const handleSignOut = () => { + router.push(CONFIG.login); + onClose(); + signOut(); + }; return ( <> @@ -97,14 +104,14 @@ export default function NavColumn({ - Sign Out + Sign Out ) : ( - + Log In - + Sign Up diff --git a/components/NavColumn/styles.ts b/components/NavColumn/styles.ts index 0bb89c2..53063fb 100644 --- a/components/NavColumn/styles.ts +++ b/components/NavColumn/styles.ts @@ -4,7 +4,7 @@ import COLORS from '@/styles/colors'; import Icon from '../Icon'; export const NavColumnContainer = styled.div` - width: 289px; + min-width: 289px; height: 100vh; background: #f7f6f3; position: fixed; @@ -46,13 +46,14 @@ export const NavColumnHeader = styled.div` display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; - padding: 24px 16px; + padding: 24px 16px 12px; z-index: 1001; `; export const NavLinksContainer = styled.div` display: flex; flex-direction: column; + gap: 4px; `; export const LoginButtonsContainer = styled.div` @@ -68,10 +69,11 @@ export const LoginButton = styled(Link)` align-items: center; border-radius: 20px; border: 1px solid ${COLORS.shrub}; - background-color: #f7f6f3; + background-color: inherit; padding: 12px 0px 12px 0px; color: ${COLORS.shrub}; text-decoration: none; + font-size: 0.875rem; `; export const SignUpButton = styled(Link)` @@ -84,13 +86,14 @@ export const SignUpButton = styled(Link)` padding: 12px 0px 12px 0px; color: #ffffff; text-decoration: none; + font-size: 0.875rem; `; export const ProfileDisplayContainer = styled.div` display: flex; flex-direction: column; gap: 20px; - margin: 0px 24px 24px 24px; + margin: 0px 24px 3rem 24px; `; export const Profile = styled.div` @@ -114,8 +117,9 @@ export const SignOutButton = styled.button` border-radius: 20px; border: 1px solid ${COLORS.error}; background-color: #f7f6f3; - padding: 4px 0px 4px 0px; + padding: 12px 0px; color: ${COLORS.error}; text-decoration: none; cursor: pointer; + font-size: 0.875rem; `; diff --git a/components/NavColumnItem/index.tsx b/components/NavColumnItem/index.tsx index ad1472e..20f1562 100644 --- a/components/NavColumnItem/index.tsx +++ b/components/NavColumnItem/index.tsx @@ -5,6 +5,7 @@ import { NavColumnItemContainer, NavColumnItemOuterContainer, SelectedIndicator, + StyledIcon, StyledLink, } from './styles'; @@ -24,10 +25,10 @@ export default function NavColumnItem({ onClose, }: NavColumnItemProps) { return ( - + {isSelected && } - - + + {name} diff --git a/components/NavColumnItem/styles.ts b/components/NavColumnItem/styles.ts index 10c331d..15484ac 100644 --- a/components/NavColumnItem/styles.ts +++ b/components/NavColumnItem/styles.ts @@ -1,24 +1,30 @@ import Link from 'next/link'; import styled from 'styled-components'; import COLORS from '@/styles/colors'; +import Icon from '../Icon'; -export const NavColumnItemOuterContainer = styled.div` - display: flex; - flex-direction: row; -`; - -export const NavColumnItemContainer = styled.div<{ isSelected: boolean }>` +export const NavColumnItemOuterContainer = styled.div<{ isSelected: boolean }>` display: flex; flex-direction: row; align-items: center; - padding: ${props => (props.isSelected ? '24px 24px 24px 20px' : '24px')}; - gap: 16px; + padding: ${props => + props.isSelected ? '12px 12px 12px 0px' : '12px 12px 12px 0px'}; background-color: ${props => props.isSelected ? 'rgba(148, 181, 6, 0.1)' : '#f7f6f3'}; // this is COLORS.shrub with 10% opacity border-radius: ${props => (props.isSelected ? '0px 50px 50px 0px' : 'none')}; - width: 100%; + position: relative; + z-index: 1; + margin-right: 8px; +`; + +export const NavColumnItemContainer = styled.div` + display: flex; + flex-direction: row; + gap: 16px; + align-items: center; + margin-left: 24px; `; export const StyledLink = styled(Link)` @@ -36,9 +42,17 @@ export const StyledLink = styled(Link)` export const SelectedIndicator = styled.div` background-color: ${COLORS.shrub}; - border: 1px solid ${COLORS.shrub}; border-radius: 0px 50px 50px 0px; height: 100%; - min-height: 72px; + min-height: 44px; min-width: 4px; + position: absolute; + top: 0; + left: 0; + z-index: 2; //places SelectedIndicator on top of NavColumnItemOuterContainer +`; + +export const StyledIcon = styled(Icon)` + min-height: 25px; + min-width: 25px; `; From 8f301015df24f5972375170ea52f5a2bc9c9b3fb Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 23 Nov 2024 22:17:40 -0800 Subject: [PATCH 08/21] added checks for onboarding status --- components/Header/index.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/components/Header/index.tsx b/components/Header/index.tsx index eecca17..48cafa6 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -1,6 +1,8 @@ import React from 'react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; +import CONFIG from '@/lib/configs'; +import { useProfile } from '@/utils/ProfileProvider'; import Icon from '../Icon'; import { Container, HamburgerButton } from './styles'; @@ -11,6 +13,7 @@ interface HeaderProps { export default function Header({ toggleNavColumn, isLoggedIn }: HeaderProps) { const currentPath = usePathname(); + const { profileReady } = useProfile(); const onNavColumnClick = () => { toggleNavColumn(); @@ -28,11 +31,17 @@ export default function Header({ toggleNavColumn, isLoggedIn }: HeaderProps) { - {/* still need to check if onboarding completed or not, after ProfileContext merged*/} {isLoggedIn ? ( - + profileReady ? ( + // display profile icon if user is logged in and onboarded + + ) : ( + // display onboarding link if user is logged in but not onboarded + Complete Onboarding + ) ) : ( - Login/Sign Up + // display login link if user is not logged in + Login/Sign Up )} ); From c8a2dbd2b34bc79709292583b7cf62c28e2927dc Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 23 Nov 2024 22:19:34 -0800 Subject: [PATCH 09/21] fix lint error --- components/NavColumnItem/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/NavColumnItem/index.tsx b/components/NavColumnItem/index.tsx index 20f1562..d49b252 100644 --- a/components/NavColumnItem/index.tsx +++ b/components/NavColumnItem/index.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { IconType } from '@/lib/icons'; -import Icon from '../Icon'; import { NavColumnItemContainer, NavColumnItemOuterContainer, From 560ec30937f3e30491ec5c09c31f2001735aa931 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sun, 24 Nov 2024 17:16:27 -0800 Subject: [PATCH 10/21] add profileData to NavColumn --- components/Header/index.tsx | 5 +++-- components/NavColumn/index.tsx | 9 ++++++--- components/NavColumn/styles.ts | 5 +++++ 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 48cafa6..70f0850 100644 --- 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) { {isLoggedIn ? ( - profileReady ? ( + profileReady && profileData !== null ? ( // display profile icon if user is logged in and onboarded + // this should route to /my-account in the future ) : ( // display onboarding link if user is logged in but not onboarded diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx index ea90da3..a67da6e 100644 --- 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 ? ( - +

- Name + Your Account

- Type of Garden + {profileData?.user_type}

diff --git a/components/NavColumn/styles.ts b/components/NavColumn/styles.ts index 53063fb..9d1b5cf 100644 --- 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; +`; From 4035e4eae57499dedc9b47a41c08383aacf7c353 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Tue, 3 Dec 2024 10:43:30 -0800 Subject: [PATCH 11/21] destructure styled props and iterating on feedback --- components/NavColumn/index.tsx | 8 +++++--- components/NavColumn/styles.ts | 14 +++++++------- components/NavColumnItem/index.tsx | 8 ++++---- components/NavColumnItem/styles.ts | 15 +++++++-------- utils/helpers.ts | 11 +++++++++++ 5 files changed, 34 insertions(+), 22 deletions(-) diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx index a67da6e..23e3aaf 100644 --- a/components/NavColumn/index.tsx +++ b/components/NavColumn/index.tsx @@ -5,7 +5,9 @@ import CONFIG from '@/lib/configs'; import { IconType } from '@/lib/icons'; import COLORS from '@/styles/colors'; import { H3, H4 } from '@/styles/text'; +import { UserTypeEnum } from '@/types/schema'; import { useAuth } from '@/utils/AuthProvider'; +import { getUserType } from '@/utils/helpers'; import { useProfile } from '@/utils/ProfileProvider'; import Icon from '../Icon'; import NavColumnItem from '../NavColumnItem'; @@ -67,7 +69,7 @@ export default function NavColumn({ <> {isOpen && ( <> - +
@@ -85,7 +87,7 @@ export default function NavColumn({ {navLinks.map((link: NavLink, key) => (

- {profileData?.user_type} + {getUserType(profileData?.user_type as UserTypeEnum)}

diff --git a/components/NavColumn/styles.ts b/components/NavColumn/styles.ts index 9d1b5cf..1eeb65e 100644 --- a/components/NavColumn/styles.ts +++ b/components/NavColumn/styles.ts @@ -6,7 +6,7 @@ import Icon from '../Icon'; export const NavColumnContainer = styled.div` min-width: 289px; height: 100vh; - background: #f7f6f3; + background: ${COLORS.glimpse}; position: fixed; z-index: 1000; top: 0; @@ -18,7 +18,7 @@ export const NavColumnContainer = styled.div` justify-content: space-between; `; -export const Overlay = styled.div<{ isOpen: boolean }>` +export const Overlay = styled.div<{ $isOpen: boolean }>` position: fixed; top: 0; left: 0; @@ -26,7 +26,7 @@ export const Overlay = styled.div<{ isOpen: boolean }>` height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 999; - display: ${props => (props.isOpen ? 'block' : 'none')}; + display: ${({ $isOpen }) => ($isOpen ? 'block' : 'none')}; `; export const HamburgerButton = styled.button` @@ -84,7 +84,7 @@ export const SignUpButton = styled(Link)` border: none; background-color: ${COLORS.shrub}; padding: 12px 0px 12px 0px; - color: #ffffff; + color: ${COLORS.glimpse}; text-decoration: none; font-size: 0.875rem; `; @@ -115,10 +115,10 @@ export const SignOutButton = styled.button` justify-content: center; align-items: center; border-radius: 20px; - border: 1px solid ${COLORS.error}; - background-color: #f7f6f3; + border: 1px solid ${COLORS.errorRed}; + background-color: ${COLORS.glimpse}; padding: 12px 0px; - color: ${COLORS.error}; + color: ${COLORS.errorRed}; text-decoration: none; cursor: pointer; font-size: 0.875rem; diff --git a/components/NavColumnItem/index.tsx b/components/NavColumnItem/index.tsx index d49b252..632f92c 100644 --- a/components/NavColumnItem/index.tsx +++ b/components/NavColumnItem/index.tsx @@ -9,7 +9,7 @@ import { } from './styles'; interface NavColumnItemProps { - name: string; + routeName: string; path: string; icon: IconType; isSelected: boolean; @@ -17,19 +17,19 @@ interface NavColumnItemProps { } export default function NavColumnItem({ - name, + routeName, path, icon, isSelected, onClose, }: NavColumnItemProps) { return ( - + {isSelected && } - {name} + {routeName} diff --git a/components/NavColumnItem/styles.ts b/components/NavColumnItem/styles.ts index 15484ac..76d2b3a 100644 --- a/components/NavColumnItem/styles.ts +++ b/components/NavColumnItem/styles.ts @@ -3,17 +3,16 @@ import styled from 'styled-components'; import COLORS from '@/styles/colors'; import Icon from '../Icon'; -export const NavColumnItemOuterContainer = styled.div<{ isSelected: boolean }>` +export const NavColumnItemOuterContainer = styled.div<{ $isSelected: boolean }>` display: flex; flex-direction: row; align-items: center; - padding: ${props => - props.isSelected ? '12px 12px 12px 0px' : '12px 12px 12px 0px'}; - background-color: ${props => - props.isSelected - ? 'rgba(148, 181, 6, 0.1)' - : '#f7f6f3'}; // this is COLORS.shrub with 10% opacity - border-radius: ${props => (props.isSelected ? '0px 50px 50px 0px' : 'none')}; + padding: ${({ $isSelected }) => + $isSelected ? '12px 12px 12px 0px' : '12px 12px 12px 0px'}; + background-color: ${({ $isSelected }) => + $isSelected ? COLORS.sproutLight : COLORS.glimpse}; + border-radius: ${({ $isSelected }) => + $isSelected ? '0px 50px 50px 0px' : 'none'}; position: relative; z-index: 1; margin-right: 8px; diff --git a/utils/helpers.ts b/utils/helpers.ts index f4270c8..de5ce1b 100644 --- a/utils/helpers.ts +++ b/utils/helpers.ts @@ -4,6 +4,7 @@ import { PlantingTypeEnum, SeasonEnum, SunlightEnum, + UserTypeEnum, } from '@/types/schema'; export function getCurrentTimestamp(): string { @@ -320,3 +321,13 @@ export function fillCalendarGridArrayRowWithColor( return gridArray; } +// return UserTypeEnum based on user type passed in +export function getUserType(userType: UserTypeEnum) { + const userTypes: Record = { + INDIV: 'Individual Garden', + SCHOOL: 'School Garden', + ORG: 'Community Garden', + }; + + return userTypes[userType]; +} From aabaf6259cc2e8be50af6d5c3a1d9a40e3f2aa7a Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 15:35:08 -0800 Subject: [PATCH 12/21] add home to config and add go to onboarding button --- components/Header/index.tsx | 2 +- components/NavColumn/index.tsx | 19 +++++++++++++++---- components/NavColumn/styles.ts | 20 +++++++++++++++++--- lib/configs.ts | 2 +- 4 files changed, 34 insertions(+), 9 deletions(-) diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 70f0850..8f67c7f 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -28,7 +28,7 @@ export default function Header({ toggleNavColumn, isLoggedIn }: HeaderProps) { - + {isLoggedIn ? ( diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx index 23e3aaf..48f0d3c 100644 --- a/components/NavColumn/index.tsx +++ b/components/NavColumn/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import Link from 'next/link'; import { usePathname, useRouter } from 'next/navigation'; import CONFIG from '@/lib/configs'; @@ -20,6 +20,7 @@ import { NavColumnContainer, NavColumnHeader, NavLinksContainer, + OnboardingButton, Overlay, Profile, ProfileDisplayContainer, @@ -57,7 +58,7 @@ export default function NavColumn({ const currentPath = usePathname(); const { signOut } = useAuth(); const router = useRouter(); - const { profileData } = useProfile(); + const { profileData, profileReady } = useProfile(); const handleSignOut = () => { router.push(CONFIG.login); @@ -65,6 +66,10 @@ export default function NavColumn({ signOut(); }; + useEffect(() => { + console.log('profileData', profileData); + }, [profileData]); + return ( <> {isOpen && ( @@ -76,7 +81,7 @@ export default function NavColumn({
{/* empty whitespace for positioning logo and hamburger */}
- + @@ -96,7 +101,13 @@ export default function NavColumn({ ))}
- {isLoggedIn ? ( + {!profileReady ? ( +
Loading...
+ ) : isLoggedIn && profileReady && !profileData ? ( + + Go to Onboarding + + ) : isLoggedIn ? ( diff --git a/components/NavColumn/styles.ts b/components/NavColumn/styles.ts index 1eeb65e..a726746 100644 --- a/components/NavColumn/styles.ts +++ b/components/NavColumn/styles.ts @@ -14,7 +14,7 @@ export const NavColumnContainer = styled.div` display: flex; flex-direction: column; transition: transform 1s ease-in-out; - padding-bottom: 3rem; + padding-bottom: 48px; justify-content: space-between; `; @@ -60,7 +60,7 @@ export const LoginButtonsContainer = styled.div` display: grid; grid-template-columns: 1fr 1fr; gap: 8px; - margin: 0 16px 3rem 16px; + margin: 0 16px 48px 16px; `; export const LoginButton = styled(Link)` @@ -89,11 +89,25 @@ export const SignUpButton = styled(Link)` font-size: 0.875rem; `; +export const OnboardingButton = styled(Link)` + display: flex; + justify-content: center; + align-items: center; + border-radius: 20px; + border: none; + background-color: ${COLORS.shrub}; + padding: 12px 0px 12px 0px; + color: ${COLORS.glimpse}; + text-decoration: none; + font-size: 0.875rem; + margin: 0 16px 48px 16px; +`; + export const ProfileDisplayContainer = styled.div` display: flex; flex-direction: column; gap: 20px; - margin: 0px 24px 3rem 24px; + margin: 0px 24px 48px 24px; `; export const Profile = styled.div` diff --git a/lib/configs.ts b/lib/configs.ts index 31c931c..9702185 100644 --- a/lib/configs.ts +++ b/lib/configs.ts @@ -1,5 +1,5 @@ const CONFIG = { - homepage: '/', + home: '/', login: '/login', signup: '/signup', onboarding: '/onboarding', From 314d8f9ea4dd46b3a15db0eae4016c39751cfcef Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 15:46:12 -0800 Subject: [PATCH 13/21] rename formatusertype --- components/NavColumn/index.tsx | 4 ++-- utils/helpers.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx index 48f0d3c..32b843f 100644 --- a/components/NavColumn/index.tsx +++ b/components/NavColumn/index.tsx @@ -7,7 +7,7 @@ import COLORS from '@/styles/colors'; import { H3, H4 } from '@/styles/text'; import { UserTypeEnum } from '@/types/schema'; import { useAuth } from '@/utils/AuthProvider'; -import { getUserType } from '@/utils/helpers'; +import { formatUserType } from '@/utils/helpers'; import { useProfile } from '@/utils/ProfileProvider'; import Icon from '../Icon'; import NavColumnItem from '../NavColumnItem'; @@ -116,7 +116,7 @@ export default function NavColumn({ Your Account

- {getUserType(profileData?.user_type as UserTypeEnum)} + {formatUserType(profileData?.user_type as UserTypeEnum)}

diff --git a/utils/helpers.ts b/utils/helpers.ts index de5ce1b..c8a0994 100644 --- a/utils/helpers.ts +++ b/utils/helpers.ts @@ -322,7 +322,7 @@ export function fillCalendarGridArrayRowWithColor( return gridArray; } // return UserTypeEnum based on user type passed in -export function getUserType(userType: UserTypeEnum) { +export function formatUserType(userType: UserTypeEnum) { const userTypes: Record = { INDIV: 'Individual Garden', SCHOOL: 'School Garden', From 5857e04fa8a99547214eb91b3a49fcb453afe966 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 16:03:47 -0800 Subject: [PATCH 14/21] 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 ( <> -
+
setIsNavColumnOpen(false)} - isLoggedIn={userId !== null} /> ); From 0d59cb8f71e5e1b70bc46453a9303d6ed2463dac Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 16:16:19 -0800 Subject: [PATCH 15/21] fix lint error --- components/Header/index.tsx | 6 +++++- components/NavSystem.tsx | 1 - 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 267a214..6df37b1 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import CONFIG from '@/lib/configs'; +import { Flex } from '@/styles/containers'; import { useAuth } from '@/utils/AuthProvider'; import { useProfile } from '@/utils/ProfileProvider'; import Icon from '../Icon'; @@ -48,7 +49,10 @@ export default function Header({ toggleNavColumn }: HeaderProps) { ) ) : ( // display login link if user is not logged in - Login/Sign Up + + Login + Sign Up + )} ); diff --git a/components/NavSystem.tsx b/components/NavSystem.tsx index 071fff6..293c647 100644 --- a/components/NavSystem.tsx +++ b/components/NavSystem.tsx @@ -7,7 +7,6 @@ import NavColumn from './NavColumn'; export default function NavSystem() { const [isNavColumnOpen, setIsNavColumnOpen] = useState(false); - const { userId } = useAuth(); const toggleNavColumn = () => { setIsNavColumnOpen(!isNavColumnOpen); From a456ad870d277969e39627372e6d122cb53d0a85 Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran Date: Sat, 7 Dec 2024 16:21:06 -0800 Subject: [PATCH 16/21] lint error --- components/NavSystem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/NavSystem.tsx b/components/NavSystem.tsx index 293c647..219aa22 100644 --- a/components/NavSystem.tsx +++ b/components/NavSystem.tsx @@ -1,7 +1,6 @@ 'use client'; import { useState } from 'react'; -import { useAuth } from '@/utils/AuthProvider'; import Header from './Header'; import NavColumn from './NavColumn'; From 1da3ba669f6fe9a7d0eea1c2af40fa6cbfbb7aa0 Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sat, 7 Dec 2024 21:55:22 -0800 Subject: [PATCH 17/21] organize AuthOrProfileButtons in NavColumn --- components/NavColumn/index.tsx | 99 ++++++++++++++++++++-------------- components/NavColumn/styles.ts | 9 ++-- 2 files changed, 63 insertions(+), 45 deletions(-) diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx index 4e94aad..1303833 100644 --- a/components/NavColumn/index.tsx +++ b/components/NavColumn/index.tsx @@ -1,10 +1,11 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import Link from 'next/link'; import { usePathname, useRouter } from 'next/navigation'; import CONFIG from '@/lib/configs'; import { IconType } from '@/lib/icons'; import COLORS from '@/styles/colors'; -import { H3, H4 } from '@/styles/text'; +import { Flex } from '@/styles/containers'; +import { H4, P3 } from '@/styles/text'; import { UserTypeEnum } from '@/types/schema'; import { useAuth } from '@/utils/AuthProvider'; import { formatUserType } from '@/utils/helpers'; @@ -51,14 +52,9 @@ const navLinks: NavLink[] = [ export default function NavColumn({ isOpen, onClose }: NavColumnProps) { const currentPath = usePathname(); - const { signOut, userId } = useAuth(); + const { signOut, userId, loading: authLoading } = 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,6 +62,53 @@ export default function NavColumn({ isOpen, onClose }: NavColumnProps) { signOut(); }; + const AuthOrProfileButtons = () => { + const authAndProfileReady = profileReady && !authLoading; + if (!authAndProfileReady) { + return
Loading...
; + } + + // Logged in Users + if (userId) { + // Logged in, not onboarded -> Go To Onboarding button + // Logged in, Onboarded -> Show My Account Info + return ( + + {!profileData ? ( + + Go to Onboarding + + ) : ( + + + +

+ Your Account +

+ + {formatUserType(profileData?.user_type as UserTypeEnum)} + + + + )} + Sign Out + + ); + } + + // Not logged -> Go to Auth Pages + return ( + + + Log In + + + Sign Up + + + ); + }; + return ( <> {isOpen && ( @@ -97,37 +140,15 @@ export default function NavColumn({ isOpen, onClose }: NavColumnProps) { ))} - {!profileReady ? ( -
Loading...
- ) : isLoggedIn && profileReady && !profileData ? ( - - Go to Onboarding - - ) : isLoggedIn ? ( - - - - -

- Your Account -

-

- {formatUserType(profileData?.user_type as UserTypeEnum)} -

- - - Sign Out - - ) : ( - - - Log In - - - Sign Up - - - )} + + + )} diff --git a/components/NavColumn/styles.ts b/components/NavColumn/styles.ts index a726746..8d15b9d 100644 --- a/components/NavColumn/styles.ts +++ b/components/NavColumn/styles.ts @@ -13,8 +13,8 @@ export const NavColumnContainer = styled.div` left: 0; display: flex; flex-direction: column; - transition: transform 1s ease-in-out; - padding-bottom: 48px; + transition: transform 5s ease-in-out; + /* padding-bottom: 52px; */ justify-content: space-between; `; @@ -60,7 +60,6 @@ export const LoginButtonsContainer = styled.div` display: grid; grid-template-columns: 1fr 1fr; gap: 8px; - margin: 0 16px 48px 16px; `; export const LoginButton = styled(Link)` @@ -96,18 +95,16 @@ export const OnboardingButton = styled(Link)` border-radius: 20px; border: none; background-color: ${COLORS.shrub}; - padding: 12px 0px 12px 0px; color: ${COLORS.glimpse}; text-decoration: none; font-size: 0.875rem; - margin: 0 16px 48px 16px; + height: 40px; `; export const ProfileDisplayContainer = styled.div` display: flex; flex-direction: column; gap: 20px; - margin: 0px 24px 48px 24px; `; export const Profile = styled.div` From 7be85128cdbcfe1ba20e16d2f923a242b1e73429 Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sat, 7 Dec 2024 22:10:06 -0800 Subject: [PATCH 18/21] fix sproutLight color --- components/NavColumn/index.tsx | 2 +- components/NavColumnItem/styles.ts | 3 +-- styles/colors.ts | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx index 1303833..3e1644f 100644 --- a/components/NavColumn/index.tsx +++ b/components/NavColumn/index.tsx @@ -86,7 +86,7 @@ export default function NavColumn({ isOpen, onClose }: NavColumnProps) { Your Account - {formatUserType(profileData?.user_type as UserTypeEnum)} + {formatUserType(profileData.user_type as UserTypeEnum)} diff --git a/components/NavColumnItem/styles.ts b/components/NavColumnItem/styles.ts index 76d2b3a..df48401 100644 --- a/components/NavColumnItem/styles.ts +++ b/components/NavColumnItem/styles.ts @@ -7,8 +7,7 @@ export const NavColumnItemOuterContainer = styled.div<{ $isSelected: boolean }>` display: flex; flex-direction: row; align-items: center; - padding: ${({ $isSelected }) => - $isSelected ? '12px 12px 12px 0px' : '12px 12px 12px 0px'}; + padding: 12px 12px 12px 0px; background-color: ${({ $isSelected }) => $isSelected ? COLORS.sproutLight : COLORS.glimpse}; border-radius: ${({ $isSelected }) => diff --git a/styles/colors.ts b/styles/colors.ts index c4b37eb..08e23d6 100644 --- a/styles/colors.ts +++ b/styles/colors.ts @@ -5,7 +5,7 @@ const COLORS = { // greens shrub: '#1F5A2A', sprout: '#94B506', - sproutLight: '#F4F8E6', + sproutLight: 'rgba(148, 181, 6, 0.1)', // 10% transparent // grey black: '#222222', From c90bedea45c671d39892614044005a0a942e088e Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sat, 7 Dec 2024 22:22:01 -0800 Subject: [PATCH 19/21] refactor icon logic in Header --- components/Header/index.tsx | 55 ++++++++++++++++++------------------- components/Header/styles.ts | 1 + 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 6df37b1..57b9073 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -1,6 +1,5 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import Link from 'next/link'; -import { usePathname } from 'next/navigation'; import CONFIG from '@/lib/configs'; import { Flex } from '@/styles/containers'; import { useAuth } from '@/utils/AuthProvider'; @@ -13,22 +12,37 @@ interface 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 { userId, loading: authLoading } = useAuth(); const onNavColumnClick = () => { toggleNavColumn(); }; - if (currentPath === '/onboarding') { - return null; - } + const AuthOrProfileButtons = () => { + // If not (both profile and auth ready) + if (authLoading || !profileReady) return
; + + // Logged-in user + if (userId) { + // Logged in AND onboarded + // TODO: this should route to /my-account in the future + if (profileData) { + return ; + } + + // Not onboarded + return Complete Onboarding; + } + + // Not logged-in user + return ( + + Login + Sign Up + + ); + }; return ( @@ -38,22 +52,7 @@ export default function Header({ toggleNavColumn }: HeaderProps) { - {isLoggedIn ? ( - profileReady && profileData !== null ? ( - // display profile icon if user is logged in and onboarded - // this should route to /my-account in the future - - ) : ( - // display onboarding link if user is logged in but not onboarded - Complete Onboarding - ) - ) : ( - // display login link if user is not logged in - - Login - Sign Up - - )} + ); } diff --git a/components/Header/styles.ts b/components/Header/styles.ts index c15036a..28a9097 100644 --- a/components/Header/styles.ts +++ b/components/Header/styles.ts @@ -6,6 +6,7 @@ export const Container = styled.div` align-items: center; padding: 20px 24px 12px; z-index: 500; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); `; export const HamburgerButton = styled.button` From 4207588f9822a8ee9c7bb5bb03f975c858f75ec8 Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sat, 7 Dec 2024 22:47:18 -0800 Subject: [PATCH 20/21] await signOut --- components/NavColumn/index.tsx | 6 +++--- components/NavColumn/styles.ts | 3 +-- lib/configs.ts | 2 ++ 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx index 3e1644f..3025925 100644 --- a/components/NavColumn/index.tsx +++ b/components/NavColumn/index.tsx @@ -56,10 +56,10 @@ export default function NavColumn({ isOpen, onClose }: NavColumnProps) { const router = useRouter(); const { profileData, profileReady } = useProfile(); - const handleSignOut = () => { - router.push(CONFIG.login); + const handleSignOut = async () => { + await signOut(); onClose(); - signOut(); + router.push(CONFIG.login); }; const AuthOrProfileButtons = () => { diff --git a/components/NavColumn/styles.ts b/components/NavColumn/styles.ts index 8d15b9d..df508fa 100644 --- a/components/NavColumn/styles.ts +++ b/components/NavColumn/styles.ts @@ -13,8 +13,7 @@ export const NavColumnContainer = styled.div` left: 0; display: flex; flex-direction: column; - transition: transform 5s ease-in-out; - /* padding-bottom: 52px; */ + transition: transform 1s ease-in-out; justify-content: space-between; `; diff --git a/lib/configs.ts b/lib/configs.ts index 9702185..ab0aba0 100644 --- a/lib/configs.ts +++ b/lib/configs.ts @@ -5,6 +5,8 @@ const CONFIG = { onboarding: '/onboarding', myAccount: '/my-account', viewPlants: '/view-plants', + userPlant: '/plant-page/all-plants', + generalPlant: '/plant-page/my-garden', plantingTimeline: '/seasonal-planting-guide', }; From c4b37205d57597ba157ffd1aa466cf526696baed Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sat, 7 Dec 2024 22:59:49 -0800 Subject: [PATCH 21/21] make NavColumnItem more clickable --- components/NavColumnItem/index.tsx | 20 +++++++++++--------- components/NavColumnItem/styles.ts | 6 ++---- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/components/NavColumnItem/index.tsx b/components/NavColumnItem/index.tsx index 632f92c..ec44cfb 100644 --- a/components/NavColumnItem/index.tsx +++ b/components/NavColumnItem/index.tsx @@ -1,5 +1,7 @@ import React from 'react'; import { IconType } from '@/lib/icons'; +import COLORS from '@/styles/colors'; +import { P2 } from '@/styles/text'; import { NavColumnItemContainer, NavColumnItemOuterContainer, @@ -24,14 +26,14 @@ export default function NavColumnItem({ onClose, }: NavColumnItemProps) { return ( - - {isSelected && } - - - - {routeName} - - - + + + {isSelected && } + + + {routeName} + + + ); } diff --git a/components/NavColumnItem/styles.ts b/components/NavColumnItem/styles.ts index df48401..e3af047 100644 --- a/components/NavColumnItem/styles.ts +++ b/components/NavColumnItem/styles.ts @@ -9,9 +9,8 @@ export const NavColumnItemOuterContainer = styled.div<{ $isSelected: boolean }>` align-items: center; padding: 12px 12px 12px 0px; background-color: ${({ $isSelected }) => - $isSelected ? COLORS.sproutLight : COLORS.glimpse}; - border-radius: ${({ $isSelected }) => - $isSelected ? '0px 50px 50px 0px' : 'none'}; + $isSelected ? COLORS.sproutLight : 'transparent'}; + border-radius: 0px 50px 50px 0px; position: relative; z-index: 1; margin-right: 8px; @@ -27,7 +26,6 @@ export const NavColumnItemContainer = styled.div` export const StyledLink = styled(Link)` text-decoration: none; - color: ${COLORS.shrub}; &:hover { text-decoration: none; }