feat: implement category management with new components and context

mitchdowney · mitchdowney · commit d1a1ec550bd1 · 2025-07-21T14:40:05.000-05:00
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -13,6 +13,7 @@ import { toUITheme } from '../utils/theme';
 import { Modals } from '../components/Modals/Modals';
 import { getSSRJwtFromCookies, getSSRLoggedInAccount } from '../utils/auth/ssrAuth';
 import AuthSessionChecker from '../components/Auth/AuthSessionChecker';
+import { apiRequestService } from '../factories/apiRequestService';
 
 export const metadata = {
   title: 'Podverse',
@@ -28,8 +29,11 @@ export default async function RootLayout({ children }: { children: React.ReactNo
   const ssrLoggedInAccount = await getSSRLoggedInAccount();
   const ssrShouldLogout = !!(jwt && !ssrLoggedInAccount);
 
-  const messages = (await import(`../../i18n/originals/${locale}.json`)).default;
+  const categoriesResponse = await apiRequestService.reqCategoryGetAll();
+  const categories = categoriesResponse.data;
 
+  const messages = (await import(`../../i18n/originals/${locale}.json`)).default;
+  
   return (
     <html lang={locale} data-theme={theme}>
       <head>
@@ -43,7 +47,8 @@ export default async function RootLayout({ children }: { children: React.ReactNo
           locale={locale}
           ssrLoggedInAccount={ssrLoggedInAccount}
           theme={theme}
-          messages={messages}>
+          messages={messages}
+          categories={categories}>
           <WindowWrapper>
             <SideBar />
             <PageWrapper>
diff --git a/src/clients/CategoriesClient.tsx b/src/clients/CategoriesClient.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import React from "react";
+import CategoriesList from "../components/Category/CategoriesList";
+import HeaderTextOnly from "../components/Header/HeaderTextOnly";
+import MainWrapper from "../components/MainWrapper/MainWrapper";
+import { DTOCategory } from "podverse-helpers";
+
+interface CategoriesClientProps {
+  titleKey: string;
+  linkPath: string;
+}
+
+export default function CategoriesClient(props: CategoriesClientProps) {
+  const { titleKey, linkPath } = props;
+  const tMedia = useTranslations("media");
+  const router = useRouter();
+
+  const onClick = (category: DTOCategory) => {
+    router.push(`${linkPath}?category=${category.mapping_key}`);
+  }
+
+  return (
+    <>
+      <HeaderTextOnly title={tMedia(titleKey)} />
+      <MainWrapper>
+        <CategoriesList onCategoryClick={onClick} />
+      </MainWrapper>
+    </>
+  );
+}
diff --git a/src/components/Category/CategoriesList.tsx b/src/components/Category/CategoriesList.tsx
@@ -0,0 +1,61 @@
+import { useTranslations } from "next-intl";
+import { DTOCategory } from "podverse-helpers";
+import React from "react";
+import Link from "../Link/Link";
+import SubHeader from "../SubHeader/SubHeader";
+import { useCategories } from "../../contexts/Categories";
+import styles from "../../styles/components/Category/CategoriesList.module.scss";
+
+type CategoriesListProps = {
+  onCategoryClick: (category: DTOCategory, event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+function CategoryListItems({
+  categories,
+  tCategories,
+  onCategoryClick,
+}: {
+  categories: DTOCategory[];
+  tCategories: any;
+  onCategoryClick: (category: DTOCategory, event: React.MouseEvent<HTMLButtonElement>) => void;
+}) {
+  if (!categories || categories.length === 0) return null;
+  return (
+    <ul className={styles.categoryList}>
+      {categories.map((category) => (
+        <li key={category.id}>
+          <Link onClick={(e) => onCategoryClick(category, e)}>
+            {tCategories(category.mapping_key)}
+          </Link>
+          {category.children && category.children.length > 0 && (
+            <CategoryListItems
+              categories={category.children}
+              tCategories={tCategories}
+              onCategoryClick={onCategoryClick}
+            />
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+const CategoriesList = ({ onCategoryClick }: CategoriesListProps) => {
+  const { categories } = useCategories();
+  const tCategories = useTranslations("categories");
+
+  return (
+    <section aria-labelledby="categories-heading">
+      <SubHeader title={tCategories("categories")} />
+      <nav>
+        <CategoryListItems
+          categories={categories}
+          tCategories={tCategories}
+          onCategoryClick={onCategoryClick}
+        />
+      </nav>
+    </section>
+  );
+};
+
+export default CategoriesList;
diff --git a/src/components/Channel/ChannelsList.tsx b/src/components/Channel/ChannelsList.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { DTOChannel } from "podverse-helpers";
+import { CategoryMappingKeys, DTOChannel, QueryParamsChannelsType } from "podverse-helpers";
 import React, { useRef } from "react";
 import ChannelListItem from "./ChannelsListItem";
 import CallToActionMessage from "../CallToActionMessage/CallToActionMessage";
@@ -15,9 +15,11 @@ type Props = {
   channels: DTOChannel[];
   totalPages: number;
   showSubscribeMessage: boolean;
+  type?: QueryParamsChannelsType;
+  category?: CategoryMappingKeys | null;
 };
 
-const ChannelList: React.FC<Props> = ({ page = 1, setPage, channels, totalPages, showSubscribeMessage }) => {
+const ChannelList: React.FC<Props> = ({ page = 1, setPage, channels, totalPages, showSubscribeMessage, type, category }) => {
   const topRef = useRef<HTMLDivElement>(null);
   const tInstructions = useTranslations("instructions");
   const tAuthentication = useTranslations("authentication");
@@ -26,19 +28,22 @@ const ChannelList: React.FC<Props> = ({ page = 1, setPage, channels, totalPages,
   useSkipInitialEffect(() => {
     topRef?.current?.scrollIntoView();
   }, [channels]);
+  
+  const showCallToAction = showSubscribeMessage;
+  const showPagination = !showSubscribeMessage;
 
   return (
     <>
       <div ref={topRef} />
-      {showSubscribeMessage && (
+      {showCallToAction && (
         <CallToActionMessage
           message={tInstructions("login_for_subscriptions")}
           buttonLabel={tAuthentication("login")}
           onButtonClick={() => openModal("LoginModal")}
         />
       )}
       {
-        !showSubscribeMessage && (
+        showPagination && (
           <Pagination
             currentPage={page}
             maxButtons={5}
diff --git a/src/components/Header/HeaderTextOnly.tsx b/src/components/Header/HeaderTextOnly.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import React from "react";
+import styles from "../../styles/components/Header/Header.module.scss";
+
+type HeaderTextOnlyProps = {
+  title: string;
+};
+
+export const HeaderTextOnly: React.FC<HeaderTextOnlyProps> = ({ title }) => (
+  <header className={styles.header}>
+    <div className={styles.headerContent}>
+      <h1 className={styles.title}>{title}</h1>
+    </div>
+  </header>
+);
+
+export default HeaderTextOnly;
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import NextLink from "next/link";
+import classNames from "classnames";
+import styles from "../../styles/components/Link/Link.module.scss";
+
+type CustomLinkProps = {
+  href?: string;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  children: React.ReactNode;
+  className?: string;
+  type?: "button" | "submit" | "reset";
+  tabIndex?: number;
+  "aria-label"?: string;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+};
+
+const Link: React.FC<CustomLinkProps> = ({
+  href,
+  onClick,
+  children,
+  className,
+  type = "button",
+  tabIndex,
+  "aria-label": ariaLabel,
+  disabled = false,
+  style,
+  ...rest
+}) => {
+  if (href) {
+    return (
+      <NextLink
+        href={href}
+        className={classNames(styles.link, className)}
+        tabIndex={tabIndex}
+        aria-label={ariaLabel}
+        style={style}
+        {...rest}
+      >
+        {children}
+      </NextLink>
+    );
+  }
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      className={classNames(styles.link, className)}
+      tabIndex={tabIndex}
+      aria-label={ariaLabel}
+      disabled={disabled}
+      style={style}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Link;
diff --git a/src/components/SubHeader/SubHeader.tsx b/src/components/SubHeader/SubHeader.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import React from "react";
+import styles from "../../styles/components/SubHeader/SubHeader.module.scss";
+
+type SubHeaderProps = {
+  title: string;
+  filterDropdowns?: React.ReactNode[];
+};
+
+export const SubHeader: React.FC<SubHeaderProps> = ({ title, filterDropdowns }) => (
+  <header className={styles.subheader}>
+    <div className={styles.subheaderContent}>
+      <h2 className={styles.title}>{title}</h2>
+      <div className={styles.filterDropdowns}>
+        {filterDropdowns}
+      </div>
+    </div>
+  </header>
+);
+
+export default SubHeader;
diff --git a/src/contexts/Categories.tsx b/src/contexts/Categories.tsx
@@ -0,0 +1,35 @@
+import { DTOCategory } from "podverse-helpers";
+import React, { createContext, useState, ReactNode } from "react";
+import { useContext } from "react";
+
+type CategoriesContextType = {
+  categories: DTOCategory[];
+};
+
+export const CategoriesContext = createContext<CategoriesContextType>({
+  categories: [],
+});
+
+type CategoriesProviderProps = {
+  children: ReactNode;
+  ssrCategories?: DTOCategory[];
+};
+
+export const CategoriesProvider = ({
+  children,
+  ssrCategories = [],
+}: CategoriesProviderProps) => {
+  const [categories] = useState<DTOCategory[]>(ssrCategories);
+
+  return (
+    <CategoriesContext.Provider value={{ categories }}>
+      {children}
+    </CategoriesContext.Provider>
+  );
+};
+
+export function useCategories() {
+  const ctx = useContext(CategoriesContext);
+  if (!ctx) throw new Error("useCategories must be used within a CategoriesProvider");
+  return ctx;
+}
diff --git a/src/providers/Providers.tsx b/src/providers/Providers.tsx
@@ -1,31 +1,36 @@
 "use client";
 
 import { NextIntlClientProvider } from 'next-intl';
-import { DTOAccount } from 'podverse-helpers';
+import { DTOAccount, DTOCategory } from 'podverse-helpers';
 import { AccountProvider } from '../contexts/Account';
 import { ThemeProvider } from '../contexts/Theme';
 import { ModalsProvider } from '../contexts/Modals';
 import { UITheme } from '../utils/theme';
+import { CategoriesProvider } from '../contexts/Categories';
 
 export default function Providers({
   children,
   theme,
   locale,
   ssrLoggedInAccount,
-  messages
+  messages,
+  categories
 }: {
   children: React.ReactNode;
   theme: UITheme;
   locale: string;
   ssrLoggedInAccount: DTOAccount | null;
   messages: Record<string, any>;
+  categories: DTOCategory[];
 }) {
   return (
     <NextIntlClientProvider locale={locale} messages={messages} timeZone="America/Chicago">
       <ThemeProvider initialTheme={theme}>
         <AccountProvider ssrLoggedInAccount={ssrLoggedInAccount}>
           <ModalsProvider>
-            {children}
+            <CategoriesProvider ssrCategories={categories}>
+              {children}
+            </CategoriesProvider>
           </ModalsProvider>
         </AccountProvider>
       </ThemeProvider>
diff --git a/src/styles/components/Category/CategoriesList.module.scss b/src/styles/components/Category/CategoriesList.module.scss
@@ -0,0 +1,13 @@
+.categoryList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.categoryList ul {
+  margin: 1rem 0 0 1rem;
+}
+
+.categoryList li {
+  margin-bottom: 1rem;
+}
diff --git a/src/styles/components/Link/Link.module.scss b/src/styles/components/Link/Link.module.scss
@@ -0,0 +1,15 @@
+.link {
+  color: var(--text-color-link);
+
+  &:hover,
+  &:focus {
+    color: var(--text-color-link-hover);
+    text-decoration: underline;
+  }
+
+  &:disabled {
+    color: var(--text-color-secondary);
+    cursor: not-allowed;
+    text-decoration: none;
+  }
+}
diff --git a/src/styles/components/SubHeader/SubHeader.module.scss b/src/styles/components/SubHeader/SubHeader.module.scss
diff --git a/src/styles/globals/elements.scss b/src/styles/globals/elements.scss
diff --git a/src/styles/themes/dark.scss b/src/styles/themes/dark.scss
