feat: enhance podcast context and header to support category filtering and routing

mitchdowney · mitchdowney · commit e5c214e9f717 · 2025-07-21T14:41:58.000-05:00
diff --git a/src/app/podcasts/PodcastsContext.tsx b/src/app/podcasts/PodcastsContext.tsx
@@ -1,11 +1,12 @@
 "use client";
 
+import { useRouter } from "next/navigation";
 import { DTOChannel, getTotalPages, QueryParamChannels } from "podverse-helpers";
 import React, { createContext, useContext, useState, ReactNode } from "react";
 import { apiRequestService } from "../../factories/apiRequestService";
 import { useAccount } from "../../contexts/Account";
 import { useSkipInitialEffect } from "../../hooks/useSkipInitialEffect";
-import { getCurrentSortAndRange } from "./PodcastsDropdownConfig";
+import { getChannelQueryParams } from "./PodcastsDropdownConfig";
 
 interface PodcastsContextType {
   queryParams: QueryParamChannels;
@@ -28,6 +29,7 @@ export const PodcastsContextProvider = ({ children, initialQueryParams, ssrChann
   ssrChannels: DTOChannel[],
   ssrTotalPages: number
 }) => {
+  const router = useRouter();
   const [queryParams, setQueryParams] = useState<QueryParamChannels>(initialQueryParams);
   const [channels, setChannels] = useState<DTOChannel[]>(ssrChannels || []);
   const [totalPages, setTotalPages] = useState<number>(ssrTotalPages || 1);
@@ -45,13 +47,30 @@ export const PodcastsContextProvider = ({ children, initialQueryParams, ssrChann
         }
       }
 
-      setShowSubscribeMessage(false);
       setIsLoading(true);
-      const { currentSort, currentRange } = getCurrentSortAndRange({ type: queryParams.type, sort: queryParams.sort, range: queryParams.range });
-      const response = await apiRequestService.reqChannelGetMany({ ...queryParams, sort: currentSort, range: currentRange });
+
+      const { currentSort, currentRange, currentType } = getChannelQueryParams({
+        type: queryParams.type,
+        sort: queryParams.sort,
+        range: queryParams.range,
+        category: queryParams.category
+      });
+
+      const response = await apiRequestService.reqChannelGetMany({
+        ...queryParams,
+        type: currentType,
+        sort: currentSort,
+        range: currentRange
+      });
+
+      if (!queryParams.category) {
+        router.replace("/podcasts");
+      }
+
       const totalPages = getTotalPages(response.meta.count, response.meta.limit);
       setTotalPages(totalPages);
       setChannels(response.data);
+      setShowSubscribeMessage(false);
       setIsLoading(false);
     }
     fetchChannels();
diff --git a/src/app/podcasts/PodcastsDropdownConfig.ts b/src/app/podcasts/PodcastsDropdownConfig.ts
@@ -1,8 +1,10 @@
-import { QueryParamsChannelsType, QueryParamsChannelsSort, QueryParamsStatsRange } from "podverse-helpers";
+import { QueryParamsChannelsType, QueryParamsChannelsSort, QueryParamsStatsRange,
+  CategoryMappingKeys } from "podverse-helpers";
 
-export function getDropdownConfig({ type, sort, tFilters }: {
+export function getDropdownConfig({ type, sort, category, tFilters }: {
   sort?: QueryParamsChannelsSort,
   type?: QueryParamsChannelsType,
+  category?: CategoryMappingKeys | null,
   tFilters: (key: string) => string
 }) {
   const sortTop = { label: tFilters("sort.top"), param: "sort", value: "top" };
@@ -27,11 +29,12 @@ export function getDropdownConfig({ type, sort, tFilters }: {
     { label: tFilters("range.all_time"), param: "range", value: "all-time" },
   ];
 
-  if (type === "all" || type === "category") {
+  let showRangeDropdown = false;
+  if (type === "all" || category) {
     sortDropdownMenuItems = [sortTop];
+    showRangeDropdown = true;
   }
   
-  let showRangeDropdown = false;
   if (sort === "top") {
     showRangeDropdown = true;
   }
@@ -40,26 +43,32 @@ export function getDropdownConfig({ type, sort, tFilters }: {
     typeMenuItems: typeDropdownMenuItems,
     sortMenuItems: sortDropdownMenuItems,
     rangeMenuItems: rangeDropdownMenuItems,
-    showRangeDropdown,
+    showRangeDropdown
   };
 }
 
 type QueryParamConfig = {
   type?: QueryParamsChannelsType;
   sort?: QueryParamsChannelsSort;
   range?: QueryParamsStatsRange;
+  category?: CategoryMappingKeys | null;
 }
 
-export function getCurrentSortAndRange({ type, sort, range }: QueryParamConfig) {
+export function getChannelQueryParams({ type, sort, range, category }: QueryParamConfig) {
   let currentSort = sort;
   let currentRange = range;
+  let currentType = type;
 
-  if (type === "all" || type === "category") {
+  if (category) {
+    currentType = "category";
+    currentSort = currentSort || "top";
+    currentRange = currentRange || "day";
+  } else if (type === "all") {
     currentSort = "top";
     currentRange = currentRange || "day";
   } else if (type === "subscribed") {
     currentSort = currentSort || "alphabetical";
   }
 
-  return { currentSort, currentRange };
+  return { currentSort, currentRange, currentType };
 }
diff --git a/src/app/podcasts/PodcastsHeader.tsx b/src/app/podcasts/PodcastsHeader.tsx
@@ -14,14 +14,17 @@ import FilterDropdown from "../../components/FilterDropdown/FilterDropdown";
 import Header from "../../components/Header/Header";
 import { usePodcastsContext } from "./PodcastsContext";
 import { getDropdownConfig } from "./PodcastsDropdownConfig";
+import { useRouter } from "next/navigation";
 
 const PodcastsHeader: React.FC = () => {
   const { queryParams, setQueryParams } = usePodcastsContext();
-  const { type, sort, range } = queryParams;
+  const { type, sort, range, category } = queryParams;
   const tMedia = useTranslations('media');
   const tFilters = useTranslations('filters');
   const { typeMenuItems, sortMenuItems, rangeMenuItems, showRangeDropdown
-    } = getDropdownConfig({ type, sort, tFilters });
+    } = getDropdownConfig({ type, sort, category, tFilters });
+
+  const router = useRouter();
 
   function isChannelType(val: string): val is QueryParamsChannelsType {
     return QUERY_PARAMS_CHANNELS_TYPE_VALUES.includes(val as QueryParamsChannelsType);
@@ -43,10 +46,12 @@ const PodcastsHeader: React.FC = () => {
           menuItems={typeMenuItems}
           onChange={value => {
             if (isChannelType(value)) {
-              if (value === "all" || value === "category") {
-                setQueryParams({ ...queryParams, type: value, sort: "top", page: 1 });
+              if (value === "all") {
+                setQueryParams({ ...queryParams, type: value, sort: "top", page: 1, category: undefined });
+              } else if (value === "category") {
+                router.push("/podcasts/categories");
               } else {
-                setQueryParams({ ...queryParams, type: value, sort: "alphabetical", page: 1 });
+                setQueryParams({ ...queryParams, type: value, sort: "alphabetical", page: 1, category: undefined });
               }
             }
           }}
diff --git a/src/app/podcasts/PodcastsList.tsx b/src/app/podcasts/PodcastsList.tsx
@@ -5,7 +5,7 @@ import LoadingSpinnerOverlay from "../../components/LoadingSpinner/LoadingSpinne
 
 const PodcastsList: React.FC = () => {
   const { queryParams, setQueryParams, channels, totalPages, isLoading, showSubscribeMessage } = usePodcastsContext();
-  const { page = 1 } = queryParams;
+  const { page = 1, type, category } = queryParams;
 
   return (
     <>
@@ -15,6 +15,8 @@ const PodcastsList: React.FC = () => {
         channels={channels}
         totalPages={totalPages}
         showSubscribeMessage={showSubscribeMessage}
+        type={type}
+        category={category}
       />
       <LoadingSpinnerOverlay isLoading={isLoading} />
     </>
diff --git a/src/app/podcasts/categories/page.tsx b/src/app/podcasts/categories/page.tsx
@@ -0,0 +1,9 @@
+import CategoriesClient from "../../../clients/CategoriesClient";
+
+export default async function PodcastsCategoriesPage() {
+  return (
+    <CategoriesClient
+      titleKey="podcast.podcasts"
+      linkPath="/podcasts" />
+  );
+}
diff --git a/src/app/podcasts/page.tsx b/src/app/podcasts/page.tsx
@@ -1,8 +1,7 @@
 import { CATEGORY_MAPPING_KEYS, QUERY_PARAMS_STATS_RANGE_VALUES, QUERY_PARAMS_CHANNELS_SORT_VALUES,
-  QUERY_PARAMS_CHANNELS_TYPE_VALUES, getTotalPages, QueryParamsChannelsType,
-  QueryParamsChannelsSort, QueryParamsStatsRange } from "podverse-helpers";
+  QUERY_PARAMS_CHANNELS_TYPE_VALUES, getTotalPages } from "podverse-helpers";
 import { z } from "zod";
-import { getCurrentSortAndRange } from "./PodcastsDropdownConfig";
+import { getChannelQueryParams } from "./PodcastsDropdownConfig";
 import PodcastsClient from "./PodcastsClient";
 import { getSSRAuthService } from "../../utils/auth/ssrAuth";
 
@@ -18,27 +17,24 @@ export type PodcastPageProps = z.infer<typeof searchParamsSchema>;
 
 export default async function Podcasts({ searchParams }: { searchParams?: Promise<PodcastPageProps> }) {
   const { isValidAuthSession, apiRequestService } = await getSSRAuthService();
-  
-  const defaultValueType: QueryParamsChannelsType = isValidAuthSession ? "subscribed" : "all";
-  const defaultValueSort: QueryParamsChannelsSort = isValidAuthSession ? "alphabetical" : "top";
-  const defaultValueRange: QueryParamsStatsRange = "day";
-  
+    
   const params = searchParams ? await searchParams : {};
-  const { page = 1, sort = defaultValueSort, type = defaultValueType, range = defaultValueRange,
-    category } = await parseSearchParams(params, isValidAuthSession);
+  const { page = 1, sort, type, range, category } = await parseSearchParams(params, isValidAuthSession);
   
-  const { currentSort, currentRange } = getCurrentSortAndRange({ type, sort, range });
+  const { currentType, currentSort, currentRange } = getChannelQueryParams({ type, sort, range, category });
 
+  
   const response = await apiRequestService.reqChannelGetMany({
     page,
     sort: currentSort,
-    type,
-    range: currentRange
+    type: currentType,
+    range: currentRange,
+    category
   });
   
   const ssrChannels = response.data;
   const ssrTotalPages = getTotalPages(response.meta.count, response.meta.limit);
-
+  
   return (
     <PodcastsClient
       initialQueryParams={{ page, type, sort, range, category }}
@@ -54,8 +50,15 @@ async function parseSearchParams(params: PodcastPageProps, isAuthenticated: bool
     return {};
   }
   const data = parsed.data;
-  if (!data.type) {
+
+  if (data.category) {
+    data.type = "category";
+    data.sort = "top";
+    data.range = "day";
+  } else if (!data.type) {
     data.type = isAuthenticated ? "subscribed" : "all";
+    data.sort = isAuthenticated ? "alphabetical" : "top";
+    data.range = "day";
   }
   return data;
 }
