Working to feature parity

src/components/Reminder/ButtonRow/CreateButtonRow.tsx

@@ -19,8 +19,15 @@ export const CreateButtonRow = () => {
         ...postGuildReminder(guild),
         onSuccess: (data) => {
             if (data.error) {
-                flash(data.error);
+                flash({
+                    message: data.error,
+                    type: "error",
+                });
             } else {
+                flash({
+                    message: "Reminder created",
+                    type: "success",
+                });
                 queryClient.invalidateQueries({
                     queryKey: ["GUILD_REMINDERS", guild],
                 });

src/components/Reminder/ButtonRow/DeleteButton.tsx

@@ -4,6 +4,7 @@ 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);
@@ -27,10 +28,15 @@ 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],
             });

src/components/Reminder/ButtonRow/EditButtonRow.tsx

@@ -14,8 +14,6 @@ export const EditButtonRow = () => {
     const [recentlySaved, setRecentlySaved] = useState(false);
     const queryClient = useQueryClient();
 
-    const flash = useFlash();
-
     const mutation = useMutation({
         ...patchGuildReminder(guild),
         onSuccess: () => {
@@ -27,9 +25,6 @@ export const EditButtonRow = () => {
                 setRecentlySaved(false);
             }, ICON_FLASH_TIME);
         },
-        onError: (error) => {
-            flash(error);
-        },
     });
 
     return (

src/components/Reminder/LoadTemplate.tsx

@@ -25,14 +25,25 @@ export const LoadTemplate = () => {
 
 const LoadTemplateModal = ({ setModalOpen }) => {
     const { guild } = useParams();
-    const { status, data: templates } = useQuery(fetchGuildTemplates(guild));
+    const [reminder, setReminder] = useReminder();
+    const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
+
+    const [selected, setSelected] = useState(null);
 
     return (
         <Modal setModalOpen={setModalOpen} title={"Load Template"}>
             <div class="control has-icons-left">
                 <div class="select is-fullwidth">
-                    <select id="templateSelect">
-                        {templates !== undefined &&
+                    <select
+                        id="templateSelect"
+                        onChange={(ev) => {
+                            setSelected(ev.currentTarget.value);
+                        }}
+                    >
+                        <option disabled={true} selected={true}>
+                            Choose template...
+                        </option>
+                        {isSuccess &&
                             templates.map((template) => (
                                 <option value={template.id}>{template.name}</option>
                             ))}
@@ -44,7 +55,17 @@ const LoadTemplateModal = ({ setModalOpen }) => {
             </div>
             <br></br>
             <div class="has-text-centered">
-                <button class="button is-success close-modal" id="load-template">
+                <button
+                    class="button is-success close-modal"
+                    id="load-template"
+                    onClick={() => {
+                        setReminder((reminder) => ({
+                            ...reminder,
+                            // todo this probably needs to exclude some things
+                            ...templates.find((template) => template.id === selected),
+                        }));
+                    }}
+                >
                     Load Template
                 </button>
                 <button class="button is-danger" id="delete-template">