Load/create/delete templates

src/api.ts

@@ -178,3 +178,22 @@ export const fetchGuildTemplates = (guild: string) => ({
         >,
     staleTime: OTHER_STALE_TIME,
 });
+
+export const postGuildTemplate = (guild: string) => ({
+    mutationFn: (reminder: Reminder) =>
+        axios
+            .post(`/dashboard/api/guild/${guild}/templates`, {
+                ...reminder,
+                utc_time: reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss"),
+            })
+            .then((resp) => resp.data),
+});
+
+export const deleteGuildTemplate = (guild: string) => ({
+    mutationFn: (template: Template) =>
+        axios.delete(`/dashboard/api/guild/${guild}/templates`, {
+            data: {
+                id: template.id,
+            },
+        }),
+});

src/components/Reminder/ButtonRow/CreateButtonRow.tsx

@@ -1,7 +1,7 @@
 import { LoadTemplate } from "../LoadTemplate";
 import { useReminder } from "../ReminderContext";
 import { useMutation, useQueryClient } from "react-query";
-import { postGuildReminder } from "../../../api";
+import { postGuildReminder, postGuildTemplate } from "../../../api";
 import { useParams } from "wouter";
 import { useState } from "preact/hooks";
 import { ICON_FLASH_TIME } from "../../../consts";
@@ -12,6 +12,7 @@ export const CreateButtonRow = () => {
     const [reminder] = useReminder();
 
     const [recentlyCreated, setRecentlyCreated] = useState(false);
+    const [templateRecentlyCreated, setTemplateRecentlyCreated] = useState(false);
 
     const flash = useFlash();
     const queryClient = useQueryClient();
@@ -39,6 +40,30 @@ export const CreateButtonRow = () => {
         },
     });
 
+    const templateMutation = useMutation({
+        ...postGuildTemplate(guild),
+        onSuccess: (data) => {
+            if (data.error) {
+                flash({
+                    message: data.error,
+                    type: "error",
+                });
+            } else {
+                flash({
+                    message: "Template created",
+                    type: "success",
+                });
+                queryClient.invalidateQueries({
+                    queryKey: ["GUILD_TEMPLATES", guild],
+                });
+                setTemplateRecentlyCreated(true);
+                setTimeout(() => {
+                    setTemplateRecentlyCreated(false);
+                }, ICON_FLASH_TIME);
+            }
+        },
+    });
+
     return (
         <div class="button-row">
             <div class="button-row-reminder">
@@ -66,11 +91,26 @@ export const CreateButtonRow = () => {
             </div>
             <div class="button-row-template">
                 <div>
-                    <button class="button is-success is-outlined">
+                    <button
+                        class="button is-success is-outlined"
+                        onClick={() => {
+                            templateMutation.mutate(reminder);
+                        }}
+                    >
                         <span>Create Template</span>{" "}
-                        <span class="icon">
+                        {templateMutation.isLoading ? (
-                            <i class="fas fa-file-spreadsheet"></i>
+                            <span class="icon">
-                        </span>
+                                <i class="fas fa-spin fa-cog"></i>
+                            </span>
+                        ) : templateRecentlyCreated ? (
+                            <span class="icon">
+                                <i class="fas fa-check"></i>
+                            </span>
+                        ) : (
+                            <span class="icon">
+                                <i class="fas fa-file-spreadsheet"></i>
+                            </span>
+                        )}
                     </button>
                 </div>
                 <div>

src/components/Reminder/LoadTemplate.tsx

@@ -1,9 +1,11 @@
 import { useState } from "preact/hooks";
 import { Modal } from "../Modal";
-import { useQuery } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
-import { fetchGuildTemplates } from "../../api";
+import { deleteGuildTemplate, fetchGuildTemplates } from "../../api";
 import { useParams } from "wouter";
 import { useReminder } from "./ReminderContext";
+import { useFlash } from "../App/FlashContext";
+import { ICON_FLASH_TIME } from "../../consts";
 
 export const LoadTemplate = () => {
     const [modalOpen, setModalOpen] = useState(false);
@@ -26,9 +28,21 @@ export const LoadTemplate = () => {
 const LoadTemplateModal = ({ setModalOpen }) => {
     const { guild } = useParams();
     const [reminder, setReminder] = useReminder();
-    const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
 
     const [selected, setSelected] = useState(null);
+    const flash = useFlash();
+
+    const queryClient = useQueryClient();
+    const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
+    const mutation = useMutation({
+        ...deleteGuildTemplate(guild),
+        onSuccess: () => {
+            flash({ message: "Template deleted", type: "success" });
+            queryClient.invalidateQueries({
+                queryKey: ["GUILD_TEMPLATES", guild],
+            });
+        },
+    });
 
     return (
         <Modal setModalOpen={setModalOpen} title={"Load Template"}>
@@ -39,6 +53,7 @@ const LoadTemplateModal = ({ setModalOpen }) => {
                         onChange={(ev) => {
                             setSelected(ev.currentTarget.value);
                         }}
+                        disabled={mutation.isLoading}
                     >
                         <option disabled={true} selected={true}>
                             Choose template...
@@ -58,17 +73,39 @@ const LoadTemplateModal = ({ setModalOpen }) => {
                 <button
                     class="button is-success close-modal"
                     id="load-template"
+                    style={{ margin: "2px" }}
                     onClick={() => {
+                        const template = templates.find(
+                            (template) => template.id.toString() === selected,
+                        );
+
                         setReminder((reminder) => ({
                             ...reminder,
-                            // todo this probably needs to exclude some things
+                            ...template,
-                            ...templates.find((template) => template.id === selected),
+                            // drop the template's ID
+                            id: undefined,
                         }));
+
+                        flash({ message: "Template loaded", type: "success" });
+                        setModalOpen(false);
                     }}
+                    disabled={mutation.isLoading}
                 >
                     Load Template
                 </button>
-                <button class="button is-danger" id="delete-template">
+                <button
+                    class="button is-danger"
+                    id="delete-template"
+                    style={{ margin: "2px" }}
+                    onClick={() => {
+                        const template = templates.find(
+                            (template) => template.id.toString() === selected,
+                        );
+
+                        mutation.mutate(template);
+                    }}
+                    disabled={mutation.isLoading}
+                >
                     Delete
                 </button>
             </div>