Add dashboard to build

reminder-dashboard/src/components/Reminder/ButtonRow/DeleteButton.tsx

@@ -0,0 +1,74 @@
+import { useState } from "preact/hooks";
+import { Modal } from "../../Modal";
+import { useMutation, useQueryClient } from "react-query";
+import { useReminder } from "../ReminderContext";
+import { deleteGuildReminder } from "../../../api";
+import { useParams } from "wouter";
+import { useFlash } from "../../App/FlashContext";
+
+export const DeleteButton = () => {
+    const [modalOpen, setModalOpen] = useState(false);
+
+    return (
+        <>
+            <button
+                class="button is-danger delete-reminder"
+                onClick={() => {
+                    setModalOpen(true);
+                }}
+            >
+                Delete
+            </button>
+            {modalOpen && <DeleteModal setModalOpen={setModalOpen}></DeleteModal>}
+        </>
+    );
+};
+
+const DeleteModal = ({ setModalOpen }) => {
+    const [reminder] = useReminder();
+    const { guild } = useParams();
+
+    const flash = useFlash();
+    const queryClient = useQueryClient();
+    const mutation = useMutation({
+        ...deleteGuildReminder(guild),
+        onSuccess: () => {
+            flash({
+                message: "Reminder deleted",
+                type: "success",
+            });
+            queryClient.invalidateQueries({
+                queryKey: ["GUILD_REMINDERS", guild],
+            });
+            setModalOpen(false);
+        },
+    });
+
+    return (
+        <Modal setModalOpen={setModalOpen} title={"Delete Reminder"}>
+            <>
+                <p>This reminder will be permanently deleted. Are you sure?</p>
+                <br></br>
+                <div class="has-text-centered">
+                    <button
+                        class="button is-danger"
+                        onClick={() => {
+                            mutation.mutate(reminder);
+                        }}
+                        disabled={mutation.isLoading}
+                    >
+                        Delete
+                    </button>
+                    <button
+                        class="button is-light close-modal"
+                        onClick={() => {
+                            setModalOpen(false);
+                        }}
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </>
+        </Modal>
+    );
+};