Merge pull request #571 from Fallenbagel/fix-local-watchlist-page-item-removal

fix: ensure watchlist updates are immediately reflected

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