fix: no error handling in auth layout

Author: agmmtoo

app/(protected)/layout.tsx

@@ -6,31 +6,25 @@ import Link from 'next/link'
 export default async function ProtectedLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
-  // const claim = await IsLoggedIn()
-
   const headers = await Verify({ from: '', forceRedirect: false })
 
-  const res = await getMe(
-    {
-      include_unread_notifications_count: true,
-    },
-    {
-      headers,
-    }
+  const me = await getMe(
+    { include_unread_notifications_count: true },
+    { headers }
   )
-
-  if ('error' in res) {
-    console.log('Error getting user', res.error)
-    return <div>Something went wrong</div>
-  }
+    .then((res) => ('error' in res ? null : res.data))
+    .catch((e) => {
+      console.warn('Error fetching me:', e)
+      return null
+    })
 
   return (
     <div className="container mx-auto px-4 my-4">
       <nav className="flex items-center justify-between">
         <Link href="/" className="uppercase font-semibold tracking-wider">
           Librarease
         </Link>
-        {res.data && <NavUser user={res.data} />}
+        {me && <NavUser user={me} />}
       </nav>
 
       {children}

app/(protected)/notifications/page.tsx

@@ -16,11 +16,12 @@ import {
 } from '@/components/ui/pagination'
 
 import { Verify } from '@/lib/firebase/firebase'
-import { BellOff } from 'lucide-react'
+import { CheckCircle } from 'lucide-react'
 import Link from 'next/link'
 import type { Metadata } from 'next'
 import { SITE_NAME } from '@/lib/consts'
 import { getListNotifications } from '@/lib/api/notification'
+import { readAllNotificationsAction } from '@/lib/actions/notification'
 
 export const metadata: Metadata = {
   title: `Notifications · ${SITE_NAME}`,
@@ -80,9 +81,13 @@ export default async function Notifications({
               </BreadcrumbItem>
             </BreadcrumbList>
           </Breadcrumb>
-          <Button>
-            <BellOff className="mr-2 size-4" />
-            Mark All as Read
+          <Button
+            onClick={readAllNotificationsAction}
+            disabled={!res.meta.unread}
+            variant="outline"
+          >
+            <CheckCircle className="mr-2 size-4" />
+            Mark all as read
           </Button>
         </div>
       </nav>
@@ -101,7 +106,6 @@ export default async function Notifications({
           </li>
         ))}
       </ul>
-
       <Pagination>
         <PaginationContent>
           <PaginationItem>

lib/actions/notification.ts

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