From de3db56e7bb27f4fc87fa50242574c0a7e0ec081 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Wed, 30 Aug 2023 02:31:31 +0800
Subject: [PATCH] Extract user avatar in navbar into its own component

---
 components/navbar.tsx | 109 ++++++++++++++++++++++--------------------
 1 file changed, 57 insertions(+), 52 deletions(-)

diff --git a/components/navbar.tsx b/components/navbar.tsx
index 9aee2c0..991d75e 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -40,23 +40,11 @@ export const Navbar = ({
 	categories: BookmarkCategory[]
 }) => {
 	const pathname = usePathname()
-	const router = useRouter()
 
 	if (pathname.startsWith('/login') || pathname.startsWith('/signup')) {
 		return <></>
 	}
 
-	const logout = async () => {
-		const response = await fetch('/api/auth/logout', {
-			method: 'POST',
-		})
-		router.refresh()
-	}
-
-	const login = () => {
-		router.push('/login')
-	}
-
 	return (
 		<NextUINavbar
 			maxWidth='xl'
@@ -113,46 +101,7 @@ export const Navbar = ({
 					</Link>
 					<ThemeSwitch className='hidden min-[330px]:flex' />
 					<div className='ml-2 flex items-center gap-4 min-[330px]:ml-4'>
-						<Dropdown placement='bottom-end'>
-							<DropdownTrigger>
-								<Avatar
-									isBordered
-									as='button'
-									className='transition-transform'
-									icon={<AvatarIcon />}
-								/>
-							</DropdownTrigger>
-							<DropdownMenu
-								aria-label='Profile Actions'
-								variant='flat'>
-								<DropdownItem
-									key='profile'
-									className='h-14 gap-2'>
-									<p className='font-semibold'>
-										Signed in as
-									</p>
-									<p className='font-semibold text-primary'>
-										{user ? user.email : 'Guest'}
-									</p>
-								</DropdownItem>
-								{user ? (
-									<DropdownItem
-										key='logout'
-										color='danger'
-										className='text-danger'
-										onPress={() => logout()}>
-										Log Out
-									</DropdownItem>
-								) : (
-									<DropdownItem
-										key='login'
-										color='primary'
-										onPress={() => login()}>
-										Login
-									</DropdownItem>
-								)}
-							</DropdownMenu>
-						</Dropdown>
+						<UserAvatar user={user} />
 					</div>
 				</NavbarItem>
 			</NavbarContent>
@@ -181,3 +130,59 @@ export const Navbar = ({
 		</NextUINavbar>
 	)
 }
+
+function UserAvatar({ user }: { user: User | null }) {
+	const router = useRouter()
+
+	const logout = async () => {
+		const response = await fetch('/api/auth/logout', {
+			method: 'POST',
+		})
+		router.refresh()
+	}
+
+	const login = () => {
+		router.push('/login')
+	}
+
+	return (
+		<Dropdown placement='bottom-end'>
+			<DropdownTrigger>
+				<Avatar
+					isBordered
+					as='button'
+					className='transition-transform'
+					icon={<AvatarIcon />}
+				/>
+			</DropdownTrigger>
+			<DropdownMenu
+				aria-label='Profile Actions'
+				variant='flat'>
+				<DropdownItem
+					key='profile'
+					className='h-14 gap-2'>
+					<p className='font-semibold'>Signed in as</p>
+					<p className='font-semibold text-primary'>
+						{user ? user.email : 'Guest'}
+					</p>
+				</DropdownItem>
+				{user ? (
+					<DropdownItem
+						key='logout'
+						color='danger'
+						className='text-danger'
+						onPress={() => logout()}>
+						Log Out
+					</DropdownItem>
+				) : (
+					<DropdownItem
+						key='login'
+						color='primary'
+						onPress={() => login()}>
+						Login
+					</DropdownItem>
+				)}
+			</DropdownMenu>
+		</Dropdown>
+	)
+}