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

@@ -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>
           );

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}
       />
     </>
   );

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}
     />
   );
 };

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);
     }
   };

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,
   };
 };