Display user state on navbar

2 years ago · 568d896da0
parent 781ef82c47
commit 568d896da0
3 changed files with 39 additions and 9 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -6,6 +6,9 @@ import { Providers } from './providers'
 import { Navbar } from '@/components/navbar'
 import { Link } from '@nextui-org/link'
 import clsx from 'clsx'
+import { userSchema } from '@/types'
+import { cookies } from 'next/headers'
+import { getUser } from '@/lib/auth'

 export const metadata: Metadata = {
 	title: {
@ -24,11 +27,19 @@ export const metadata: Metadata = {
 	},
 }

-export default function RootLayout({
+export default async function RootLayout({
 	children,
 }: {
 	children: React.ReactNode
 }) {
+	const token = cookies().get('token')
+	const userData = await getUser(token)
+
+	let user = null
+	if (userData) {
+		user = userSchema.parse(userData)
+	}
+
 	return (
 		<html
 			lang='en'
@ -42,7 +53,7 @@ export default function RootLayout({
 				<Providers
 					themeProps={{ attribute: 'class', defaultTheme: 'dark' }}>
 					<div className='relative flex h-screen flex-col'>
-						<Navbar />
+						<Navbar user={user} />
 						<main className='container mx-auto max-w-7xl flex-grow px-6 pt-16'>
 							{children}
 						</main>
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@ -15,9 +15,8 @@ import {
 	DropdownItem,
 	DropdownTrigger,
 } from '@nextui-org/dropdown'
-import { Avatar, AvatarGroup, AvatarIcon } from '@nextui-org/avatar'
+import { Avatar, AvatarIcon } from '@nextui-org/avatar'
 import { Link } from '@nextui-org/link'
-import { Input } from '@nextui-org/input'

 import { link as linkStyles } from '@nextui-org/theme'

@ -30,11 +29,23 @@ import { GithubIcon } from '@/components/icons'

 import { Icon } from '@iconify/react'
 import NewBookmarkForm from '@/components/newBookmarkForm'
-import { usePathname } from 'next/navigation'
-
-export const Navbar = () => {
+import { usePathname, useRouter } from 'next/navigation'
+import { User } from '@/types'

+export const Navbar = ({ user }: { user: User | null }) => {
 	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()
+	}

 	return (
 		<NextUINavbar
@ -110,12 +121,13 @@ export const Navbar = () => {
 										Signed in as
 									</p>
 									<p className='font-semibold text-primary'>
-										Guest
+										{user ? user.email : 'Guest'}
 									</p>
 								</DropdownItem>
 								<DropdownItem
 									key='logout'
-									color='danger'>
+									color='danger'
+									onPress={() => logout()}>
 									Log Out
 								</DropdownItem>
 							</DropdownMenu>
--- a/types/index.ts
+++ b/types/index.ts
@ -41,3 +41,10 @@ export const bookmarkCategoryWithBookmarksSchema = z.object({
 export type BookmarkCategoryWithBookmarks = z.infer<
 	typeof bookmarkCategoryWithBookmarksSchema
 >
+
+export const userSchema = z.object({
+	email: z.string().email(),
+	name: z.string(),
+})
+
+export type User = z.infer<typeof userSchema>