feat: return borrow

Author: agmmtoo

.github/workflows/prod-deploy.yml

@@ -86,4 +86,4 @@ jobs:
             eval "$(ssh-agent -s)"
             ssh-add ~/.ssh/action
             cd /home/ubuntu/deploy
-            bash deploy.sh 
+            bash deploy.sh

app/(protected)/borrows/page.tsx

@@ -1,3 +1,4 @@
+import { BtnReturnBook } from '@/components/borrows/BtnReturnBook'
 import { Badge } from '@/components/ui/badge'
 import {
   Breadcrumb,
@@ -160,13 +161,13 @@ export default async function Borrows({
               </div>
             </CardContent>
             <CardFooter>
-              <Button
+              <BtnReturnBook
                 variant="outline"
                 className="w-full"
-                // onClick={() => alert(`Return book: ${borrow.book_id}`)}
+                borrow={borrow}
               >
                 Return Book
-              </Button>
+              </BtnReturnBook>
             </CardFooter>
           </Card>
         ))}

components/borrows/BtnReturnBook.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { Borrow } from '@/lib/types/borrow'
+import { useState } from 'react'
+import { Button, ButtonProps } from '../ui/button'
+import { Lock, Unlock } from 'lucide-react'
+import { Return } from '@/lib/actions/return-borrow'
+
+export const BtnReturnBook: React.FC<
+  ButtonProps & {
+    borrow: Borrow
+  }
+> = ({ borrow, ...props }) => {
+  const [confirm, setConfirm] = useState<NodeJS.Timeout>()
+
+  const onUnlock = () => {
+    console.log('unlock')
+    const timerId = setTimeout(() => {
+      setConfirm(undefined)
+    }, 3_000)
+    setConfirm(timerId)
+  }
+
+  const onClick = () => {
+    console.log('return book', borrow.id)
+    Return(borrow.id)
+    if (confirm) clearTimeout(confirm)
+  }
+
+  if (borrow.returned_at)
+    return (
+      <Button {...props} variant="secondary" disabled>
+        {borrow.returned_at}
+      </Button>
+    )
+
+  if (!confirm) {
+    return (
+      <Button onClick={onUnlock} {...props}>
+        <Lock />
+        Return
+      </Button>
+    )
+  }
+  return (
+    <Button onClick={onClick} {...props} variant="default">
+      <Unlock />
+      Confirm
+    </Button>
+  )
+}

components/ui/button.tsx

@@ -1,34 +1,34 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   }
 )
@@ -41,7 +41,7 @@ export interface ButtonProps
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : 'button'
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
@@ -51,6 +51,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     )
   }
 )
-Button.displayName = "Button"
+Button.displayName = 'Button'
 
 export { Button, buttonVariants }

components/ui/card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -9,25 +9,25 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
       className
     )}
     {...props}
   />
 ))
-Card.displayName = "Card"
+Card.displayName = 'Card'
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
     {...props}
   />
 ))
-CardHeader.displayName = "CardHeader"
+CardHeader.displayName = 'CardHeader'
 
 const CardTitle = React.forwardRef<
   HTMLDivElement,
@@ -36,44 +36,44 @@ const CardTitle = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
+      'text-2xl font-semibold leading-none tracking-tight',
       className
     )}
     {...props}
   />
 ))
-CardTitle.displayName = "CardTitle"
+CardTitle.displayName = 'CardTitle'
 
 const CardDescription = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ))
-CardDescription.displayName = "CardDescription"
+CardDescription.displayName = 'CardDescription'
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
 ))
-CardContent.displayName = "CardContent"
+CardContent.displayName = 'CardContent'
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn('flex items-center p-6 pt-0', className)}
     {...props}
   />
 ))
-CardFooter.displayName = "CardFooter"
+CardFooter.displayName = 'CardFooter'
 
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

components/ui/input.tsx

@@ -1,14 +1,14 @@
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className
         )}
         ref={ref}
@@ -17,6 +17,6 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
     )
   }
 )
-Input.displayName = "Input"
+Input.displayName = 'Input'
 
 export { Input }

components/ui/label.tsx

@@ -1,13 +1,13 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
 )
 
 const Label = React.forwardRef<

lib/actions/return-borrow.ts

@@ -0,0 +1,25 @@
+'use server'
+import { revalidatePath } from 'next/cache'
+import { returnBorrow } from '../api/borrow'
+import { Verify } from '../firebase/firebase'
+
+export async function Return(id: string, init?: RequestInit) {
+  const headers = await Verify({
+    from: '/borrows',
+  })
+
+  returnBorrow(
+    {
+      id,
+      returned_at: new Date().toISOString(),
+      // FIXME: accept staff_id in api
+      staff_id: '',
+    },
+    {
+      headers,
+      ...init,
+    }
+  )
+
+  revalidatePath('/borrows')
+}

lib/api/borrow.ts

@@ -26,7 +26,6 @@ export const getListBorrows = async (
 
   const response = await fetch(url.toString(), init)
   if (!response.ok) {
-    // FIXME: handle token expired error
     const e = await response.json()
     throw e
   }
@@ -60,3 +59,23 @@ export const createBorrow = async (
 
   return response.json()
 }
+
+export const returnBorrow = async (
+  data: Pick<Borrow, 'id' | 'staff_id' | 'returned_at'>,
+  init?: RequestInit
+): GetBookResponse => {
+  const response = await fetch(`${BORROW_URL}/${data.id}`, {
+    ...init,
+    method: 'PUT',
+    body: JSON.stringify(data),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+  if (!response.ok) {
+    const e = await response.json()
+    throw e
+  }
+
+  return response.json()
+}

lib/firebase/admin.ts

@@ -10,6 +10,5 @@ const adminApp = !admin.apps.length
       'admin'
     )
   : admin.app('admin')
-// }
 
 export { adminApp }