Don't invalidate reminders when saving

reminder-dashboard/src/api.ts

@@ -81,7 +81,7 @@ type Template = {
 
 const USER_INFO_STALE_TIME = 120_000;
 const GUILD_INFO_STALE_TIME = 300_000;
-const OTHER_STALE_TIME = 15_000;
+const OTHER_STALE_TIME = 120_000;
 
 export const fetchUserInfo = () => ({
     queryKey: ["USER_INFO"],

reminder-dashboard/src/components/Guild/GuildReminders.tsx

@@ -1,8 +1,8 @@
-import { useQuery } from "react-query";
+import { useQuery, useQueryClient } from "react-query";
 import { fetchGuildChannels, fetchGuildReminders } from "../../api";
 import { EditReminder } from "../Reminder/EditReminder";
 import { CreateReminder } from "../Reminder/CreateReminder";
-import { useState } from "preact/hooks";
+import { useCallback, useState } from "preact/hooks";
 import { Loader } from "../Loader";
 import { useGuild } from "../App/useGuild";
 
@@ -24,10 +24,16 @@ export const GuildReminders = () => {
     const { data: channels } = useQuery(fetchGuildChannels(guild));
 
     const [collapsed, setCollapsed] = useState(false);
-    const [sort, setSort] = useState(Sort.Time);
+    const [sort, _setSort] = useState(Sort.Time);
+    const queryClient = useQueryClient();
 
     let prevReminder = null;
 
+    const setSort = useCallback((sort) => {
+        queryClient.invalidateQueries(["GUILD_REMINDERS"]);
+        _setSort(sort);
+    }, []);
+
     return (
         <>
             {!isFetched && <Loader />}

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

@@ -12,7 +12,6 @@ export const EditButtonRow = () => {
     const [reminder, setReminder] = useReminder();
 
     const [recentlySaved, setRecentlySaved] = useState(false);
-    const queryClient = useQueryClient();
 
     const iconFlashTimeout = useRef(0);
 
@@ -26,16 +25,6 @@ export const EditButtonRow = () => {
             });
         },
         onSuccess: (response) => {
-            if (guild) {
-                queryClient.invalidateQueries({
-                    queryKey: ["GUILD_REMINDERS", guild],
-                });
-            } else {
-                queryClient.invalidateQueries({
-                    queryKey: ["USER_REMINDERS"],
-                });
-            }
-
             if (iconFlashTimeout.current !== null) {
                 clearTimeout(iconFlashTimeout.current);
             }

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

@@ -28,8 +28,11 @@ export const EditReminder = ({ reminder: initialReminder, globalCollapse }: Prop
     }
 
     return (
-        <ReminderContext.Provider value={[reminder, setReminder]}>
+        <ReminderContext.Provider value={[reminder, setReminder]} key={reminder.uid}>
-            <div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
+            <div
+                class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}
+                id={`reminder-${reminder.uid.slice(0, 12)}`}
+            >
                 <TopBar
                     toggleCollapsed={() => {
                         setCollapsed(!collapsed);