From b9d3ad126b137690455d735ca05d9c51b21ea396 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 24 Sep 2024 07:34:08 -0500
Subject: [PATCH] revalidation and mutation

---
 .../overlay/detail/SearchDetailDialog.tsx     | 37 ++++++++++++++-----
 web/src/pages/Explore.tsx                     | 35 ++++++++++++------
 2 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 703f9d13a..296e280c7 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -45,6 +45,8 @@ import {
 import { ReviewSegment } from "@/types/review";
 import { useNavigate } from "react-router-dom";
 import Chip from "@/components/indicators/Chip";
+import { capitalizeFirstLetter } from "@/utils/stringUtil";
+import useGlobalMutation from "@/hooks/use-global-mutate";
 
 const SEARCH_TABS = [
   "details",
@@ -232,6 +234,10 @@ function ObjectDetailsTab({
 }: ObjectDetailsTabProps) {
   const apiHost = useApiHost();
 
+  // mutation / revalidation
+
+  const mutate = useGlobalMutation();
+
   // data
 
   const [desc, setDesc] = useState(search?.data.description);
@@ -282,6 +288,13 @@ function ObjectDetailsTab({
             position: "top-center",
           });
         }
+        mutate(
+          (key) =>
+            typeof key === "string" &&
+            (key.includes("events") ||
+              key.includes("events/search") ||
+              key.includes("explore")),
+        );
       })
       .catch(() => {
         toast.error("Failed to update the description", {
@@ -289,7 +302,7 @@ function ObjectDetailsTab({
         });
         setDesc(search.data.description);
       });
-  }, [desc, search]);
+  }, [desc, search, mutate]);
 
   const regenerateDescription = useCallback(() => {
     if (!search) {
@@ -300,18 +313,24 @@ function ObjectDetailsTab({
       .put(`events/${search.id}/description/regenerate`)
       .then((resp) => {
         if (resp.status == 200) {
-          toast.success("Description regeneration requested.", {
-            position: "top-center",
-          });
+          toast.success(
+            `A new description has been requested from ${capitalizeFirstLetter(config?.genai.provider ?? "Generative AI")}. Depending on the speed of your provider, the new description may take some time to regenerate.`,
+            {
+              position: "top-center",
+              duration: 7000,
+            },
+          );
         }
       })
       .catch(() => {
-        toast.error("Failed to call generative AI for a new description", {
-          position: "top-center",
-        });
-        setDesc(search.data.description);
+        toast.error(
+          `Failed to call ${capitalizeFirstLetter(config?.genai.provider ?? "Generative AI")} for a new description`,
+          {
+            position: "top-center",
+          },
+        );
       });
-  }, [search]);
+  }, [search, config]);
 
   return (
     <div className="flex flex-col gap-5">
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index a1be7badc..d9f81c778 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -1,3 +1,4 @@
+import { useEventUpdate } from "@/api/ws";
 import { useApiFilterArgs } from "@/hooks/use-api-filter";
 import { SearchFilter, SearchQuery, SearchResult } from "@/types/search";
 import SearchView from "@/views/search/SearchView";
@@ -123,19 +124,19 @@ export default function Explore() {
     return [url, { ...params, limit: API_LIMIT }];
   };
 
-  const { data, size, setSize, isValidating } = useSWRInfinite<SearchResult[]>(
-    getKey,
-    {
-      revalidateFirstPage: true,
-      revalidateAll: false,
-      onLoadingSlow: () => {
-        if (!similaritySearch) {
-          setIsSlowLoading(true);
-        }
-      },
-      loadingTimeout: 10000,
+  const { data, size, setSize, isValidating, mutate } = useSWRInfinite<
+    SearchResult[]
+  >(getKey, {
+    revalidateFirstPage: true,
+    revalidateOnFocus: true,
+    revalidateAll: false,
+    onLoadingSlow: () => {
+      if (!similaritySearch) {
+        setIsSlowLoading(true);
+      }
     },
-  );
+    loadingTimeout: 10000,
+  });
 
   const searchResults = useMemo(
     () => (data ? ([] as SearchResult[]).concat(...data) : []),
@@ -164,6 +165,16 @@ export default function Explore() {
     }
   }, [isReachingEnd, isLoadingMore, setSize, size, searchResults, searchQuery]);
 
+  // mutation and revalidation
+
+  const eventUpdate = useEventUpdate();
+
+  useEffect(() => {
+    mutate();
+    // mutate / revalidate when event description updates come in
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [eventUpdate]);
+
   return (
     <>
       {isSlowLoading && !similaritySearch ? (