update

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;