Merge pull request #25 from dgmstuart/video-url-to-config

Move video list url to config

Author: dgmstuart

src/components/Card.tsx

@@ -10,10 +10,11 @@ import type { ButtonClickHandler } from "../clickHandler";
 
 const Card: React.FC<{
   id: string;
-  name: string;
+  name?: string;
   url: string;
   wordList: string[];
-}> = ({ id, name, url, wordList }) => {
+  videoListUrl?: string;
+}> = ({ id, name, url, wordList, videoListUrl }) => {
   const [cellDataList, toggleStamped, setNewWords, clearAllCells] = useCard(
     id,
     wordList,
@@ -42,7 +43,14 @@ const Card: React.FC<{
   );
   const body = <Grid cellPropsList={cellPropsList} />;
 
-  return <MainLayout name={name} headerContent={headerContent} body={body} />;
+  return (
+    <MainLayout
+      name={name}
+      headerContent={headerContent}
+      body={body}
+      videoListUrl={videoListUrl}
+    />
+  );
 };
 
 export default Card;

src/components/DynamicCard.tsx

@@ -5,13 +5,22 @@ import flattenWordList from "../lib/flattenWordList";
 import type { KeyedConfig } from "../loaders/configLoaders";
 
 const DynamicCard: React.FC = () => {
-  const { id, name = "", url, wordList } = useLoaderData() as KeyedConfig;
+  const { id, name, url, wordList, videoListUrl } =
+    useLoaderData() as KeyedConfig;
 
   if (wordList.length > 0) {
     // Card saves the word list to the session, so don't render a card if the
     // word list hasn't loaded yet
     const words = flattenWordList(wordList);
-    return <Card wordList={words} name={name} url={url} id={id} />;
+    return (
+      <Card
+        wordList={words}
+        name={name}
+        url={url}
+        id={id}
+        videoListUrl={videoListUrl}
+      />
+    );
   }
 };
 

src/components/Footer.tsx

@@ -5,7 +5,10 @@ import "./Footer.css";
 import { Link } from "react-router-dom";
 import classNames from "classnames";
 
-const Footer: React.FC<{ className?: string }> = ({ className }) => {
+const Footer: React.FC<{ className?: string; videoListUrl?: string }> = ({
+  className,
+  videoListUrl,
+}) => {
   const { t } = useTranslation();
 
   return (
@@ -14,14 +17,13 @@ const Footer: React.FC<{ className?: string }> = ({ className }) => {
         <li>
           <Link to="word_list">{t("footer.wordList")}</Link>
         </li>
-        <li>
-          <a
-            href="https://www.youtube.com/playlist?list=PLgsIo5h4KQoYzMCvcuBFTy7-qW8VgsFpT"
-            className="external"
-          >
-            {t("footer.videoList")}
-          </a>
-        </li>
+        {videoListUrl && (
+          <li>
+            <a href={videoListUrl} className="external">
+              {t("footer.videoList")}
+            </a>
+          </li>
+        )}
         <li>
           <a
             href="https://dgmstuart.github.io/blog/2022/02/18/building-a-bingo-app-in-react/"

src/data/config.d.ts

@@ -1,6 +1,7 @@
 export type Config = {
   name?: string;
   url: string;
+  videoListUrl?: string;
   wordList: WordListData;
 };
 export type WordListData = WordListGroupData[];

src/data/teamLindy.json

@@ -1,6 +1,7 @@
 {
   "name": "Team Lindy",
   "url": "https://bit.ly/lindybingocard",
+  "videoListUrl": "https://www.youtube.com/playlist?list=PLgsIo5h4KQoYzMCvcuBFTy7-qW8VgsFpT",
   "wordList": [
     {
       "title": "Formations",

src/layouts/ContentLayout.tsx

@@ -8,7 +8,7 @@ import type { Config } from "../data/config";
 
 const ContentLayout: React.FC = () => {
   const { t } = useTranslation();
-  const { name = "" } = useLoaderData() as Config;
+  const { name, videoListUrl } = useLoaderData() as Config;
 
   const headerContent = (
     <>
@@ -26,6 +26,7 @@ const ContentLayout: React.FC = () => {
       headerContent={headerContent}
       body={body}
       footerClass="Content-footer"
+      videoListUrl={videoListUrl}
     />
   );
 };

src/layouts/MainLayout.tsx

@@ -4,11 +4,12 @@ import Footer from "../components/Footer";
 import LanguagePicker from "../components/LanguagePicker";
 
 const MainLayout: React.FC<{
-  name: string;
+  name?: string;
   headerContent: ReactNode;
   body: ReactNode;
   footerClass?: string;
-}> = ({ name, headerContent, body, footerClass }) => {
+  videoListUrl?: string;
+}> = ({ name, headerContent, body, footerClass, videoListUrl }) => {
   return (
     <div>
       <section className="Card">
@@ -30,7 +31,7 @@ const MainLayout: React.FC<{
 
         {body}
       </section>
-      <Footer className={footerClass} />
+      <Footer className={footerClass} videoListUrl={videoListUrl} />
       <LanguagePicker />
     </div>
   );