legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update admin navbar to display staff profile information and refactor loader data

Browse Source
This commit is contained in:
Ardeman 2025-03-03 19:10:50 +08:00
parent 8f5f1bc552
commit 5f5a0dff31
2 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/layouts/admin/navbar.tsx
View File

@ -1,13 +1,14 @@
import { Button, Popover, PopoverButton, PopoverPanel } from '@headlessui/react' import { Button, Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
import { Link, useFetcher } from 'react-router' import { Link, useFetcher, useRouteLoaderData } from 'react-router'
import { ChevronIcon } from '~/components/icons/chevron' import { ChevronIcon } from '~/components/icons/chevron'
import { NotificationIcon } from '~/components/icons/notification' import { NotificationIcon } from '~/components/icons/notification'
import { APP } from '~/configs/meta' import { APP } from '~/configs/meta'
import { useAdminContext } from '~/contexts/admin' import type { loader } from '~/routes/_admin.lg-admin'
export const Navbar = () => { export const Navbar = () => {
const { adminProfile } = useAdminContext() const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
const staffData = loaderData?.staffData
const fetcher = useFetcher() const fetcher = useFetcher()
return ( return (
@ -26,8 +27,12 @@ export const Navbar = () => {
<Popover className="relative"> <Popover className="relative">
<PopoverButton className="flex w-3xs cursor-pointer items-center justify-between focus:outline-none"> <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between focus:outline-none">
<div className="flex items-center"> <div className="flex items-center">
<div className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4]" /> <img
<span className="text-xs">{adminProfile.name}</span> src={staffData?.profile_picture}
alt={staffData?.name}
className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
/>
<span className="text-xs">{staffData?.name}</span>
</div> </div>
<ChevronIcon className="opacity-50" /> <ChevronIcon className="opacity-50" />
</PopoverButton> </PopoverButton>

6
app/routes/_admin.lg-admin.tsx
View File

@ -12,7 +12,7 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
const { staffToken } = await handleCookie(request) const { staffToken } = await handleCookie(request)
const { pathname } = new URL(request.url) const { pathname } = new URL(request.url)
const isAuthPage = AUTH_PAGES.includes(pathname) const isAuthPage = AUTH_PAGES.includes(pathname)
let adminData let staffData
if (!isAuthPage && !staffToken) { if (!isAuthPage && !staffToken) {
throw redirect('/lg-admin/login') throw redirect('/lg-admin/login')
@ -26,11 +26,11 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
const { data } = await getStaff({ const { data } = await getStaff({
accessToken: staffToken, accessToken: staffToken,
}) })
adminData = data staffData = data
} }
return { return {
adminData, staffData,
} }
} }