fix(discover): preserve trending filters on back navigation

src/components/Discover/Trending.tsx

@@ -2,6 +2,7 @@ import Header from '@app/components/Common/Header';
 import ListView from '@app/components/Common/ListView';
 import PageTitle from '@app/components/Common/PageTitle';
 import useDiscover from '@app/hooks/useDiscover';
+import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
 import globalMessages from '@app/i18n/globalMessages';
 import ErrorPage from '@app/pages/_error';
 import defineMessages from '@app/utils/defineMessages';
@@ -11,7 +12,7 @@ import type {
   PersonResult,
   TvResult,
 } from '@server/models/Search';
-import { useState } from 'react';
+import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
 
 const messages = defineMessages('components.Discover', {
@@ -24,10 +25,26 @@ type MediaType = 'all' | 'movie' | 'tv';
 
 type TimeWindow = 'day' | 'week';
 
+const parseMediaType = (value: string | string[] | undefined): MediaType => {
+  const mediaType = Array.isArray(value) ? value[0] : value;
+
+  return mediaType === 'movie' || mediaType === 'tv' || mediaType === 'all'
+    ? mediaType
+    : 'all';
+};
+
+const parseTimeWindow = (value: string | string[] | undefined): TimeWindow => {
+  const timeWindow = Array.isArray(value) ? value[0] : value;
+
+  return timeWindow === 'week' || timeWindow === 'day' ? timeWindow : 'day';
+};
+
 const Trending = () => {
   const intl = useIntl();
-  const [currentMediaType, setCurrentMediaType] = useState<MediaType>('all');
-  const [currentTimeWindow, setCurrentTimeWindow] = useState<TimeWindow>('day');
+  const router = useRouter();
+  const updateQueryParams = useUpdateQueryParams({});
+  const currentMediaType = parseMediaType(router.query.mediaType);
+  const currentTimeWindow = parseTimeWindow(router.query.timeWindow);
   const {
     isLoadingInitialData,
     isEmpty,
@@ -58,7 +75,7 @@ const Trending = () => {
             <select
               id="mediaType"
               name="mediaType"
-              onChange={(e) => setCurrentMediaType(e.target.value as MediaType)}
+              onChange={(e) => updateQueryParams('mediaType', e.target.value)}
               value={currentMediaType}
               className="rounded-r-only"
             >
@@ -80,9 +97,7 @@ const Trending = () => {
             <select
               id="timeWindow"
               name="timeWindow"
-              onChange={(e) =>
-                setCurrentTimeWindow(e.target.value as TimeWindow)
-              }
+              onChange={(e) => updateQueryParams('timeWindow', e.target.value)}
               value={currentTimeWindow}
               className="rounded-r-only"
             >