Remember Upcoming Anime Panel Selection. (#1169)

ShokoAnime · Jan 19, 2025 · 0ed285f · 0ed285f
1 parent 2caec95
commit 0ed285f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/core/react-query/settings/helpers.ts b/src/core/react-query/settings/helpers.ts
@@ -310,6 +310,7 @@ export const initialSettings: SettingsType = {
       recentlyImportedEpisodesCount: 30,
       recentlyImportedSeriesCount: 20,
       recentlyImportedView: 'episodes',
+      upcomingAnimeView: 'collection',
     },
   },
   FirstRun: false,

diff --git a/src/core/types/api/settings.ts b/src/core/types/api/settings.ts
@@ -432,6 +432,7 @@ export type WebUISettingsType = {
     recentlyImportedEpisodesCount: number;
     recentlyImportedSeriesCount: number;
     recentlyImportedView: 'episodes' | 'series';
+    upcomingAnimeView: 'collection' | 'all';
   };
 };
 

diff --git a/src/pages/dashboard/panels/UpcomingAnime.tsx b/src/pages/dashboard/panels/UpcomingAnime.tsx
@@ -1,34 +1,45 @@
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
+import { produce } from 'immer';
 import { map } from 'lodash';
 
 import MultiStateButton from '@/components/Input/MultiStateButton';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
 import TransitionDiv from '@/components/TransitionDiv';
 import { useDashboardCalendarQuery } from '@/core/react-query/dashboard/queries';
+import { usePatchSettingsMutation } from '@/core/react-query/settings/mutations';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
 import useEventCallback from '@/hooks/useEventCallback';
 import EpisodeDetails from '@/pages/dashboard/components/EpisodeDetails';
 
 import type { RootState } from '@/core/store';
 
-type TabType = 'collection_only' | 'all';
+type TabType = 'collection' | 'all';
 const tabStates: { label?: string, value: TabType }[] = [
-  { label: 'My Collection', value: 'collection_only' },
+  { label: 'My Collection', value: 'collection' },
   { label: 'All', value: 'all' },
 ];
 
 const UpcomingAnime = () => {
   const layoutEditMode = useSelector((state: RootState) => state.mainpage.layoutEditMode);
 
-  const [currentTab, setCurrentTab] = useState<TabType>(tabStates[0].value);
-  const handleTabChange = useEventCallback((newTab: TabType) => setCurrentTab(newTab));
+  const settings = useSettingsQuery().data;
+  const { hideR18Content, upcomingAnimeView } = useSettingsQuery().data.WebUI_Settings.dashboard;
+  const { mutate: patchSettings } = usePatchSettingsMutation();
 
-  const { hideR18Content } = useSettingsQuery().data.WebUI_Settings.dashboard;
+  const [currentTab, setCurrentTab] = useState<TabType>(upcomingAnimeView);
 
   const calendarQuery = useDashboardCalendarQuery({ showAll: false, includeRestricted: !hideR18Content });
   const calendarAllQuery = useDashboardCalendarQuery({ showAll: true, includeRestricted: !hideR18Content });
 
+  const handleTabChange = useEventCallback((newTab: TabType) => {
+    setCurrentTab(newTab);
+    const newSettings = produce(settings, (draftState) => {
+      draftState.WebUI_Settings.dashboard.upcomingAnimeView = newTab;
+    });
+    patchSettings({ newSettings });
+  });
+
   return (
     <ShokoPanel
       title="Upcoming Anime"