diff --git a/src/core/react-query/settings/helpers.ts b/src/core/react-query/settings/helpers.ts index 362c13db..cc7c48b8 100644 --- 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 index ba046587..d8b3f07c 100644 --- 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 index 80ec5076..136708c4 100644 --- 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(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(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 (