feat: return button

Author: agmmtoo

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

app/(protected)/borrows/[id]/page.tsx

@@ -30,13 +30,15 @@ import {
   CreditCard,
   Gavel,
   Library,
+  Pen,
   Tally5,
   User,
   UserCog,
 } from 'lucide-react'
 import clsx from 'clsx'
 import { differenceInDays } from 'date-fns'
 import { Borrow } from '@/lib/types/borrow'
+import { Button } from '@/components/ui/button'
 
 export default async function BorrowDetailsPage({
   params,
@@ -125,14 +127,15 @@ export default async function BorrowDetailsPage({
           <CardHeader>
             <CardTitle>Book Information</CardTitle>
           </CardHeader>
-          <CardContent className="grid place-self-center md:grid-cols-2 gap-4">
+          <CardContent className="grid place-self-center md:place-self-auto md:grid-cols-2 gap-4">
             <Link href={`/books/${borrowRes.data.book.id}`}>
               <Image
                 src={borrowRes.data.book?.cover ?? '/book-placeholder.svg'}
                 alt={borrowRes.data.book.title + "'s cover"}
                 width={256}
                 height={256}
                 className="rounded-md w-56 h-auto hover:shadow-md hover:scale-105 transition-transform"
+                priority
               />
             </Link>
             <div>
@@ -349,23 +352,29 @@ export default async function BorrowDetailsPage({
                   alt={b.book.title + "'s cover"}
                   width={160}
                   height={240}
-                  className="shadow-md rounded-lg w-40 h-64 place-self-center object-cover"
+                  className="shadow-md rounded-lg w-40 h-60 place-self-center object-cover"
                 />
               </Link>
             ))}
           </CardContent>
         </Card>
       )}
 
-      {!borrowRes.data.returning && (
-        <div className="bottom-0 sticky py-2">
+      <div className="bottom-0 sticky py-2 grid md:grid-cols-2 gap-4">
+        {!borrowRes.data.returning && (
           <BtnReturnBook
             variant="outline"
             className="w-full"
             borrow={borrowRes.data}
           />
-        </div>
-      )}
+        )}
+        <Button asChild>
+          <Link href={`/borrows/${borrowRes.data.id}/edit`} className="w-full">
+            <Pen />
+            Edit
+          </Link>
+        </Button>
+      </div>
     </div>
   )
 }

app/(protected)/layout.tsx

@@ -1,5 +1,5 @@
 export default function ProtectedLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
-  return <div className="container mx-auto px-4">{children}</div>
+  return <div className="container mx-auto px-4 my-4">{children}</div>
 }

components/borrows/BtnReturnBorrow.tsx

@@ -1,49 +1,75 @@
 'use client'
 
 import { Borrow } from '@/lib/types/borrow'
-import { useState } from 'react'
+import { useTransition, useState } from 'react'
 import { Button, ButtonProps } from '../ui/button'
-import { Lock, Unlock } from 'lucide-react'
-import { ReturnBorrow } from '@/lib/actions/return-borrow'
+import { Lock, Unlock, Loader } from 'lucide-react'
+import { actionReturnBorrow } from '@/lib/actions/return-borrow'
 import { formatDate } from '@/lib/utils'
+import { toast } from '../hooks/use-toast'
 
 export const BtnReturnBook: React.FC<
   ButtonProps & {
     borrow: Borrow
   }
 > = ({ borrow, ...props }) => {
-  const [confirm, setConfirm] = useState<NodeJS.Timeout>()
+  const [confirmTimeout, setConfirmTimeout] = useState<NodeJS.Timeout>()
+  const [clientBorrow, setClientBorrow] = useState<Borrow>(borrow)
+  const [isPending, startTransition] = useTransition()
 
   const onUnlock = () => {
     const timerId = setTimeout(() => {
-      setConfirm(undefined)
+      setConfirmTimeout(undefined)
     }, 3_000)
-    setConfirm(timerId)
+    setConfirmTimeout(timerId)
   }
 
   const onClick = () => {
-    ReturnBorrow(borrow.id)
-    if (confirm) clearTimeout(confirm)
+    startTransition(async () => {
+      clearTimeout(confirmTimeout)
+      const res = await actionReturnBorrow(borrow.id)
+      if ('error' in res) {
+        toast({
+          title: 'Failed to return book',
+          description: res.error,
+          variant: 'destructive',
+        })
+        return
+      }
+      // optimistic update
+      setClientBorrow((prev) => ({
+        ...prev,
+        returning: {
+          returned_at: new Date().toISOString(),
+        } as Borrow['returning'],
+      }))
+      toast({
+        title: 'Success',
+        description: 'Book returned successfully',
+        variant: 'default',
+      })
+    })
   }
 
-  if (borrow.returning)
+  if (clientBorrow.returning)
     return (
       <Button {...props} variant="secondary" disabled>
-        {formatDate(borrow.returning.returned_at)}
+        {formatDate(clientBorrow.returning.returned_at)}
       </Button>
     )
 
-  if (!confirm) {
+  if (!confirmTimeout) {
     return (
       <Button onClick={onUnlock} {...props}>
         <Lock />
         Return
       </Button>
     )
   }
+
   return (
-    <Button onClick={onClick} {...props} variant="default">
-      <Unlock />
+    <Button onClick={onClick} {...props} variant="default" disabled={isPending}>
+      {isPending ? <Loader className="animate-spin" /> : <Unlock />}
       Confirm
     </Button>
   )

lib/actions/return-borrow.ts

@@ -4,20 +4,28 @@ import { returnBorrow } from '../api/borrow'
 import { Verify } from '../firebase/firebase'
 
 // server action to return a borrow
-export async function ReturnBorrow(id: string) {
+export async function actionReturnBorrow(id: string) {
   const headers = await Verify({
     from: '/borrows',
   })
 
-  returnBorrow(
-    {
-      id,
-      returned_at: new Date().toISOString(),
-    },
-    {
-      headers,
+  try {
+    const res = await returnBorrow(
+      {
+        id: id,
+        returned_at: new Date().toISOString(),
+      },
+      {
+        headers,
+      }
+    )
+    return res
+  } catch (e) {
+    if (e instanceof Object && 'error' in e) {
+      return { error: e.error as string }
     }
-  )
-
-  revalidatePath('/borrows')
+    return { error: 'failed to return borrow' }
+  } finally {
+    revalidatePath('/borrows')
+  }
 }

lib/api/borrow.ts

@@ -1,4 +1,4 @@
-import { Borrow, BorrowDetail } from '../types/borrow'
+import { Borrow, BorrowDetail, Return } from '../types/borrow'
 import { QueryParams, ResList, ResSingle } from '../types/common'
 import { BASE_URL } from './common'
 
@@ -61,9 +61,7 @@ export const createBorrow = async (
 }
 
 export const returnBorrow = async (
-  data: Pick<Borrow, 'id'> & {
-    returned_at: string
-  },
+  data: Pick<Borrow, 'id'> & Partial<Pick<Return, 'returned_at' | 'fine'>>,
   init?: RequestInit
 ): GetBorrowResponse => {
   const headers = new Headers(init?.headers)