From a770a17ee707b10023c0feb48c81a0d8518a2413 Mon Sep 17 00:00:00 2001
From: jude <jude@jellywx.com>
Date: Fri, 29 Mar 2024 16:15:01 +0000
Subject: [PATCH] Don't invalidate reminders when saving

---
 reminder-dashboard/src/api.ts                        |  2 +-
 .../src/components/Guild/GuildReminders.tsx          | 12 +++++++++---
 .../components/Reminder/ButtonRow/EditButtonRow.tsx  | 11 -----------
 .../src/components/Reminder/EditReminder.tsx         |  7 +++++--
 4 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/reminder-dashboard/src/api.ts b/reminder-dashboard/src/api.ts
index 2aad82f..4cae391 100644
--- a/reminder-dashboard/src/api.ts
+++ b/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"],
diff --git a/reminder-dashboard/src/components/Guild/GuildReminders.tsx b/reminder-dashboard/src/components/Guild/GuildReminders.tsx
index 711b132..31612c7 100644
--- a/reminder-dashboard/src/components/Guild/GuildReminders.tsx
+++ b/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 />}
diff --git a/reminder-dashboard/src/components/Reminder/ButtonRow/EditButtonRow.tsx b/reminder-dashboard/src/components/Reminder/ButtonRow/EditButtonRow.tsx
index 7668d92..10c639b 100644
--- a/reminder-dashboard/src/components/Reminder/ButtonRow/EditButtonRow.tsx
+++ b/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);
             }
diff --git a/reminder-dashboard/src/components/Reminder/EditReminder.tsx b/reminder-dashboard/src/components/Reminder/EditReminder.tsx
index c242c78..ee1f240 100644
--- a/reminder-dashboard/src/components/Reminder/EditReminder.tsx
+++ b/reminder-dashboard/src/components/Reminder/EditReminder.tsx
@@ -28,8 +28,11 @@ export const EditReminder = ({ reminder: initialReminder, globalCollapse }: Prop
     }
 
     return (
-        <ReminderContext.Provider value={[reminder, setReminder]}>
-            <div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
+        <ReminderContext.Provider value={[reminder, setReminder]} key={reminder.uid}>
+            <div
+                class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}
+                id={`reminder-${reminder.uid.slice(0, 12)}`}
+            >
                 <TopBar
                     toggleCollapsed={() => {
                         setCollapsed(!collapsed);