From 5c1e42b59533b338397b06a546cec8c15fd6d818 Mon Sep 17 00:00:00 2001
From: Harshith Mohan <gharshitmohan@ymail.com>
Date: Tue, 21 Nov 2023 10:22:50 +0530
Subject: [PATCH] Add `Mark filtered as watched` functionality

---
 src/core/rtkQuery/splitV3Api/seriesApi.ts     | 21 ++++++++--
 .../collection/series/SeriesEpisodes.tsx      | 41 +++++++++++++++----
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/core/rtkQuery/splitV3Api/seriesApi.ts b/src/core/rtkQuery/splitV3Api/seriesApi.ts
index 309ebd3de..f1b5ec214 100644
--- a/src/core/rtkQuery/splitV3Api/seriesApi.ts
+++ b/src/core/rtkQuery/splitV3Api/seriesApi.ts
@@ -24,16 +24,20 @@ type SeriesImagesQueryResultType = {
   Fanarts: ImageType[];
 };
 
-export type SeriesEpisodesQueryType = {
+type SeriesEpisodesQueryBaseType = {
   seriesID: number;
   includeMissing?: string;
   includeHidden?: string;
-  includeDataFrom?: DataSourceType[];
   includeWatched?: string;
   type?: string;
   search?: string;
   fuzzy?: boolean;
-} & PaginationType;
+};
+
+export type SeriesEpisodesQueryType =
+  & SeriesEpisodesQueryBaseType
+  & { includeDataFrom?: DataSourceType[] }
+  & PaginationType;
 
 export type SeriesAniDBEpisodesQueryType = {
   anidbID: number;
@@ -81,6 +85,16 @@ const seriesApi = splitV3Api.injectEndpoints({
       providesTags: ['SeriesEpisodes', 'UtilitiesRefresh'],
     }),
 
+    // Toggles the watched state for all the episodes that fit the query.
+    setSeriesEpisodesWatched: build.mutation<void, SeriesEpisodesQueryBaseType & { value: boolean }>({
+      query: ({ seriesID, ...params }) => ({
+        url: `Series/${seriesID}/Episode/Watched`,
+        method: 'POST',
+        params,
+      }),
+      invalidatesTags: ['EpisodeUpdated', 'SeriesEpisodes'],
+    }),
+
     getSeriesAniDBEpisodes: build.query<ListResultType<EpisodeAniDBType[]>, SeriesAniDBEpisodesQueryType>({
       query: ({ anidbID, ...params }) => ({ url: `Series/AniDB/${anidbID}/Episode`, params }),
       providesTags: ['SeriesEpisodes', 'UtilitiesRefresh'],
@@ -276,4 +290,5 @@ export const {
   useRefreshSeriesTvdbInfoMutation,
   useRehashSeriesFilesMutation,
   useRescanSeriesFilesMutation,
+  useSetSeriesEpisodesWatchedMutation,
 } = seriesApi;
diff --git a/src/pages/collection/series/SeriesEpisodes.tsx b/src/pages/collection/series/SeriesEpisodes.tsx
index 0c2540d04..22a3482c7 100644
--- a/src/pages/collection/series/SeriesEpisodes.tsx
+++ b/src/pages/collection/series/SeriesEpisodes.tsx
@@ -7,10 +7,16 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { debounce, toNumber } from 'lodash';
 
 import SeriesEpisode from '@/components/Collection/Series/SeriesEpisode';
+import Button from '@/components/Input/Button';
 import Input from '@/components/Input/Input';
 import Select from '@/components/Input/Select';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
-import { useGetSeriesQuery, useLazyGetSeriesEpisodesInfiniteQuery } from '@/core/rtkQuery/splitV3Api/seriesApi';
+import toast from '@/components/Toast';
+import {
+  useGetSeriesQuery,
+  useLazyGetSeriesEpisodesInfiniteQuery,
+  useSetSeriesEpisodesWatchedMutation,
+} from '@/core/rtkQuery/splitV3Api/seriesApi';
 
 const pageSize = 26;
 
@@ -27,6 +33,8 @@ const SeriesEpisodes = () => {
     refetchOnMountOrArgChange: false,
     skip: !seriesId,
   });
+  const [setEpisodesWatched] = useSetSeriesEpisodesWatchedMutation();
+
   const animeId = useMemo(() => seriesData?.data?.IDs.AniDB ?? 0, [seriesData]);
   const episodePages = episodesData.data?.pages ?? {};
   const episodeTotal = episodesData.data?.total ?? 0;
@@ -75,6 +83,23 @@ const SeriesEpisodes = () => {
     return () => fetchPage.cancel();
   }, [search, episodeFilterAvailability, episodeFilterType, episodeFilterWatched, fetchPage]);
 
+  const handleMarkWatched = async (watched: boolean) => {
+    try {
+      await setEpisodesWatched({
+        seriesID: toNumber(seriesId),
+        includeMissing: episodeFilterAvailability,
+        includeHidden: episodeFilterHidden,
+        type: episodeFilterType,
+        includeWatched: episodeFilterWatched,
+        value: watched,
+      }).unwrap();
+      toast.success(`Episodes marked as ${watched ? 'watched' : 'unwatched'}!`);
+    } catch (error) {
+      console.error(error);
+      toast.error(`Failed to mark episodes as ${watched ? 'watched' : 'unwatched'}!`);
+    }
+  };
+
   return (
     <div className="flex gap-x-8">
       <ShokoPanel title="Search & Filter" className="sticky top-0 w-[25rem]" transparent contentClassName="gap-y-8">
@@ -142,15 +167,15 @@ const SeriesEpisodes = () => {
             </span>
             Entries Listed
           </div>
-          <div className="flex gap-x-3">
-            <div className="flex gap-x-2">
+          <div className="flex gap-x-6">
+            <Button className="flex gap-x-2 !font-normal" onClick={() => handleMarkWatched(true)}>
               <Icon path={mdiEyeCheckOutline} size={1} />
-              <span>Mark Filtered As Watched</span>
-            </div>
-            <div className="flex gap-x-2">
+              Mark Filtered As Watched
+            </Button>
+            <Button className="flex gap-x-2 !font-normal" onClick={() => handleMarkWatched(false)}>
               <Icon path={mdiEyeOutline} size={1} />
-              <span>Mark Filtered Unwatched</span>
-            </div>
+              Mark Filtered Unwatched
+            </Button>
           </div>
         </div>
         {episodeTotal !== 0 && (