From b85d7f37b931735ca2ad955dccb6599bf445fc73 Mon Sep 17 00:00:00 2001
From: fallenbagel <98979876+Fallenbagel@users.noreply.github.com>
Date: Sun, 19 Nov 2023 16:25:34 +0500
Subject: [PATCH] fix: ensure watchlist updates are immediately reflected

This fix addresses an issue on the Watchlist page where changes to the watchlist were not
immediately reflected. Previously, after removing an item from the watchlist, the update
required a full page reload or revalidating upon focusing the window or tab. With this fix,
the watchlist now correctly mutates and updates in real-time, providing a seamless user
experience.
---
 src/components/Common/ListView/index.tsx            | 3 +++
 src/components/Discover/DiscoverWatchlist/index.tsx | 2 ++
 src/components/TitleCard/TmdbTitleCard.tsx          | 4 ++++
 src/components/TitleCard/index.tsx                  | 5 +++++
 src/hooks/useDiscover.ts                            | 4 +++-
 5 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/Common/ListView/index.tsx b/src/components/Common/ListView/index.tsx
index 47140c5db..46c946ae2 100644
--- a/src/components/Common/ListView/index.tsx
+++ b/src/components/Common/ListView/index.tsx
@@ -19,6 +19,7 @@ type ListViewProps = {
   isLoading?: boolean;
   isReachingEnd?: boolean;
   onScrollBottom: () => void;
+  mutateParent?: () => void;
 };
 
 const ListView = ({
@@ -28,6 +29,7 @@ const ListView = ({
   onScrollBottom,
   isReachingEnd,
   plexItems,
+  mutateParent,
 }: ListViewProps) => {
   const intl = useIntl();
   useVerticalScroll(onScrollBottom, !isLoading && !isEmpty && !isReachingEnd);
@@ -48,6 +50,7 @@ const ListView = ({
                 type={title.mediaType}
                 isAddedToWatchlist={true}
                 canExpand
+                mutateParent={mutateParent}
               />
             </li>
           );
diff --git a/src/components/Discover/DiscoverWatchlist/index.tsx b/src/components/Discover/DiscoverWatchlist/index.tsx
index 775da757a..61d4f5c44 100644
--- a/src/components/Discover/DiscoverWatchlist/index.tsx
+++ b/src/components/Discover/DiscoverWatchlist/index.tsx
@@ -30,6 +30,7 @@ const DiscoverWatchlist = () => {
     titles,
     fetchMore,
     error,
+    mutate,
   } = useDiscover<WatchlistItem>(
     `/api/v1/${
       router.pathname.startsWith('/profile')
@@ -76,6 +77,7 @@ const DiscoverWatchlist = () => {
         }
         isReachingEnd={isReachingEnd}
         onScrollBottom={fetchMore}
+        mutateParent={mutate}
       />
     </>
   );
diff --git a/src/components/TitleCard/TmdbTitleCard.tsx b/src/components/TitleCard/TmdbTitleCard.tsx
index 0764f3aa1..825e52ccf 100644
--- a/src/components/TitleCard/TmdbTitleCard.tsx
+++ b/src/components/TitleCard/TmdbTitleCard.tsx
@@ -12,6 +12,7 @@ export interface TmdbTitleCardProps {
   type: 'movie' | 'tv';
   canExpand?: boolean;
   isAddedToWatchlist?: boolean;
+  mutateParent?: () => void;
 }
 
 const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
@@ -25,6 +26,7 @@ const TmdbTitleCard = ({
   type,
   canExpand,
   isAddedToWatchlist = false,
+  mutateParent,
 }: TmdbTitleCardProps) => {
   const { hasPermission } = useUser();
 
@@ -71,6 +73,7 @@ const TmdbTitleCard = ({
       year={title.releaseDate}
       mediaType={'movie'}
       canExpand={canExpand}
+      mutateParent={mutateParent}
     />
   ) : (
     <TitleCard
@@ -87,6 +90,7 @@ const TmdbTitleCard = ({
       year={title.firstAirDate}
       mediaType={'tv'}
       canExpand={canExpand}
+      mutateParent={mutateParent}
     />
   );
 };
diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index 410036cca..30a62c16e 100644
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -38,6 +38,7 @@ interface TitleCardProps {
   canExpand?: boolean;
   inProgress?: boolean;
   isAddedToWatchlist?: number | boolean;
+  mutateParent?: () => void;
 }
 
 const messages = defineMessages({
@@ -61,6 +62,7 @@ const TitleCard = ({
   isAddedToWatchlist = false,
   inProgress = false,
   canExpand = false,
+  mutateParent,
 }: TitleCardProps) => {
   const isTouch = useIsTouch();
   const intl = useIntl();
@@ -148,6 +150,9 @@ const TitleCard = ({
     } finally {
       setIsUpdating(false);
       mutate('/api/v1/discover/watchlist');
+      if (mutateParent) {
+        mutateParent();
+      }
       setToggleWatchlist((prevState) => !prevState);
     }
   };
diff --git a/src/hooks/useDiscover.ts b/src/hooks/useDiscover.ts
index f9aff8e29..2a2acd02f 100644
--- a/src/hooks/useDiscover.ts
+++ b/src/hooks/useDiscover.ts
@@ -25,6 +25,7 @@ interface DiscoverResult<T, S> {
   error: unknown;
   titles: T[];
   firstResultData?: BaseSearchResult<T> & S;
+  mutate?: () => void;
 }
 
 const extraEncodes: [RegExp, string][] = [
@@ -54,7 +55,7 @@ const useDiscover = <
   { hideAvailable = true } = {}
 ): DiscoverResult<T, S> => {
   const settings = useSettings();
-  const { data, error, size, setSize, isValidating } = useSWRInfinite<
+  const { data, error, size, setSize, isValidating, mutate } = useSWRInfinite<
     BaseSearchResult<T> & S
   >(
     (pageIndex: number, previousPageData) => {
@@ -119,6 +120,7 @@ const useDiscover = <
     error,
     titles,
     firstResultData: data?.[0],
+    mutate,
   };
 };