Message flash provider

Allows errors to be displayed neatly in ephemeral boxes at bottom of screen

src/components/Reminder/ButtonRow/CreateButtonRow.tsx

@@ -5,6 +5,7 @@ import { postGuildReminder } from "../../../api";
 import { useParams } from "wouter";
 import { useState } from "preact/hooks";
 import { ICON_FLASH_TIME } from "../../../consts";
+import { useFlash } from "../../App/FlashContext";
 
 export const CreateButtonRow = () => {
     const { guild } = useParams();
@@ -12,17 +13,22 @@ export const CreateButtonRow = () => {
 
     const [recentlyCreated, setRecentlyCreated] = useState(false);
 
+    const flash = useFlash();
     const queryClient = useQueryClient();
     const mutation = useMutation({
         ...postGuildReminder(guild),
-        onSuccess: () => {
-            queryClient.invalidateQueries({
-                queryKey: ["GUILD_REMINDERS", guild],
-            });
-            setRecentlyCreated(true);
-            setTimeout(() => {
-                setRecentlyCreated(false);
-            }, ICON_FLASH_TIME);
+        onSuccess: (data) => {
+            if (data.error) {
+                flash(data.error);
+            } else {
+                queryClient.invalidateQueries({
+                    queryKey: ["GUILD_REMINDERS", guild],
+                });
+                setRecentlyCreated(true);
+                setTimeout(() => {
+                    setRecentlyCreated(false);
+                }, ICON_FLASH_TIME);
+            }
         },
     });
 

src/components/Reminder/ButtonRow/EditButtonRow.tsx

@@ -5,14 +5,17 @@ import { useParams } from "wouter";
 import { ICON_FLASH_TIME } from "../../../consts";
 import { DeleteButton } from "./DeleteButton";
 import { useReminder } from "../ReminderContext";
+import { useFlash } from "../../App/FlashContext";
 
 export const EditButtonRow = () => {
     const { guild } = useParams();
-    const [reminder, setReminder] = useReminder();
+    const [reminder] = useReminder();
 
     const [recentlySaved, setRecentlySaved] = useState(false);
     const queryClient = useQueryClient();
 
+    const flash = useFlash();
+
     const mutation = useMutation({
         ...patchGuildReminder(guild),
         onSuccess: () => {
@@ -24,6 +27,9 @@ export const EditButtonRow = () => {
                 setRecentlySaved(false);
             }, ICON_FLASH_TIME);
         },
+        onError: (error) => {
+            flash(error);
+        },
     });
 
     return (

src/components/Reminder/EditReminder.tsx

@@ -27,7 +27,7 @@ export const EditReminder = ({ reminder: initialReminder }: Props) => {
                     <Message />
                     <Settings />
                 </div>
-                <EditButtonRow></EditButtonRow>
+                <EditButtonRow />
             </div>
         </ReminderContext.Provider>
     );

src/components/Reminder/IntervalSelector.tsx

@@ -36,9 +36,9 @@ export const IntervalSelector = ({
     useEffect(() => {
         if (seconds || minutes || hours || days || months) {
             setInterval({
-                seconds: seconds + minutes * 60 + hours * 3600,
-                days: days,
-                months: months,
+                seconds: (seconds || 0) + (minutes || 0) * 60 + (hours || 0) * 3600,
+                days: days || 0,
+                months: months || 0,
             });
         } else {
             clearInterval();