From 39d52cc18bdcf52fd94a4c6f187e436e3256644e Mon Sep 17 00:00:00 2001
From: Abdul Rosyid <ocritocrit@gmail.com>
Date: Sun, 15 Oct 2023 11:17:11 +0700
Subject: [PATCH] update

---
 app/reservations/ReservationsClient.tsx | 66 +++++++++++++++++++++++--
 1 file changed, 63 insertions(+), 3 deletions(-)

diff --git a/app/reservations/ReservationsClient.tsx b/app/reservations/ReservationsClient.tsx
index f281e7c..eb508cc 100644
--- a/app/reservations/ReservationsClient.tsx
+++ b/app/reservations/ReservationsClient.tsx
@@ -1,13 +1,73 @@
 'use client';
 
+import Container from '@/components/Container';
+import Heading from '@/components/Heading';
+import ListingCard from '@/components/listings/ListingCard';
 import { SafeReservation, SafeUser } from '@/types';
+import axios from 'axios';
+import { useRouter } from 'next/navigation';
+import { useCallback, useState } from 'react';
+import { toast } from 'react-hot-toast';
 
 interface ReservationsClientProps {
-  reservations: SafeReservation;
-  currentUser: SafeUser;
+  reservations: SafeReservation[];
+  currentUser?: SafeUser | null;
 }
 
 const ReservationsClient: React.FC<ReservationsClientProps> = ({ reservations, currentUser }) => {
-  return <div></div>;
+  const router = useRouter();
+  const [deletingId, setDeletingId] = useState('');
+
+  const onCancel = useCallback(
+    (id: string) => {
+      setDeletingId(id);
+
+      axios
+        .delete(`/api/reservations/${id}`)
+        .then(() => {
+          toast.success('Reservation cancelled');
+          router.refresh();
+        })
+        .catch(() => {
+          toast.error('Something went wrong.');
+        })
+        .finally(() => {
+          setDeletingId('');
+        });
+    },
+    [router]
+  );
+
+  return (
+    <Container>
+      <Heading title="Reservations" subTitle="Bookings on your properties" />
+      <div
+        className="
+          mt-10
+          grid
+          grid-cols-1
+          gap-8
+          sm:grid-cols-2
+          md:grid-cols-3
+          lg:grid-cols-4
+          xl:grid-cols-5
+          2xl:grid-cols-6
+        "
+      >
+        {reservations.map((reservation) => (
+          <ListingCard
+            key={reservation.id}
+            data={reservation.listing}
+            reservation={reservation}
+            actionId={reservation.id}
+            onAction={onCancel}
+            disabled={deletingId === reservation.id}
+            actionLabel="Cancel guest reservation"
+            currentUser={currentUser}
+          />
+        ))}
+      </div>
+    </Container>
+  );
 };
 export default ReservationsClient;