feat: refactor PodcastsClient and PodcastsHeader to remove dropdownConfig prop; enhance dropdown configuration handling

Author: mitchdowney

src/app/podcasts/PodcastsClient.tsx

@@ -1,38 +1,29 @@
 
 "use client";
 
+import { DTOChannel, QueryParamChannels } from "podverse-helpers";
 import React from "react";
 import { PodcastsContextProvider } from "./PodcastsContext";
 import MainWrapper from "../../components/MainWrapper/MainWrapper";
-import { DTOChannel, QueryParamChannels } from "podverse-helpers";
-import type { MenuItem } from "../../components/FilterDropdown/FilterDropdown";
 import PodcastsHeader from "./PodcastsHeader";
 import PodcastsList from "./PodcastsList";
 
-interface DropdownConfig {
-  typeMenuItems: MenuItem[];
-  sortMenuItems: MenuItem[];
-  rangeMenuItems: MenuItem[];
-  showRangeDropdown: boolean;
-}
-
 interface PodcastsClientProps {
   initialQueryParams: QueryParamChannels;
   ssrChannels: DTOChannel[];
   ssrTotalPages: number;
-  dropdownConfig: DropdownConfig;
 }
 
 export default function PodcastsClient(props: PodcastsClientProps) {
-  const { initialQueryParams, ssrChannels, ssrTotalPages, dropdownConfig } = props;
+  const { initialQueryParams, ssrChannels, ssrTotalPages } = props;
 
   return (
     <PodcastsContextProvider
       initialQueryParams={initialQueryParams}
       ssrChannels={ssrChannels}
       ssrTotalPages={ssrTotalPages}
     >
-      <PodcastsHeader dropdownConfig={dropdownConfig} />
+      <PodcastsHeader />
       <MainWrapper>
         <PodcastsList />
       </MainWrapper>

src/app/podcasts/PodcastsContext.tsx

@@ -6,6 +6,7 @@ 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";
 
 interface PodcastsContextType extends QueryParamChannels {
   setPage: (page: number) => void;
@@ -53,7 +54,8 @@ export const PodcastsContextProvider = ({ children, initialQueryParams, ssrChann
       }
 
       setIsLoading(true);
-      const channels = await apiRequestService.reqChannelGetMany({ page, type, sort, range, category });
+      const { currentSort, currentRange } = getCurrentSortAndRange({ type, sort, range });
+      const channels = await apiRequestService.reqChannelGetMany({ page, type, sort: currentSort, range: currentRange, category });
       setChannels(channels.data);
       setIsLoading(false);
     }

src/app/podcasts/PodcastsDropdownConfig.ts

@@ -1,49 +1,65 @@
 import { QueryParamsChannelsType, QueryParamsChannelsSort, QueryParamsStatsRange } from "podverse-helpers";
 
-export const typeDropdownMenuItems = [
-  { label: "All", param: "type", value: "all" },
-  { label: "Subscribed", param: "type", value: "subscribed" },
-  { label: "Category", param: "type", value: "category" }
-];
-
-export const sortDropdownMenuItems = [
-  { label: "Recent", param: "sort", value: "recent" },
-  { label: "Oldest", param: "sort", value: "oldest" },
-  { label: "A - Z", param: "sort", value: "alphabetical" },
-  { label: "Top", param: "sort", value: "top" },
-];
-
-export const rangeDropdownMenuItems = [
-  { label: "Day", param: "range", value: "day" },
-  { label: "Week", param: "range", value: "week" },
-  { label: "Month", param: "range", value: "month" },
-  { label: "All Time", param: "range", value: "all-time" },
-];
-
-export function getDropdownConfig(type?: QueryParamsChannelsType, sort?: QueryParamsChannelsSort, range?: QueryParamsStatsRange) {
-  let currentSort = sort;
-  let currentRange = range;
+export function getDropdownConfig({ type, sort, tFilters }: {
+  sort?: QueryParamsChannelsSort,
+  type?: QueryParamsChannelsType,
+  tFilters: (key: string) => string
+}) {
+  const sortTop = { label: tFilters("sort.top"), param: "sort", value: "top" };
+
+  let typeDropdownMenuItems = [
+    { label: tFilters("type.all"), param: "type", value: "all" },
+    { label: tFilters("type.subscribed"), param: "type", value: "subscribed" },
+    { label: tFilters("type.category"), param: "type", value: "category" }
+  ];
+
+  let sortDropdownMenuItems = [
+    { label: tFilters("sort.recent"), param: "sort", value: "recent" },
+    { label: tFilters("sort.oldest"), param: "sort", value: "oldest" },
+    { label: tFilters("sort.a_z"), param: "sort", value: "alphabetical" },
+    sortTop
+  ];
+
+  let rangeDropdownMenuItems = [
+    { label: tFilters("range.day"), param: "range", value: "day" },
+    { label: tFilters("range.week"), param: "range", value: "week" },
+    { label: tFilters("range.month"), param: "range", value: "month" },
+    { label: tFilters("range.all_time"), param: "range", value: "all-time" },
+  ];
+
+  if (type === "all" || type === "category") {
+    sortDropdownMenuItems = [sortTop];
+  }
+  
   let showRangeDropdown = false;
+  if (sort === "top") {
+    showRangeDropdown = true;
+  }
 
-  let typeMenuItems = typeDropdownMenuItems;
-  let sortMenuItems = sortDropdownMenuItems;
-  let rangeMenuItems = rangeDropdownMenuItems;
+  return {
+    typeMenuItems: typeDropdownMenuItems,
+    sortMenuItems: sortDropdownMenuItems,
+    rangeMenuItems: rangeDropdownMenuItems,
+    showRangeDropdown,
+  };
+}
+
+type QueryParamConfig = {
+  type?: QueryParamsChannelsType;
+  sort?: QueryParamsChannelsSort;
+  range?: QueryParamsStatsRange;
+}
+
+export function getCurrentSortAndRange({ type, sort, range }: QueryParamConfig) {
+  let currentSort = sort;
+  let currentRange = range;
 
   if (type === "all" || type === "category") {
-    sortMenuItems = [{ label: "Top", param: "sort", value: "top" }];
     currentSort = "top";
     currentRange = currentRange || "day";
   } else if (type === "subscribed") {
-    sortMenuItems = sortDropdownMenuItems;
     currentSort = currentSort || "alphabetical";
   }
 
-  if (currentSort !== "top") {
-    showRangeDropdown = false;
-    rangeMenuItems = [];
-  } else {
-    showRangeDropdown = true;
-  }
-
-  return { typeMenuItems, sortMenuItems, rangeMenuItems, currentSort, currentRange, showRangeDropdown };
+  return { currentSort, currentRange };
 }

src/app/podcasts/PodcastsHeader.tsx

@@ -13,23 +13,14 @@ import React from "react";
 import FilterDropdown from "../../components/FilterDropdown/FilterDropdown";
 import Header from "../../components/Header/Header";
 import { usePodcastsContext } from "./PodcastsContext";
-import type { MenuItem } from "../../components/FilterDropdown/FilterDropdown";
+import { getDropdownConfig } from "./PodcastsDropdownConfig";
 
-interface DropdownConfig {
-  typeMenuItems: MenuItem[];
-  sortMenuItems: MenuItem[];
-  rangeMenuItems: MenuItem[];
-  showRangeDropdown: boolean;
-}
-
-interface PodcastsHeaderProps {
-  dropdownConfig: DropdownConfig;
-}
-
-const PodcastsHeader: React.FC<PodcastsHeaderProps> = ({ dropdownConfig }) => {
+const PodcastsHeader: React.FC = () => {
   const { type, setType, sort, setSort, range, setRange } = usePodcastsContext();
   const tMedia = useTranslations('media');
-  const { typeMenuItems, sortMenuItems, rangeMenuItems, showRangeDropdown } = dropdownConfig;
+  const tFilters = useTranslations('filters');
+  const { typeMenuItems, sortMenuItems, rangeMenuItems, showRangeDropdown
+    } = getDropdownConfig({ type, sort, tFilters });
 
   function isChannelType(val: string): val is QueryParamsChannelsType {
     return QUERY_PARAMS_CHANNELS_TYPE_VALUES.includes(val as QueryParamsChannelsType);

src/app/podcasts/page.tsx

@@ -2,7 +2,7 @@ import { CATEGORY_MAPPING_KEYS, QUERY_PARAMS_STATS_RANGE_VALUES, QUERY_PARAMS_CH
   QUERY_PARAMS_CHANNELS_TYPE_VALUES, getTotalPages, QueryParamsChannelsType,
   QueryParamsChannelsSort, QueryParamsStatsRange } from "podverse-helpers";
 import { z } from "zod";
-import { getDropdownConfig } from "./PodcastsDropdownConfig";
+import { getCurrentSortAndRange, getDropdownConfig } from "./PodcastsDropdownConfig";
 import PodcastsClient from "./PodcastsClient";
 import { getSSRAuthService } from "../../utils/auth/ssrAuth";
 
@@ -26,16 +26,16 @@ export default async function Podcasts({ searchParams }: { searchParams?: Promis
   const params = searchParams ? await searchParams : {};
   const { page = 1, sort = defaultValueSort, type = defaultValueType, range = defaultValueRange,
     category } = await parseSearchParams(params, isValidAuthSession);
-
-  const { typeMenuItems, sortMenuItems, rangeMenuItems, currentSort, currentRange,
-    showRangeDropdown } = getDropdownConfig(type, sort, range);
+  
+  const { currentSort, currentRange } = getCurrentSortAndRange({ type, sort, range });
 
   const response = await apiRequestService.reqChannelGetMany({
     page,
     sort: currentSort,
     type,
     range: currentRange
   });
+  
   const ssrChannels = response.data;
   const ssrTotalPages = getTotalPages(response.meta.count, response.meta.limit);
 
@@ -44,7 +44,6 @@ export default async function Podcasts({ searchParams }: { searchParams?: Promis
       initialQueryParams={{ page, type, sort, range, category }}
       ssrChannels={ssrChannels}
       ssrTotalPages={ssrTotalPages}
-      dropdownConfig={{ typeMenuItems, sortMenuItems, rangeMenuItems, showRangeDropdown }}
     />
   );
 }