From dceee83d95b8e806c9befebe74d9093e8e24566f Mon Sep 17 00:00:00 2001
From: Rei <38581479+Rei-x@users.noreply.github.com>
Date: Tue, 24 Sep 2024 18:14:50 +0200
Subject: [PATCH] feat: add option to remove yourself from reservation (#23)

---
 package-lock.json                             |   8 +-
 package.json                                  |   2 +-
 src/atoms/userRegistrations.ts                |   6 +
 .../[blockId]/formularz.tsx                   | 119 ++++++++++++++++--
 4 files changed, 121 insertions(+), 14 deletions(-)
 create mode 100644 src/atoms/userRegistrations.ts

diff --git a/package-lock.json b/package-lock.json
index eaa0e42..00df3ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
         "date-fns": "^3.6.0",
         "framer-motion": "^11.2.9",
         "i18next": "^23.11.5",
-        "jotai": "^2.8.4",
+        "jotai": "^2.10.0",
         "lucide-react": "^0.379.0",
         "next": "14.2.3",
         "next-themes": "^0.3.0",
@@ -8536,9 +8536,9 @@
       }
     },
     "node_modules/jotai": {
-      "version": "2.8.4",
-      "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.8.4.tgz",
-      "integrity": "sha512-f6jwjhBJcDtpeauT2xH01gnqadKEySwwt1qNBLvAXcnojkmb76EdqRt05Ym8IamfHGAQz2qMKAwftnyjeSoHAA==",
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.10.0.tgz",
+      "integrity": "sha512-8W4u0aRlOIwGlLQ0sqfl/c6+eExl5D8lZgAUolirZLktyaj4WnxO/8a0HEPmtriQAB6X5LMhXzZVmw02X0P0qQ==",
       "license": "MIT",
       "engines": {
         "node": ">=12.20.0"
diff --git a/package.json b/package.json
index 54e245c..77e3e90 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "date-fns": "^3.6.0",
     "framer-motion": "^11.2.9",
     "i18next": "^23.11.5",
-    "jotai": "^2.8.4",
+    "jotai": "^2.10.0",
     "lucide-react": "^0.379.0",
     "next": "14.2.3",
     "next-themes": "^0.3.0",
diff --git a/src/atoms/userRegistrations.ts b/src/atoms/userRegistrations.ts
new file mode 100644
index 0000000..2d432ad
--- /dev/null
+++ b/src/atoms/userRegistrations.ts
@@ -0,0 +1,6 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const userRegistrationsAtom = atomWithStorage<string[]>(
+  "userRegistrations",
+  [],
+);
diff --git a/src/pages/rejestracja/[participationSlug]/[blockId]/formularz.tsx b/src/pages/rejestracja/[participationSlug]/[blockId]/formularz.tsx
index 16f46c6..f078129 100644
--- a/src/pages/rejestracja/[participationSlug]/[blockId]/formularz.tsx
+++ b/src/pages/rejestracja/[participationSlug]/[blockId]/formularz.tsx
@@ -1,16 +1,26 @@
 import { ReloadIcon } from "@radix-ui/react-icons";
 import { useMutation } from "@tanstack/react-query";
 import { formatDistanceToNow } from "date-fns";
+import { useAtom, useSetAtom } from "jotai";
 import type { InferGetServerSidePropsType } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import type { GetServerSidePropsContext } from "nextjs-routes";
-import React from "react";
+import type { GetServerSidePropsContext, Route } from "nextjs-routes";
+import React, { useState } from "react";
 import { FaArrowLeft } from "react-icons/fa6";
 import { toast } from "sonner";
 import { z } from "zod";
 
+import { userRegistrationsAtom } from "@/atoms/userRegistrations";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -24,6 +34,80 @@ import { supabase } from "@/lib/supabase";
 import { createSSRClient } from "@/lib/supabaseSSR";
 import { useZodForm } from "@/lib/useZodForm";
 
+const DeleteDialog = ({
+  reservationId,
+  name,
+  blockName,
+}: {
+  reservationId: string;
+  name: string;
+  blockName: string;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const setUserRegistrations = useSetAtom(userRegistrationsAtom);
+  const router = useRouter();
+  const removeReservation = useMutation({
+    mutationFn: async () => {
+      await supabase
+        .from("reservations")
+        .delete()
+        .eq("reservationId", reservationId)
+        .throwOnError();
+    },
+    onSuccess: async () => {
+      await router.replace(router.asPath as unknown as Route);
+      setUserRegistrations((prev) => prev.filter((id) => id !== reservationId));
+    },
+  });
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild={true}>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => {
+            setIsOpen(true);
+          }}
+        >
+          Wypisz
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Usuń uczestnika</DialogTitle>
+        </DialogHeader>
+        <div>
+          <p>
+            Czy na pewno chcesz usunąć {name} z {blockName}?
+          </p>
+        </div>
+        <DialogFooter className="gap-2">
+          <Button
+            variant="outline"
+            onClick={() => {
+              setIsOpen(false);
+            }}
+          >
+            Nie
+          </Button>
+          <Button
+            type="submit"
+            loading={removeReservation.isPending}
+            onClick={() => {
+              void removeReservation.mutateAsync().then(() => {
+                setIsOpen(false);
+              });
+            }}
+          >
+            Tak
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
 const Submit = ({
   event,
   blockId,
@@ -37,6 +121,10 @@ const Submit = ({
     }),
   });
 
+  const [userRegistrations, setUserRegistrations] = useAtom(
+    userRegistrationsAtom,
+  );
+
   const addReservation = useMutation({
     mutationFn: async (data: { firstName: string; lastName: string }) => {
       const result = await supabase
@@ -66,7 +154,8 @@ const Submit = ({
           reservationId: data.reservationId,
         },
       });
-      router.reload();
+
+      setUserRegistrations((prev) => [...prev, data.reservationId]);
     },
   });
 
@@ -104,17 +193,29 @@ const Submit = ({
           </li>
           <li className="mt-4">
             <span className="font-semibold">Rezerwacje:</span>
-            <ul className="list-inside list-disc text-sm">
+            <ul className="flex flex-col gap-2 text-sm">
               {block.reservations
                 .sort((a, b) => {
                   return a.createdAt.localeCompare(b.createdAt) * -1;
                 })
                 .map((reservation) => (
-                  <li key={reservation.reservationId}>
-                    {reservation.firstName} {reservation.lastName},{" "}
-                    {formatDistanceToNow(new Date(reservation.createdAt), {
-                      addSuffix: true,
-                    })}
+                  <li
+                    key={reservation.reservationId}
+                    className="flex items-center justify-between"
+                  >
+                    <p>
+                      {reservation.firstName} {reservation.lastName},{" "}
+                      {formatDistanceToNow(new Date(reservation.createdAt), {
+                        addSuffix: true,
+                      })}
+                    </p>
+                    {userRegistrations.includes(reservation.reservationId) ? (
+                      <DeleteDialog
+                        name={`${reservation.firstName} ${reservation.lastName}`}
+                        blockName={block.name}
+                        reservationId={reservation.reservationId}
+                      />
+                    ) : null}
                   </li>
                 ))}
             </ul>