feat: refactor PodcastsClient and PodcastsContext for improved loading state management and add PodcastsList component

Author: mitchdowney

src/app/podcasts/PodcastsClient.tsx

@@ -4,12 +4,10 @@
 import React from "react";
 import { PodcastsContextProvider } from "./PodcastsContext";
 import MainWrapper from "../../components/MainWrapper/MainWrapper";
-import PodcastList from "../../components/Podcast/PodcastList";
 import { DTOChannel, QueryParamChannels } from "podverse-helpers";
 import type { MenuItem } from "../../components/FilterDropdown/FilterDropdown";
 import PodcastsHeader from "./PodcastsHeader";
-import { useLoadingSpinnerGlobal } from "../../contexts/LoadingGlobal";
-import LoadingSpinnerOverlay from "../../components/LoadingSpinner/LoadingSpinnerOverlay";
+import PodcastsList from "./PodcastsList";
 
 interface DropdownConfig {
   typeMenuItems: MenuItem[];
@@ -27,18 +25,16 @@ interface PodcastsClientProps {
 
 export default function PodcastsClient(props: PodcastsClientProps) {
   const { initialQueryParams, ssrChannels, ssrTotalPages, dropdownConfig } = props;
-  const { isLoadingGlobal } = useLoadingSpinnerGlobal();
 
   return (
     <PodcastsContextProvider
       initialQueryParams={initialQueryParams}
       ssrChannels={ssrChannels}
       ssrTotalPages={ssrTotalPages}
     >
-      {isLoadingGlobal && <LoadingSpinnerOverlay />}
       <PodcastsHeader dropdownConfig={dropdownConfig} />
       <MainWrapper>
-        <PodcastList />
+        <PodcastsList />
       </MainWrapper>
     </PodcastsContextProvider>
   );

src/app/podcasts/PodcastsContext.tsx

@@ -2,9 +2,10 @@
 
 import { CategoryMappingKeys, DTOChannel, QueryParamChannels, QueryParamsChannelsSort,
   QueryParamsChannelsType, QueryParamsStatsRange } from "podverse-helpers";
-import React, { createContext, useContext, useState, ReactNode, useEffect } from "react";
+import React, { createContext, useContext, useState, ReactNode } from "react";
 import { apiRequestService } from "../../factories/apiRequestService";
-import { useLoadingSpinnerGlobal } from "../../contexts/LoadingGlobal";
+import { useAccount } from "../../contexts/Account";
+import { useSkipInitialEffect } from "../../hooks/useSkipInitialEffect";
 
 interface PodcastsContextType extends QueryParamChannels {
   setPage: (page: number) => void;
@@ -16,6 +17,10 @@ interface PodcastsContextType extends QueryParamChannels {
   setChannels: (channels: DTOChannel[]) => void;
   totalPages: number;
   setTotalPages: (totalPages: number) => void;
+  isLoading: boolean;
+  setIsLoading: (isLoading: boolean) => void;
+  showSubscribeMessage: boolean;
+  setShowSubscribeMessage: (show: boolean) => void;
 };
 
 const PodcastsContext = createContext<PodcastsContextType | undefined>(undefined);
@@ -26,21 +31,31 @@ export const PodcastsContextProvider = ({ children, initialQueryParams, ssrChann
   ssrChannels: DTOChannel[],
   ssrTotalPages: number
 }) => {
-  const { setIsLoadingGlobal } = useLoadingSpinnerGlobal();
   const [page, setPage] = useState(initialQueryParams.page);
   const [type, setType] = useState(initialQueryParams.type);
   const [sort, setSort] = useState(initialQueryParams.sort);
   const [range, setRange] = useState(initialQueryParams.range);
   const [category, setCategory] = useState<string | undefined>(initialQueryParams.category);
   const [channels, setChannels] = useState<DTOChannel[]>(ssrChannels || []);
   const [totalPages, setTotalPages] = useState<number>(ssrTotalPages || 1);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [showSubscribeMessage, setShowSubscribeMessage] = useState<boolean>(false);
+  const { loggedInAccount } = useAccount();
 
-  useEffect(() => {
+  useSkipInitialEffect(() => {
     async function fetchChannels() {
-      setIsLoadingGlobal(true);
+      if (type === "subscribed") {
+        if (!loggedInAccount) {
+          setChannels([]);
+          setShowSubscribeMessage(true);
+          return;
+        }
+      }
+
+      setIsLoading(true);
       const channels = await apiRequestService.reqChannelGetMany({ page, type, sort, range, category });
       setChannels(channels.data);
-      setIsLoadingGlobal(false);
+      setIsLoading(false);
     }
     fetchChannels();
   }, [page, type, sort, range, category])
@@ -53,7 +68,9 @@ export const PodcastsContextProvider = ({ children, initialQueryParams, ssrChann
       range, setRange,
       category, setCategory,
       channels, setChannels,
-      totalPages, setTotalPages
+      totalPages, setTotalPages,
+      isLoading, setIsLoading,
+      showSubscribeMessage, setShowSubscribeMessage,
     }}>
       {children}
     </PodcastsContext.Provider>

src/app/podcasts/PodcastsList.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import ChannelList from "../../components/Channel/ChannelList";
+import { usePodcastsContext } from "./PodcastsContext";
+import LoadingSpinnerOverlay from "../../components/LoadingSpinner/LoadingSpinnerOverlay";
+
+const PodcastsList: React.FC = () => {
+  const { page = 1, setPage, channels, totalPages, isLoading } = usePodcastsContext();
+  
+  return (
+    <>
+      <ChannelList
+        page={page}
+        setPage={setPage}
+        channels={channels}
+        totalPages={totalPages}
+      />
+      <LoadingSpinnerOverlay isLoading={isLoading} />
+    </>
+  );
+};
+
+export default PodcastsList;

src/components/Podcast/PodcastList.tsx renamed to src/components/Channel/ChannelList.tsx

@@ -1,13 +1,19 @@
 "use client";
 
 import React, { useRef } from "react";
-import PodcastListItem from "./PodcastListItem";
+import ChannelListItem from "./ChannelListItem";
 import Pagination from "../Pagination/Pagination";
 import { useSkipInitialEffect } from "../../hooks/useSkipInitialEffect";
-import { usePodcastsContext } from "../../app/podcasts/PodcastsContext";
+import { DTOChannel } from "podverse-helpers";
 
-const PodcastList: React.FC = () => {
-  const { page = 1, setPage, channels, totalPages } = usePodcastsContext();
+type Props = {
+  page: number;
+  setPage: (page: number) => void;
+  channels: DTOChannel[];
+  totalPages: number;
+};
+
+const ChannelList: React.FC<Props> = ({ page = 1, setPage, channels, totalPages }) => {
   const topRef = useRef<HTMLDivElement>(null);
 
   useSkipInitialEffect(() => {
@@ -23,11 +29,11 @@ const PodcastList: React.FC = () => {
         totalPages={totalPages}
         onPageChange={setPage}>
         {channels.map((channel) => (
-          <PodcastListItem key={channel.id} channel={channel} />
+          <ChannelListItem key={channel.id} channel={channel} />
         ))}
       </Pagination>
     </>
   );
 };
 
-export default PodcastList;
+export default ChannelList;

src/components/Podcast/PodcastListItem.tsx renamed to src/components/Channel/ChannelListItem.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import React from "react";
 import Image from "../Image/Image";
-import styles from "../../styles/components/Podcast/PodcastListItem.module.scss";
+import styles from "../../styles/components/Channel/ChannelListItem.module.scss";
 import { ROUTES } from "../../constants/routes";
 import { DTOChannel, formatDateAbbrev } from "podverse-helpers";
 import { useTranslations } from "next-intl";
@@ -12,7 +12,7 @@ interface Props {
   channel: DTOChannel;
 }
 
-const PodcastListItem: React.FC<Props> = ({ channel }) => {
+const ChannelListItem: React.FC<Props> = ({ channel }) => {
   const url = `${ROUTES.PODCAST}/${channel.id_text}`;
   const imageUrl = channel.channel_images?.[0]?.url;
   const tMedia = useTranslations("media");
@@ -22,7 +22,7 @@ const PodcastListItem: React.FC<Props> = ({ channel }) => {
       <div className={styles.podcastListItem}>
         <Image
           src={imageUrl}
-          alt={channel.title || "Podcast Image"}
+          alt={channel.title || "Channel Image"}
           width={80}
           height={80}
           className={styles.podcastImage}
@@ -44,4 +44,4 @@ const PodcastListItem: React.FC<Props> = ({ channel }) => {
   );
 };
 
-export default PodcastListItem;
+export default ChannelListItem;

src/components/LoadingSpinner/LoadingSpinnerOverlay.tsx

@@ -6,18 +6,19 @@ type Props = {
   size?: "small" | "medium" | "large";
   className?: string;
   style?: React.CSSProperties;
+  isLoading?: boolean;
 };
 
-const LoadingSpinnerOverlay: React.FC<Props> = ({
-  size = "large",
-  className = "",
-  style = {},
-}) => (
-  <div className={`${styles.overlay} ${className}`} style={style}>
-    <div className={styles.spinnerWrapper}>
-      <LoadingSpinner size={size} />
+const LoadingSpinnerOverlay: React.FC<Props> = ({ size = "large", className = "", style = {}, isLoading = false }) => {
+  if (!isLoading) return null;
+
+  return (
+    <div className={`${styles.overlay} ${className}`} style={style}>
+      <div className={styles.spinnerWrapper}>
+        <LoadingSpinner size={size} />
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default LoadingSpinnerOverlay;

src/components/MainWrapper/MainWrapper.tsx

@@ -1,15 +1,23 @@
+import React from "react";
 import Footer from "../Footer/Footer";
 import styles from "../../styles/components/MainWrapper/MainWrapper.module.scss";
 import Divider from "../Divider/Divider";
 
 type MainWrapperProps = {
   children: React.ReactNode;
+  emptyStateComponent?: React.ReactNode;
 };
 
-const MainWrapper: React.FC<MainWrapperProps> = ({ children }) => (
+const MainWrapper: React.FC<MainWrapperProps> = ({ children, emptyStateComponent }) => (
   <div className={styles.mainOuterWrapper}>
     <main className={styles.main}>
-      {children}
+      {React.Children.count(children) > 0 ? (
+        children
+      ) : emptyStateComponent ? (
+        <div className={styles.emptyStateWrapper}>
+          {emptyStateComponent}
+        </div>
+      ) : null}
     </main>
     <Divider />
     <Footer />

src/styles/components/Podcast/PodcastListItem.module.scss renamed to src/styles/components/Channel/ChannelListItem.module.scss

@@ -1,3 +1,5 @@
+@use 'breakpoints';
+
 .mainOuterWrapper {
   display: flex;
   flex: 1 1 auto;
@@ -14,4 +16,19 @@
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
-}
+}
+
+.emptyStateWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 300px;
+  width: 100%;
+}
+
+@media (max-width: breakpoints.$breakpoint-md) {
+  .mainOuterWrapper {
+    padding: 0 1rem;
+  }
+}