From 568d896da041404b5a177a39927b95a8d166818f Mon Sep 17 00:00:00 2001 From: TZGyn Date: Thu, 24 Aug 2023 00:59:13 +0800 Subject: [PATCH] Display user state on navbar --- app/layout.tsx | 15 +++++++++++++-- components/navbar.tsx | 26 +++++++++++++++++++------- types/index.ts | 7 +++++++ 3 files changed, 39 insertions(+), 9 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 36292be..6ad6529 100644 --- 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 (
- +
{children}
diff --git a/components/navbar.tsx b/components/navbar.tsx index 4a8129f..ea659ac 100644 --- 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 ( { Signed in as

- Guest + {user ? user.email : 'Guest'}

+ color='danger' + onPress={() => logout()}> Log Out diff --git a/types/index.ts b/types/index.ts index 6b29742..d276a4d 100644 --- 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