From e724b7358192edce34afe68297b7dd7e0540ad61 Mon Sep 17 00:00:00 2001
From: Zak Nesler <zak@nesler.dev>
Date: Thu, 23 May 2024 13:57:31 -0400
Subject: [PATCH] debounce stats invalidation

---
 ui/src/components/entry/entry-panel.tsx      |  4 +++-
 ui/src/components/modals/create-feed.tsx     |  5 +++--
 ui/src/hooks/queries/use-invalidate-stats.ts | 20 ++++++++++++++++++++
 3 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 ui/src/hooks/queries/use-invalidate-stats.ts

diff --git a/ui/src/components/entry/entry-panel.tsx b/ui/src/components/entry/entry-panel.tsx
index 463de366..95f47e83 100644
--- a/ui/src/components/entry/entry-panel.tsx
+++ b/ui/src/components/entry/entry-panel.tsx
@@ -10,11 +10,13 @@ import { useFilterParams } from '~/hooks/use-filter-params';
 import { Empty } from '../ui/empty';
 import { useViewport } from '~/hooks/use-viewport';
 import { Spinner } from '../ui/spinner';
+import { useInvalidateStats } from '~/hooks/queries/use-invalidate-stats';
 
 export const EntryPanel = () => {
   const filter = useFilterParams();
   const queryClient = useQueryClient();
   const { gtBreakpoint } = useViewport();
+  const invalidateStats = useInvalidateStats();
 
   const entry = createQuery(() => ({
     enabled: !!filter.params.entry_uuid,
@@ -33,7 +35,7 @@ export const EntryPanel = () => {
     if (!entry.isSuccess || !entry.data || entry.data.read_at) return;
 
     markAsRead.mutateAsync(entry.data.uuid).then(() => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.FEEDS_STATS] });
+      invalidateStats();
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.ENTRIES_VIEW, entry.data.uuid] });
     });
   });
diff --git a/ui/src/components/modals/create-feed.tsx b/ui/src/components/modals/create-feed.tsx
index 77b37ebc..e54f6999 100644
--- a/ui/src/components/modals/create-feed.tsx
+++ b/ui/src/components/modals/create-feed.tsx
@@ -21,7 +21,7 @@ export const CreateFeed: Component<CreateFeedProps> = props => {
   const navigate = useNavigate();
 
   const [open, setOpen] = createSignal(false);
-  const [value, setValue] = createSignal('https://blog.rust-lang.org/feed.xml');
+  const [value, setValue] = createSignal('');
   const [inputElement, setInputElement] = createSignal<HTMLDivElement>();
 
   const add = createMutation(() => ({
@@ -40,8 +40,9 @@ export const CreateFeed: Component<CreateFeedProps> = props => {
     const feed = await add.mutateAsync({ url: value() });
     queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.FEEDS] });
     navigate(`/feeds/${feed.uuid}`);
-    add.reset();
     setOpen(false);
+    add.reset();
+    setValue('');
   };
 
   const handleOpenAutoFocus = (event: Event) => {
diff --git a/ui/src/hooks/queries/use-invalidate-stats.ts b/ui/src/hooks/queries/use-invalidate-stats.ts
new file mode 100644
index 00000000..29e93ce9
--- /dev/null
+++ b/ui/src/hooks/queries/use-invalidate-stats.ts
@@ -0,0 +1,20 @@
+import { debounce, leadingAndTrailing } from '@solid-primitives/scheduled';
+import { QUERY_KEYS } from '~/constants/query';
+import { useQueryClient } from '@tanstack/solid-query';
+
+const DEBOUNCE_MS = 500;
+
+/**
+ * Invalidate all stats.
+ */
+export const useInvalidateStats = () => {
+  const queryClient = useQueryClient();
+
+  return leadingAndTrailing(
+    debounce,
+    () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.FEEDS_STATS] });
+    },
+    DEBOUNCE_MS,
+  );
+};