Fix enabled/disabled button not updating properly

src/components/Reminder/ButtonRow/EditButtonRow.tsx

@@ -1,4 +1,4 @@
-import { useState } from "preact/hooks";
+import { useRef, useState } from "preact/hooks";
 import { useMutation, useQueryClient } from "react-query";
 import { patchGuildReminder } from "../../../api";
 import { useParams } from "wouter";
@@ -9,11 +9,16 @@ import { useFlash } from "../../App/FlashContext";
 
 export const EditButtonRow = () => {
     const { guild } = useParams();
-    const [reminder] = useReminder();
+    const [reminder, setReminder] = useReminder();
 
     const [recentlySaved, setRecentlySaved] = useState(false);
     const queryClient = useQueryClient();
 
+    const iconFlashTimeout = useRef(0);
+
+    console.log(reminder.enabled);
+    console.log(reminder.content);
+
     const mutation = useMutation({
         ...patchGuildReminder(guild),
         onSuccess: () => {
@@ -21,7 +26,12 @@ export const EditButtonRow = () => {
                 queryKey: ["GUILD_REMINDERS", guild],
             });
             setRecentlySaved(true);
-            setTimeout(() => {
+
+            if (iconFlashTimeout.current !== null) {
+                clearTimeout(iconFlashTimeout.current);
+            }
+
+            iconFlashTimeout.current = setTimeout(() => {
                 setRecentlySaved(false);
             }, ICON_FLASH_TIME);
         },
@@ -54,6 +64,10 @@ export const EditButtonRow = () => {
             <button
                 class="button is-warning"
                 onClick={() => {
+                    setReminder((r) => ({
+                        ...r,
+                        enabled: !r.enabled,
+                    }));
                     mutation.mutate({
                         ...reminder,
                         enabled: !reminder.enabled,