From 1ae521f56029bd973a8dc73602f8559b81efb8f9 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 24 Sep 2024 13:34:29 -0500
Subject: [PATCH] regenerate description fixes (#13940)

---
 .../overlay/detail/SearchDetailDialog.tsx     |  2 +-
 web/src/pages/Explore.tsx                     |  2 +-
 web/src/views/explore/ExploreView.tsx         | 48 +++++++++++++++----
 web/src/views/search/SearchView.tsx           |  5 +-
 4 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 296e280c7..f24e010cb 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -293,7 +293,7 @@ function ObjectDetailsTab({
             typeof key === "string" &&
             (key.includes("events") ||
               key.includes("events/search") ||
-              key.includes("explore")),
+              key.includes("events/explore")),
         );
       })
       .catch(() => {
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index d9f81c778..a653b176f 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -135,7 +135,7 @@ export default function Explore() {
         setIsSlowLoading(true);
       }
     },
-    loadingTimeout: 10000,
+    loadingTimeout: 15000,
   });
 
   const searchResults = useMemo(
diff --git a/web/src/views/explore/ExploreView.tsx b/web/src/views/explore/ExploreView.tsx
index 128b22afe..f3fb330b0 100644
--- a/web/src/views/explore/ExploreView.tsx
+++ b/web/src/views/explore/ExploreView.tsx
@@ -15,12 +15,18 @@ import { SearchResult } from "@/types/search";
 import ImageLoadingIndicator from "@/components/indicators/ImageLoadingIndicator";
 import useImageLoaded from "@/hooks/use-image-loaded";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { useEventUpdate } from "@/api/ws";
+import { isEqual } from "lodash";
 
 type ExploreViewProps = {
-  onSelectSearch: (searchResult: SearchResult, index: number) => void;
+  searchDetail: SearchResult | undefined;
+  setSearchDetail: (search: SearchResult | undefined) => void;
 };
 
-export default function ExploreView({ onSelectSearch }: ExploreViewProps) {
+export default function ExploreView({
+  searchDetail,
+  setSearchDetail,
+}: ExploreViewProps) {
   // title
 
   useEffect(() => {
@@ -29,7 +35,7 @@ export default function ExploreView({ onSelectSearch }: ExploreViewProps) {
 
   // data
 
-  const { data: events } = useSWR<SearchResult[]>(
+  const { data: events, mutate } = useSWR<SearchResult[]>(
     [
       "events/explore",
       {
@@ -53,6 +59,28 @@ export default function ExploreView({ onSelectSearch }: ExploreViewProps) {
     }, {});
   }, [events]);
 
+  const eventUpdate = useEventUpdate();
+
+  useEffect(() => {
+    mutate();
+    // mutate / revalidate when event description updates come in
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [eventUpdate]);
+
+  // update search detail when results change
+
+  useEffect(() => {
+    if (searchDetail && events) {
+      const updatedSearchDetail = events.find(
+        (result) => result.id === searchDetail.id,
+      );
+
+      if (updatedSearchDetail && !isEqual(updatedSearchDetail, searchDetail)) {
+        setSearchDetail(updatedSearchDetail);
+      }
+    }
+  }, [events, searchDetail, setSearchDetail]);
+
   if (!events) {
     return (
       <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
@@ -66,7 +94,7 @@ export default function ExploreView({ onSelectSearch }: ExploreViewProps) {
           key={label}
           searchResults={filteredEvents}
           objectType={label}
-          onSelectSearch={onSelectSearch}
+          setSearchDetail={setSearchDetail}
         />
       ))}
     </div>
@@ -76,13 +104,13 @@ export default function ExploreView({ onSelectSearch }: ExploreViewProps) {
 type ThumbnailRowType = {
   objectType: string;
   searchResults?: SearchResult[];
-  onSelectSearch: (searchResult: SearchResult, index: number) => void;
+  setSearchDetail: (search: SearchResult | undefined) => void;
 };
 
 function ThumbnailRow({
   objectType,
   searchResults,
-  onSelectSearch,
+  setSearchDetail,
 }: ThumbnailRowType) {
   const navigate = useNavigate();
 
@@ -116,7 +144,7 @@ function ThumbnailRow({
           >
             <ExploreThumbnailImage
               event={event}
-              onSelectSearch={onSelectSearch}
+              setSearchDetail={setSearchDetail}
             />
           </div>
         ))}
@@ -145,11 +173,11 @@ function ThumbnailRow({
 
 type ExploreThumbnailImageProps = {
   event: SearchResult;
-  onSelectSearch: (searchResult: SearchResult, index: number) => void;
+  setSearchDetail: (search: SearchResult | undefined) => void;
 };
 function ExploreThumbnailImage({
   event,
-  onSelectSearch,
+  setSearchDetail,
 }: ExploreThumbnailImageProps) {
   const apiHost = useApiHost();
   const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
@@ -176,7 +204,7 @@ function ExploreThumbnailImage({
         loading={isSafari ? "eager" : "lazy"}
         draggable={false}
         src={`${apiHost}api/events/${event.id}/thumbnail.jpg`}
-        onClick={() => onSelectSearch(event, 0)}
+        onClick={() => setSearchDetail(event)}
         onLoad={() => {
           onImgLoad();
         }}
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index 67b807bf9..8faae24b4 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -398,7 +398,10 @@ export default function SearchView({
         Object.keys(searchFilter).length === 0 &&
         !searchTerm && (
           <div className="scrollbar-container flex size-full flex-col overflow-y-auto">
-            <ExploreView onSelectSearch={onSelectSearch} />
+            <ExploreView
+              searchDetail={searchDetail}
+              setSearchDetail={setSearchDetail}
+            />
           </div>
         )}
     </div>