From ef772065a5ddbbe4faee36afa5498172953b83b5 Mon Sep 17 00:00:00 2001
From: Caden Buckhalt <halaeb@gmail.com>
Date: Thu, 12 Oct 2023 11:58:02 -0700
Subject: [PATCH] refactor delete all to use DeleteParticipant alert

---
 .../ParticipantsTable/ParticipantsTable.tsx   | 26 ++++++++-
 .../DeleteAllParticipantsButton.tsx           | 56 -------------------
 2 files changed, 23 insertions(+), 59 deletions(-)
 delete mode 100644 app/(dashboard)/dashboard/participants/_components/DeleteAllParticipantsButton.tsx

diff --git a/app/(dashboard)/dashboard/_components/ParticipantsTable/ParticipantsTable.tsx b/app/(dashboard)/dashboard/_components/ParticipantsTable/ParticipantsTable.tsx
index 201fac5e..508e67d3 100644
--- a/app/(dashboard)/dashboard/_components/ParticipantsTable/ParticipantsTable.tsx
+++ b/app/(dashboard)/dashboard/_components/ParticipantsTable/ParticipantsTable.tsx
@@ -7,9 +7,9 @@ import { ParticipantColumns } from '~/app/(dashboard)/dashboard/_components/Part
 import ImportCSVModal from '~/app/(dashboard)/dashboard/participants/_components/ImportCSVModal';
 import ExportCSVParticipants from '~/app/(dashboard)/dashboard/participants/_components/ExportCSVParticipants';
 import ParticipantModal from '~/app/(dashboard)/dashboard/participants/_components/ParticipantModal';
-import { DeleteAllParticipantsButton } from '~/app/(dashboard)/dashboard/participants/_components/DeleteAllParticipantsButton';
 import { DeleteParticipant } from '~/app/(dashboard)/dashboard/participants/_components/DeleteParticipant';
 import type { ParticipantWithInterviews } from '~/shared/types';
+import { Button } from '~/components/ui/Button';
 
 export const ParticipantsTable = ({
   initialData,
@@ -24,6 +24,7 @@ export const ParticipantsTable = ({
   const [participantsToDelete, setParticipantsToDelete] = useState<
     ParticipantWithInterviews[]
   >([]);
+  const [deleteAll, setDeleteAll] = useState(false);
 
   const {
     isLoading,
@@ -41,17 +42,34 @@ export const ParticipantsTable = ({
   const { mutateAsync: deleteParticipants, isLoading: isDeleting } =
     trpc.participant.delete.byId.useMutation();
 
+  const { mutateAsync: deleteAllParticipants, isLoading: isDeletingAll } =
+    trpc.participant.delete.all.useMutation();
+
   const editParticipant = (identifier: string) => {
     setSeletedParticipant(identifier);
     setShowModal(true);
   };
 
   const handleDelete = (data: ParticipantWithInterviews[]) => {
+    setDeleteAll(false);
     setParticipantsToDelete(data);
     setShowAlertDialog(true);
   };
 
+  const handleDeleteAll = () => {
+    setDeleteAll(true);
+    setParticipantsToDelete(participants);
+    setShowAlertDialog(true);
+  };
+
   const handleConfirm = async () => {
+    if (deleteAll) {
+      await deleteAllParticipants();
+      await refetch();
+      setShowAlertDialog(false);
+    }
+
+    // Delete selected participants
     await deleteParticipants(participantsToDelete.map((d) => d.identifier));
     await refetch();
     setShowAlertDialog(false);
@@ -69,7 +87,9 @@ export const ParticipantsTable = ({
         />
         <ImportCSVModal />
         <ExportCSVParticipants participants={participants} />
-        <DeleteAllParticipantsButton />
+        <Button onClick={handleDeleteAll} variant="destructive">
+          Delete All Participants
+        </Button>
       </div>
       {isLoading && <div>Loading...</div>}
       <DataTable
@@ -83,7 +103,7 @@ export const ParticipantsTable = ({
         onCancel={() => setShowAlertDialog(false)}
         onConfirm={handleConfirm}
         selectedParticipants={participantsToDelete}
-        isDeleting={isDeleting}
+        isDeleting={deleteAll ? isDeletingAll : isDeleting}
       />
     </>
   );
diff --git a/app/(dashboard)/dashboard/participants/_components/DeleteAllParticipantsButton.tsx b/app/(dashboard)/dashboard/participants/_components/DeleteAllParticipantsButton.tsx
deleted file mode 100644
index 05c6cbec..00000000
--- a/app/(dashboard)/dashboard/participants/_components/DeleteAllParticipantsButton.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client';
-
-import { Loader2 } from 'lucide-react';
-import { useState } from 'react';
-import { trpc } from '~/app/_trpc/client';
-import { Button } from '~/components/ui/Button';
-import {
-  AlertDialog,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '~/components/ui/alert-dialog';
-
-export const DeleteAllParticipantsButton = () => {
-  const [showAlertDialog, setShowAlertDialog] = useState(false);
-  const utils = trpc.useContext();
-  const { mutate: deleteAllParticipants, isLoading } =
-    trpc.participant.delete.all.useMutation({
-      async onSuccess() {
-        await utils.participant.get.all.refetch();
-        setShowAlertDialog(false);
-      },
-    });
-  return (
-    <>
-      <Button variant="destructive" onClick={() => setShowAlertDialog(true)}>
-        Delete All Participants
-      </Button>
-      <AlertDialog open={showAlertDialog} onOpenChange={setShowAlertDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete{' '}
-              <strong>all</strong> participants.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isLoading}>Cancel</AlertDialogCancel>
-            <Button
-              onClick={() => deleteAllParticipants()}
-              variant="destructive"
-              disabled={isLoading}
-            >
-              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-              {isLoading ? 'Deleting...' : 'Continue'}
-            </Button>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
-};