feat: add authentication messages and refactor channel list components; implement CallToActionMessage for subscription prompts

Author: mitchdowney

i18n/originals/en.json

@@ -60,6 +60,19 @@
       "all_time": "All Time"
     }
   },
+  "instructions": {
+    "login_for_subscriptions": "Please login to view your subscriptions."
+  },
+  "authentication": {
+    "login": "Login",
+    "logout": "Logout",
+    "sign_up": "Sign Up",
+    "forgot_password": "Forgot Password?",
+    "reset_password": "Reset Password",
+    "email": "Email",
+    "password": "Password",
+    "confirm_password": "Confirm Password"
+  },
   "settings": {
     "ui_theme": {
       "light": "☀️ Light",

src/app/podcasts/PodcastsContext.tsx

@@ -52,7 +52,8 @@ export const PodcastsContextProvider = ({ children, initialQueryParams, ssrChann
           return;
         }
       }
-
+      
+      setShowSubscribeMessage(false);
       setIsLoading(true);
       const { currentSort, currentRange } = getCurrentSortAndRange({ type, sort, range });
       const channels = await apiRequestService.reqChannelGetMany({ page, type, sort: currentSort, range: currentRange, category });

src/app/podcasts/PodcastsList.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import ChannelList from "../../components/Channel/ChannelList";
+import ChannelList from "../../components/Channel/ChannelsList";
 import { usePodcastsContext } from "./PodcastsContext";
 import LoadingSpinnerOverlay from "../../components/LoadingSpinner/LoadingSpinnerOverlay";
 
 const PodcastsList: React.FC = () => {
-  const { page = 1, setPage, channels, totalPages, isLoading } = usePodcastsContext();
+  const { page = 1, setPage, channels, totalPages, isLoading, showSubscribeMessage } = usePodcastsContext();
 
   return (
     <>
@@ -13,6 +13,7 @@ const PodcastsList: React.FC = () => {
         setPage={setPage}
         channels={channels}
         totalPages={totalPages}
+        showSubscribeMessage={showSubscribeMessage}
       />
       <LoadingSpinnerOverlay isLoading={isLoading} />
     </>

src/components/CallToActionMessage/CallToActionMessage.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "../../styles/components/CallToActionMessage/CallToActionMessage.module.scss";
+
+type CallToActionMessageProps = {
+  message: React.ReactNode;
+  buttonLabel: React.ReactNode;
+  onButtonClick: () => void;
+};
+
+const CallToActionMessage: React.FC<CallToActionMessageProps> = ({
+  message,
+  buttonLabel,
+  onButtonClick
+}) => (
+  <div className={styles.message}>
+    <p>{message}</p>
+    <button onClick={onButtonClick}>{buttonLabel}</button>
+  </div>
+);
+
+export default CallToActionMessage;

src/components/Channel/ChannelList.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { DTOChannel } from "podverse-helpers";
+import React, { useRef } from "react";
+import ChannelListItem from "./ChannelsListItem";
+import CallToActionMessage from "../CallToActionMessage/CallToActionMessage";
+import Pagination from "../Pagination/Pagination";
+import { useModals } from "../../contexts/Modals";
+import { useSkipInitialEffect } from "../../hooks/useSkipInitialEffect";
+
+type Props = {
+  page: number;
+  setPage: (page: number) => void;
+  channels: DTOChannel[];
+  totalPages: number;
+  showSubscribeMessage: boolean;
+};
+
+const ChannelList: React.FC<Props> = ({ page = 1, setPage, channels, totalPages, showSubscribeMessage }) => {
+  const topRef = useRef<HTMLDivElement>(null);
+  const tInstructions = useTranslations("instructions");
+  const tAuthentication = useTranslations("authentication");
+  const { openModal } = useModals();
+
+  useSkipInitialEffect(() => {
+    topRef?.current?.scrollIntoView();
+  }, [channels]);
+
+  return (
+    <>
+      <div ref={topRef} />
+      {showSubscribeMessage && (
+        <CallToActionMessage
+          message={tInstructions("login_for_subscriptions")}
+          buttonLabel={tAuthentication("login")}
+          onButtonClick={() => openModal("LoginModal")}
+        />
+      )}
+      {
+        !showSubscribeMessage && (
+          <Pagination
+            currentPage={page}
+            maxButtons={5}
+            totalPages={totalPages}
+            onPageChange={setPage}>
+            {channels.map((channel) => (
+              <ChannelListItem key={channel.id} channel={channel} />
+            ))}
+          </Pagination>
+        )
+      }
+    </>
+  );
+};
+
+export default ChannelList;

src/components/Channel/ChannelsList.tsx

@@ -1,12 +1,12 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import Link from "next/link";
+import { DTOChannel, formatDateAbbrev } from "podverse-helpers";
 import React from "react";
 import Image from "../Image/Image";
-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";
+import styles from "../../styles/components/Channel/ChannelsListItem.module.scss";
 
 interface Props {
   channel: DTOChannel;

src/components/Channel/ChannelListItem.tsx renamed to src/components/Channel/ChannelsListItem.tsx

@@ -45,6 +45,10 @@ 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) => {

src/components/Pagination/Pagination.tsx

@@ -0,0 +1,13 @@
+.message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 1rem;
+  font-size: var(--font-size-lg);
+}
+
+.message button {
+  color: var(--text-color-link);
+}