Take 1 at trying to stop double clicks

app/routes/events-team.tsx

@@ -119,9 +119,14 @@ export default function () {
   } = useDisclosure();
   const toast = useToast();
   const [selectedEvent, setSelectedEvent] = useState("");
+  const [disableClicks, setDisableClicks] = useState(false);
   const [showOld, setShowOld] = useState(false);
 
   async function decide(approved: boolean, eventId: string) {
+    if (disableClicks) return;
+
+    setDisableClicks(true);
+
     const decisionResp = await fetch(
       `/api/events-team/events/${eventId}/decision`,
       {
@@ -146,6 +151,7 @@ export default function () {
         title: "Oops!",
       });
 
+      setDisableClicks(false);
       return;
     }
 
@@ -162,9 +168,14 @@ export default function () {
     newEventData[eventIdx].pending = false;
 
     setEventData([...newEventData]);
+    setDisableClicks(false);
   }
 
   async function certify(eventId: string) {
+    if (disableClicks) return;
+
+    setDisableClicks(true);
+
     const certifyResp = await fetch(
       `/api/events-team/events/${eventId}/certify`,
       {
@@ -189,6 +200,7 @@ export default function () {
         title: "Failed to certify game night",
       });
 
+      setDisableClicks(false);
       return;
     }
 
@@ -205,9 +217,12 @@ export default function () {
 
     setEventData([...newEventData]);
     setSelectedEvent("");
+    setDisableClicks(false);
   }
 
   async function markComplete(eventId: string) {
+    setDisableClicks(true);
+
     const completeResp = await fetch(
       `/api/events-team/events/${eventId}/complete`,
       {
@@ -234,6 +249,7 @@ export default function () {
         title: "Failed to complete",
       });
 
+      setDisableClicks(false);
       return;
     }
 
@@ -251,9 +267,12 @@ export default function () {
 
     setEventData([...newEventData]);
     setSelectedEvent("");
+    setDisableClicks(false);
   }
 
   async function markForgotten(eventId: string) {
+    setDisableClicks(true);
+
     const forgottenResp = await fetch(
       `/api/events-team/events/${eventId}/forgotten`,
       {
@@ -280,6 +299,7 @@ export default function () {
         title: "Failed to forget",
       });
 
+      setDisableClicks(false);
       return;
     }
 
@@ -288,9 +308,12 @@ export default function () {
     newEventData[eventData.findIndex((e) => e.id === eventId)].performed_at = 0;
     setEventData([...newEventData]);
     setSelectedEvent("");
+    setDisableClicks(false);
   }
 
   async function deleteEvent(eventId: string) {
+    setDisableClicks(true);
+
     const deleteResp = await fetch(`/api/events-team/events/${eventId}`, {
       method: "DELETE",
     });
@@ -310,14 +333,18 @@ export default function () {
         title: "Failed to delete",
       });
 
+      setDisableClicks(false);
       return;
     }
 
     setEventData(eventData.filter((e) => e.id !== eventId));
     setSelectedEvent("");
+    setDisableClicks(false);
   }
 
   async function reschedule(eventId: string) {
+    setDisableClicks(true);
+
     const newDate = (
       document.getElementById("reschedule-input") as HTMLInputElement
     ).value;
@@ -343,6 +370,7 @@ export default function () {
         title: "Failed to reschedule",
       });
 
+      setDisableClicks(false);
       return;
     }
 
@@ -352,6 +380,7 @@ export default function () {
     setEventData([...newEventData]);
     setSelectedEvent("");
     onRescheduleClose();
+    setDisableClicks(false);
     toast({
       description: `Event rescheduled to ${newDate}`,
       status: "success",
@@ -373,11 +402,16 @@ export default function () {
             </Text>
           </ModalBody>
           <ModalFooter>
-            <Button colorScheme="red" onClick={onClose}>
+            <Button
+              colorScheme="red"
+              disabled={disableClicks}
+              onClick={onClose}
+            >
               Cancel
             </Button>
             <Button
               colorScheme="blue"
+              disabled={disableClicks}
               ml="8px"
               onClick={async () => {
                 await certify(selectedEvent);
@@ -401,9 +435,12 @@ export default function () {
             </Text>
           </ModalBody>
           <ModalFooter>
-            <Button onClick={closeComplete}>Cancel</Button>
+            <Button disabled={disableClicks} onClick={closeComplete}>
+              Cancel
+            </Button>
             <Button
               colorScheme="blue"
+              disabled={disableClicks}
               ml="8px"
               onClick={async () => await markComplete(selectedEvent)}
             >
@@ -422,9 +459,12 @@ export default function () {
             will be given a 5 point penalty.
           </ModalBody>
           <ModalFooter>
-            <Button onClick={onForgottenClose}>Cancel</Button>
+            <Button disabled={disableClicks} onClick={onForgottenClose}>
+              Cancel
+            </Button>
             <Button
               colorScheme="blue"
+              disabled={disableClicks}
               ml="8px"
               onClick={async () => await markForgotten(selectedEvent)}
             >
@@ -443,9 +483,12 @@ export default function () {
             want to continue?
           </ModalBody>
           <ModalFooter>
-            <Button onClick={onDeleteClose}>Cancel</Button>
+            <Button disabled={disableClicks} onClick={onDeleteClose}>
+              Cancel
+            </Button>
             <Button
               colorScheme="red"
+              disabled={disableClicks}
               ml="8px"
               onClick={async () => await deleteEvent(selectedEvent)}
             >
@@ -478,9 +521,12 @@ export default function () {
             </Text>
           </ModalBody>
           <ModalFooter>
-            <Button onClick={onRescheduleClose}>Cancel</Button>
+            <Button disabled={disableClicks} onClick={onRescheduleClose}>
+              Cancel
+            </Button>
             <Button
               colorScheme="blue"
+              disabled={disableClicks}
               ml="8px"
               onClick={async () => await reschedule(selectedEvent)}
             >
@@ -585,12 +631,14 @@ export default function () {
                       <>
                         <Button
                           colorScheme="red"
+                          disabled={disableClicks}
                           onClick={async () => await decide(false, event.id)}
                         >
                           Reject
                         </Button>
                         <Button
                           colorScheme="blue"
+                          disabled={disableClicks}
                           onClick={async () => await decide(true, event.id)}
                         >
                           Approve
@@ -603,6 +651,7 @@ export default function () {
                       <>
                         <Button
                           colorScheme="blue"
+                          disabled={disableClicks}
                           onClick={() => {
                             setSelectedEvent(event.id);
                             openComplete();
@@ -612,6 +661,7 @@ export default function () {
                         </Button>
                         <Button
                           colorScheme="red"
+                          disabled={disableClicks}
                           onClick={() => {
                             setSelectedEvent(event.id);
                             onForgottenOpen();
@@ -628,6 +678,7 @@ export default function () {
                     !event.reached_minimum_player_count ? (
                       <Button
                         colorScheme="blue"
+                        disabled={disableClicks}
                         onClick={() => {
                           setSelectedEvent(event.id);
                           onOpen();
@@ -650,6 +701,7 @@ export default function () {
                   <IconButton
                     alignSelf="center"
                     aria-label="Delete event"
+                    disabled={disableClicks}
                     display={
                       (event.created_by === user_id &&
                         event.day > new Date().getUTCDate()) ||