feat: enhance pagination and query parameters handling in PodcastsContext and PodcastsHeader

Author: mitchdowney

src/app/podcasts/PodcastsContext.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { DTOChannel, QueryParamChannels } from "podverse-helpers";
+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";
@@ -48,8 +48,10 @@ export const PodcastsContextProvider = ({ children, initialQueryParams, ssrChann
       setShowSubscribeMessage(false);
       setIsLoading(true);
       const { currentSort, currentRange } = getCurrentSortAndRange({ type: queryParams.type, sort: queryParams.sort, range: queryParams.range });
-      const channels = await apiRequestService.reqChannelGetMany({ ...queryParams, sort: currentSort, range: currentRange });
-      setChannels(channels.data);
+      const response = await apiRequestService.reqChannelGetMany({ ...queryParams, sort: currentSort, range: currentRange });
+      const totalPages = getTotalPages(response.meta.count, response.meta.limit);
+      setTotalPages(totalPages);
+      setChannels(response.data);
       setIsLoading(false);
     }
     fetchChannels();

src/app/podcasts/PodcastsHeader.tsx

@@ -44,9 +44,9 @@ const PodcastsHeader: React.FC = () => {
           onChange={value => {
             if (isChannelType(value)) {
               if (value === "all" || value === "category") {
-                setQueryParams({ ...queryParams, type: value, sort: "top" });
+                setQueryParams({ ...queryParams, type: value, sort: "top", page: 1 });
               } else {
-                setQueryParams({ ...queryParams, type: value, sort: "alphabetical" });
+                setQueryParams({ ...queryParams, type: value, sort: "alphabetical", page: 1 });
               }
             }
           }}

src/components/Pagination/Pagination.tsx

@@ -45,10 +45,6 @@ const Pagination: React.FC<PaginationProps> = ({
   children,
   maxButtons = 5,
 }) => {
-  if (React.Children.count(children) === 0) {
-    return null;
-  }
-
   const pageNumbers = getPageRange(currentPage, totalPages, maxButtons);
 
   const handlePageChange = (page: number) => {