Display user state on navbar

master
TZGyn 2 years ago
parent 781ef82c47
commit 568d896da0
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A

@ -6,6 +6,9 @@ import { Providers } from './providers'
import { Navbar } from '@/components/navbar' import { Navbar } from '@/components/navbar'
import { Link } from '@nextui-org/link' import { Link } from '@nextui-org/link'
import clsx from 'clsx' import clsx from 'clsx'
import { userSchema } from '@/types'
import { cookies } from 'next/headers'
import { getUser } from '@/lib/auth'
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
@ -24,11 +27,19 @@ export const metadata: Metadata = {
}, },
} }
export default function RootLayout({ export default async function RootLayout({
children, children,
}: { }: {
children: React.ReactNode children: React.ReactNode
}) { }) {
const token = cookies().get('token')
const userData = await getUser(token)
let user = null
if (userData) {
user = userSchema.parse(userData)
}
return ( return (
<html <html
lang='en' lang='en'
@ -42,7 +53,7 @@ export default function RootLayout({
<Providers <Providers
themeProps={{ attribute: 'class', defaultTheme: 'dark' }}> themeProps={{ attribute: 'class', defaultTheme: 'dark' }}>
<div className='relative flex h-screen flex-col'> <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'> <main className='container mx-auto max-w-7xl flex-grow px-6 pt-16'>
{children} {children}
</main> </main>

@ -15,9 +15,8 @@ import {
DropdownItem, DropdownItem,
DropdownTrigger, DropdownTrigger,
} from '@nextui-org/dropdown' } 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 { Link } from '@nextui-org/link'
import { Input } from '@nextui-org/input'
import { link as linkStyles } from '@nextui-org/theme' import { link as linkStyles } from '@nextui-org/theme'
@ -30,11 +29,23 @@ import { GithubIcon } from '@/components/icons'
import { Icon } from '@iconify/react' import { Icon } from '@iconify/react'
import NewBookmarkForm from '@/components/newBookmarkForm' import NewBookmarkForm from '@/components/newBookmarkForm'
import { usePathname } from 'next/navigation' import { usePathname, useRouter } from 'next/navigation'
import { User } from '@/types'
export const Navbar = () => {
export const Navbar = ({ user }: { user: User | null }) => {
const pathname = usePathname() 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 ( return (
<NextUINavbar <NextUINavbar
@ -110,12 +121,13 @@ export const Navbar = () => {
Signed in as Signed in as
</p> </p>
<p className='font-semibold text-primary'> <p className='font-semibold text-primary'>
Guest {user ? user.email : 'Guest'}
</p> </p>
</DropdownItem> </DropdownItem>
<DropdownItem <DropdownItem
key='logout' key='logout'
color='danger'> color='danger'
onPress={() => logout()}>
Log Out Log Out
</DropdownItem> </DropdownItem>
</DropdownMenu> </DropdownMenu>

@ -41,3 +41,10 @@ export const bookmarkCategoryWithBookmarksSchema = z.object({
export type BookmarkCategoryWithBookmarks = z.infer< export type BookmarkCategoryWithBookmarks = z.infer<
typeof bookmarkCategoryWithBookmarksSchema typeof bookmarkCategoryWithBookmarksSchema
> >
export const userSchema = z.object({
email: z.string().email(),
name: z.string(),
})
export type User = z.infer<typeof userSchema>

Loading…
Cancel
Save