feat: notification page

Author: agmmtoo

app/(protected)/notifications/page.tsx

@@ -16,11 +16,13 @@ import {
 } from '@/components/ui/pagination'
 
 import { Verify } from '@/lib/firebase/firebase'
-import { CheckCircle } from 'lucide-react'
 import type { Metadata } from 'next'
 import { SITE_NAME } from '@/lib/consts'
 import { getListNotifications } from '@/lib/api/notification'
 import { readAllNotificationsAction } from '@/lib/actions/notification'
+import { TabLink } from '@/components/borrows/TabLink'
+import { CheckCircle } from 'lucide-react'
+import { Notification } from '@/components/notifications/Notification'
 
 export const metadata: Metadata = {
   title: `Notifications · ${SITE_NAME}`,
@@ -32,6 +34,7 @@ export default async function Notifications({
   searchParams: Promise<{
     skip?: number
     limit?: number
+    is_unread?: 'true'
   }>
 }) {
   const sp = await searchParams
@@ -46,6 +49,7 @@ export default async function Notifications({
     {
       limit: limit,
       skip: skip,
+      is_unread: sp?.is_unread,
     },
     {
       headers,
@@ -88,21 +92,20 @@ export default async function Notifications({
           </Button>
         </div>
       </nav>
-      <ul className="space-y-2">
-        {res.data.map((notification) => (
-          <li key={notification.id} className="p-4 border rounded-md">
-            <div className="flex items-center justify-between">
-              <div>
-                <h2 className="text-lg font-semibold">{notification.title}</h2>
-                <p className="text-sm text-gray-500">{notification.message}</p>
-              </div>
-              <span className="text-xs text-gray-400">
-                {new Date(notification.created_at).toLocaleDateString()}
-              </span>
-            </div>
-          </li>
+      <TabLink
+        tabs={[
+          { name: 'Unread', href: '/notifications?is_unread=true' },
+          { name: 'All', href: '/notifications' },
+        ]}
+        activeHref={`/notifications${sp?.is_unread ? `?is_unread=${sp.is_unread}` : ''}`}
+      />
+
+      <div className="space-y-2">
+        {res.data.map((noti) => (
+          <Notification key={noti.id} noti={noti} />
         ))}
-      </ul>
+      </div>
+
       <Pagination>
         <PaginationContent>
           {res.meta.skip > 0 && (

components/borrows/ListCardBorrow.tsx

@@ -1,6 +1,6 @@
 import { Badge } from '@/components/ui/badge'
 import { Borrow } from '@/lib/types/borrow'
-import { isBorrowDue, formatDate, getBorrowStatus } from '@/lib/utils'
+import { formatDate, getBorrowStatus, cn, isBorrowDue } from '@/lib/utils'
 import {
   Calendar,
   CalendarClock,
@@ -17,21 +17,19 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card'
-import clsx from 'clsx'
 import Link from 'next/link'
 import { Route } from 'next'
 
 export const ListCardBorrow: React.FC<
   React.PropsWithChildren<{ borrow: Borrow; idx: number }>
 > = ({ borrow, idx, children }) => {
+  const status = getBorrowStatus(borrow)
   const isDue = isBorrowDue(borrow)
 
   return (
     <Card
       key={borrow.id}
-      className={clsx('relative', {
-        'bg-destructive/5': isDue,
-      })}
+      className={cn('relative', status === 'lost' && 'bg-destructive/5')}
     >
       <CardHeader>
         <Link
@@ -84,7 +82,7 @@ export const ListCardBorrow: React.FC<
           ) : (
             <CalendarClock className="size-4 text-muted-foreground" />
           )}
-          <span className={`${isDue ? 'text-destructive' : ''}`}>
+          <span className={cn(isDue && 'text-destructive')}>
             Due: {formatDate(borrow.due_at)}
           </span>
         </div>

components/button-toggle-theme.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { Moon, Sun } from 'lucide-react'
+import { Monitor, Moon, Sun } from 'lucide-react'
 import { useTheme } from 'next-themes'
 
 import { Button } from '@/components/ui/button'
@@ -19,8 +19,8 @@ export function ModeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+          <Sun className="scale-100 dark:scale-0 dark:-rotate-90" />
+          <Moon className="absolute scale-0 dark:scale-100 dark:rotate-0" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
@@ -38,3 +38,29 @@ export function ModeToggle() {
     </DropdownMenu>
   )
 }
+
+export function ButtonToggleTheme() {
+  const { setTheme } = useTheme()
+
+  return (
+    <fieldset className="flex items-center gap-2 justify-center">
+      <legend className="sr-only">Toggle theme</legend>
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={() => setTheme('light')}
+        aria-label="Set light theme"
+      >
+        <Sun className="text-primary dark:text-foreground" />
+      </Button>
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={() => setTheme('dark')}
+        aria-label="Set dark theme"
+      >
+        <Moon className="text-foreground dark:text-primary" />
+      </Button>
+    </fieldset>
+  )
+}

components/nav-user.tsx

@@ -21,6 +21,7 @@ import { User } from '@/lib/types/user'
 import { Badge } from './ui/badge'
 import Link from 'next/link'
 import { toast } from 'sonner'
+import { ButtonToggleTheme } from './button-toggle-theme'
 
 export function NavUser({
   user,
@@ -162,6 +163,8 @@ export function NavUser({
           <LogOutIcon />
           Log out
         </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <ButtonToggleTheme />
       </DropdownMenuContent>
     </DropdownMenu>
   )

components/notifications/Notification.tsx

@@ -0,0 +1,68 @@
+import { Notification as TNotification } from '@/lib/types/notification'
+import { cn, formatDate } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { Bell, BookHeart, BookUser, CreditCard } from 'lucide-react'
+import { NotificationAction } from './NotificationAction'
+import Link from 'next/link'
+import { Route } from 'next'
+
+export const Notification: React.FC<{ noti: TNotification }> = ({ noti }) => {
+  return (
+    <div
+      key={noti.id}
+      className={cn(
+        'flex gap-4 p-4 rounded-lg border',
+        !noti.read_at && 'bg-secondary/50 border-secondary'
+      )}
+    >
+      <div className="mt-1">{getIcon(noti.reference_type)}</div>
+      <div className="flex-1 min-w-0">
+        <div className="flex justify-between items-start">
+          <h3 className={cn('font-medium', !noti.read_at && 'font-semibold')}>
+            {noti.title}
+          </h3>
+          <span className="text-xs text-muted-foreground whitespace-nowrap ml-2">
+            {formatDate(noti.created_at, {})}
+          </span>
+        </div>
+        <p className="text-sm text-muted-foreground">{noti.message}</p>
+        {noti.reference_id && (
+          <div className="mt-2">
+            <Badge variant="outline" className="text-xs uppercase">
+              <Link href={getLink(noti.reference_type, noti.reference_id)}>
+                {noti.reference_type}_{noti.reference_id.slice(0, 8)}
+              </Link>
+            </Badge>
+          </div>
+        )}
+      </div>
+      <NotificationAction noti={noti} />
+    </div>
+  )
+}
+
+const getIcon = (type: string) => {
+  switch (type) {
+    case 'BOOK':
+      return <BookHeart className="h-5 w-5 text-yellow-500" />
+    case 'BORROWING':
+      return <BookUser className="h-5 w-5 text-blue-500" />
+    case 'SUBSCRIPTION':
+      return <CreditCard className="h-5 w-5 text-green-500" />
+    default:
+      return <Bell className="h-5 w-5 text-gray-500" />
+  }
+}
+
+const getLink = (type: string, id: string): Route => {
+  switch (type) {
+    case 'BOOK':
+      return `/books/${id}` as Route
+    case 'BORROWING':
+      return `/borrows/${id}` as Route
+    case 'SUBSCRIPTION':
+      return `/subscriptions/${id}` as Route
+    default:
+      return `/notifications#${id}` as Route
+  }
+}

components/notifications/NotificationAction.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Button } from '../ui/button'
+import { MoreHorizontal } from 'lucide-react'
+import { Notification } from '@/lib/types/notification'
+import { readNotificationAction } from '@/lib/actions/notification'
+
+export const NotificationAction: React.FC<{
+  noti: Notification
+}> = ({ noti }) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-8 w-8">
+          <MoreHorizontal className="h-4 w-4" />
+          <span className="sr-only">Actions</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {!noti.read_at && (
+          <DropdownMenuItem
+            onClick={readNotificationAction.bind(null, noti.id)}
+          >
+            Mark as read
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuItem disabled>Delete notification</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

lib/actions/notification.ts

@@ -1,7 +1,7 @@
 'use server'
 
 import { revalidatePath } from 'next/cache'
-import { readAllNotifications } from '../api/notification'
+import { readAllNotifications, readNotification } from '../api/notification'
 import { Verify } from '../firebase/firebase'
 
 export async function readAllNotificationsAction() {
@@ -21,3 +21,21 @@ export async function readAllNotificationsAction() {
     revalidatePath('/notifications')
   }
 }
+
+export async function readNotificationAction(id: string) {
+  const headers = await Verify({ from: '/notifications' })
+
+  try {
+    const res = await readNotification(id, {
+      headers,
+    })
+    return res
+  } catch (e) {
+    if (e instanceof Object && 'error' in e) {
+      return { error: e.error as string }
+    }
+    return { error: 'failed to read notification' }
+  } finally {
+    revalidatePath('/notifications')
+  }
+}

lib/api/notification.ts

@@ -37,7 +37,7 @@ export const streamNotification = (
 type GetListNotificationsResponse = Promise<ResList<Notification>>
 
 export const getListNotifications = async (
-  query: Pick<QueryParams<unknown>, 'skip' | 'limit'>,
+  query: Pick<QueryParams<unknown>, 'skip' | 'limit'> & { is_unread?: 'true' },
   init?: RequestInit
 ): GetListNotificationsResponse => {
   const url = new URL(NOTIFICATION_URL)
@@ -63,14 +63,13 @@ export const getListNotifications = async (
 
 export const readNotification = async (id: string, init?: RequestInit) => {
   const url = new URL(`${NOTIFICATION_URL}/${id}/read`)
+  const headers = new Headers(init?.headers)
+  headers.set('Content-Type', 'application/json')
   try {
     const response = await fetch(url.toString(), {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers,
       body: JSON.stringify({ read: true }),
-      ...init,
     })
     if (!response.ok) {
       const e = await response.json()