Add routes for getting/posting user reminders

reminder-dashboard/src/api.ts

@@ -182,3 +182,8 @@ export const fetchUserReminders = () => ({
         axios.get(`/dashboard/api/user/reminders`).then((resp) => resp.data) as Promise<Reminder[]>,
     staleTime: OTHER_STALE_TIME,
 });
+
+export const postUserReminder = () => ({
+    mutationFn: (reminder: Reminder) =>
+        axios.post(`/dashboard/api/user/reminders`, reminder).then((resp) => resp.data),
+});

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

@@ -1,14 +1,15 @@
 import { LoadTemplate } from "../LoadTemplate";
 import { useReminder } from "../ReminderContext";
 import { useMutation, useQueryClient } from "react-query";
-import { postGuildReminder, postGuildTemplate } from "../../../api";
+import { postGuildReminder, postGuildTemplate, postUserReminder } from "../../../api";
 import { useParams } from "wouter";
 import { useState } from "preact/hooks";
 import { ICON_FLASH_TIME } from "../../../consts";
 import { useFlash } from "../../App/FlashContext";
+import { useGuild } from "../../App/useGuild";
 
 export const CreateButtonRow = () => {
-    const { guild } = useParams();
+    const guild = useGuild();
     const [reminder] = useReminder();
 
     const [recentlyCreated, setRecentlyCreated] = useState(false);
@@ -17,7 +18,7 @@ export const CreateButtonRow = () => {
     const flash = useFlash();
     const queryClient = useQueryClient();
     const mutation = useMutation({
-        ...postGuildReminder(guild),
+        ...(guild ? postGuildReminder(guild) : postUserReminder()),
         onSuccess: (data) => {
             if (data.error) {
                 flash({
@@ -29,9 +30,15 @@ export const CreateButtonRow = () => {
                     message: "Reminder created",
                     type: "success",
                 });
-                queryClient.invalidateQueries({
-                    queryKey: ["GUILD_REMINDERS", guild],
-                });
+                if (guild) {
+                    queryClient.invalidateQueries({
+                        queryKey: ["GUILD_REMINDERS", guild],
+                    });
+                } else {
+                    queryClient.invalidateQueries({
+                        queryKey: ["USER_REMINDERS"],
+                    });
+                }
                 setRecentlyCreated(true);
                 setTimeout(() => {
                     setRecentlyCreated(false);

reminder-dashboard/src/components/Reminder/CreateReminder.tsx

@@ -9,6 +9,7 @@ import { ReminderContext } from "./ReminderContext";
 import { useQuery } from "react-query";
 import { useParams } from "wouter";
 import "./styles.scss";
+import { useGuild } from "../App/useGuild";
 
 function defaultReminder(): Reminder {
     return {
@@ -42,7 +43,7 @@ function defaultReminder(): Reminder {
 }
 
 export const CreateReminder = () => {
-    const { guild } = useParams();
+    const guild = useGuild();
 
     const [reminder, setReminder] = useState(defaultReminder());
     const [collapsed, setCollapsed] = useState(false);

reminder-dashboard/src/components/Reminder/Settings.tsx

@@ -7,8 +7,10 @@ import { useReminder } from "./ReminderContext";
 import { Attachment } from "./Attachment";
 import { TTS } from "./TTS";
 import { TimeInput } from "./TimeInput";
+import { useGuild } from "../App/useGuild";
 
 export const Settings = () => {
+    const guild = useGuild();
     const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
 
     const [reminder, setReminder] = useReminder();
@@ -19,22 +21,24 @@ export const Settings = () => {
 
     return (
         <div class="column settings">
-            <div class="field channel-field">
-                <div class="collapses">
-                    <label class="label" for="channelOption">
-                        Channel*
-                    </label>
+            {guild && (
+                <div class="field channel-field">
+                    <div class="collapses">
+                        <label class="label" for="channelOption">
+                            Channel*
+                        </label>
+                    </div>
+                    <ChannelSelector
+                        channel={reminder.channel}
+                        setChannel={(channel: string) => {
+                            setReminder((reminder) => ({
+                                ...reminder,
+                                channel: channel,
+                            }));
+                        }}
+                    />
                 </div>
-                <ChannelSelector
-                    channel={reminder.channel}
-                    setChannel={(channel: string) => {
-                        setReminder((reminder) => ({
-                            ...reminder,
-                            channel: channel,
-                        }));
-                    }}
-                />
-            </div>
+            )}
 
             <div class="field">
                 <div class="control">