Merge pull request #22 from dgmstuart/config

Move game name and url into config

src/App.tsx

@@ -4,53 +4,53 @@ import ContentLayout from "./layouts/ContentLayout";
 import Card from "./components/DynamicCard";
 import WordList from "./components/DynamicWordList";
 import QRCode from "./components/QRCode";
-import {
-  defaultWordListLoader,
-  wordListLoader,
-} from "./loaders/wordListLoaders";
+import { defaultConfigLoader, configLoader } from "./loaders/configLoaders";
 
 const App: React.FC = () => {
   const rootPath = "/bingo-frontend";
 
   const router = createBrowserRouter([
     {
       path: rootPath,
-      loader: defaultWordListLoader,
+      loader: defaultConfigLoader,
       element: <Card />,
     },
     {
       path: rootPath,
       element: <ContentLayout />,
+      loader: defaultConfigLoader,
       children: [
         {
           path: "word_list",
           element: <WordList />,
-          loader: defaultWordListLoader,
+          loader: defaultConfigLoader,
         },
         {
           path: "qr_code",
           element: <QRCode />,
+          loader: configLoader,
         },
       ],
     },
     {
-      path: `${rootPath}/:wordListName`,
-      loader: wordListLoader,
+      path: `${rootPath}/:gameName`,
+      loader: configLoader,
       element: <Card />,
     },
     {
-      path: `${rootPath}/:wordListName`,
-      loader: wordListLoader,
+      path: `${rootPath}/:gameName`,
+      loader: configLoader,
       element: <ContentLayout />,
       children: [
         {
           path: "word_list",
           element: <WordList />,
-          loader: wordListLoader,
+          loader: configLoader,
         },
         {
           path: "qr_code",
           element: <QRCode />,
+          loader: configLoader,
         },
       ],
     },

src/components/Card.test.tsx

@@ -4,16 +4,16 @@ import userEvent from "@testing-library/user-event";
 import Card from "./Card";
 import { BrowserRouter } from "react-router-dom";
 import stripIndent from "strip-indent";
-import teamLindyWordList from "../data/teamLindyWordList.json";
+import teamLindy from "../data/teamLindy.json";
 import flattenWordList from "../lib/flattenWordList";
 
-const wordList: string[] = flattenWordList(teamLindyWordList);
+const wordList: string[] = flattenWordList(teamLindy.wordList);
 
 describe("'New card' button", () => {
   test("changes the words on the card", () => {
     render(
       <BrowserRouter>
-        <Card wordList={wordList} />
+        <Card wordList={wordList} name={""} url={""} />
       </BrowserRouter>,
     );
     const initialCells = screen.queryAllByRole("gridcell");
@@ -30,7 +30,7 @@ describe("'New card' button", () => {
   test("clears any stamped cells", () => {
     render(
       <BrowserRouter>
-        <Card wordList={wordList} />
+        <Card wordList={wordList} name={""} url={""} />
       </BrowserRouter>,
     );
     const cells = screen.queryAllByRole("gridcell");
@@ -49,7 +49,7 @@ describe("'Clear' button", () => {
   test("clears any stamped cells", () => {
     render(
       <BrowserRouter>
-        <Card wordList={wordList} />
+        <Card wordList={wordList} name={""} url={""} />
       </BrowserRouter>,
     );
     const cells = screen.queryAllByRole("gridcell");
@@ -74,7 +74,7 @@ describe("'Share' button", () => {
     const user = userEvent.setup();
     render(
       <BrowserRouter>
-        <Card wordList={wordList} />
+        <Card wordList={wordList} name={""} url={""} />
         <textarea rows={5} />
       </BrowserRouter>,
     );

src/components/Card.tsx

@@ -8,7 +8,11 @@ import share from "../lib/share";
 import type { CellProps } from "./Cell";
 import type { ButtonClickHandler } from "../clickHandler";
 
-const Card: React.FC<{ wordList: string[] }> = ({ wordList }) => {
+const Card: React.FC<{ name: string; url: string; wordList: string[] }> = ({
+  name,
+  url,
+  wordList,
+}) => {
   const [cellDataList, toggleStamped, setNewWords, clearAllCells] =
     useCard(wordList);
 
@@ -20,9 +24,9 @@ const Card: React.FC<{ wordList: string[] }> = ({ wordList }) => {
   const shareCard: ButtonClickHandler = () => {
     const message = emojiGrid(cellDataList);
     share({
-      title: "Team Lindy Bingo",
+      title: `${name} Bingo`,
       text: message,
-      url: "https://bit.ly/lindybingocard",
+      url: url,
     });
   };
 
@@ -35,7 +39,7 @@ const Card: React.FC<{ wordList: string[] }> = ({ wordList }) => {
   );
   const body = <Grid cellPropsList={cellPropsList} />;
 
-  return <MainLayout headerContent={headerContent} body={body} />;
+  return <MainLayout name={name} headerContent={headerContent} body={body} />;
 };
 
 export default Card;

src/components/DynamicCard.tsx

@@ -2,16 +2,16 @@ import React from "react";
 import { useLoaderData } from "react-router-dom";
 import Card from "./Card";
 import flattenWordList from "../lib/flattenWordList";
-import type { WordListData } from "../data/wordList";
+import type { Config } from "../data/config";
 
 const DynamicCard: React.FC = () => {
-  const wordList = useLoaderData() as WordListData;
+  const { name = "", url, wordList } = useLoaderData() as Config;
 
   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} />;
+    return <Card wordList={words} name={name} url={url} />;
   }
 };
 

src/components/DynamicWordList.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { useLoaderData } from "react-router-dom";
 import WordList from "./WordList";
-import type { WordListData } from "../data/wordList";
+import type { Config } from "../data/config";
 
 const DynamicWordList: React.FC = () => {
-  const wordList = useLoaderData() as WordListData;
+  const { wordList } = useLoaderData() as Config;
 
   if (wordList.length > 0) {
     return <WordList wordList={wordList} />;

src/components/QRCode.tsx

@@ -1,12 +1,17 @@
 import React from "react";
+import { useLoaderData } from "react-router-dom";
 import QRCodeImage from "react-qr-code";
 import "./QRCode.css";
+import type { Config } from "../data/config";
 
 const QRCode: React.FC = () => {
+  const { url } = useLoaderData() as Config;
+
+  console.log(url);
   return (
     <div className="QRCode">
       <QRCodeImage
-        value="https://bit.ly/lindybingocard"
+        value={url}
         size={500}
         className="QRCodeImage"
         bgColor="hsla(28, 41%, 95%, 0.7)"

src/components/WordList.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import "./WordList.css";
 import normaliseWord from "../lib/normaliseWord";
-import type { WordListGroupData } from "../data/wordList";
+import type { WordListGroupData } from "../data/config";
 
 const WordList: React.FC<{ wordList: WordListGroupData[] }> = ({
   wordList,

src/data/wordList.d.ts → src/data/config.d.ts

@@ -1,3 +1,8 @@
+export type Config = {
+  name?: string;
+  url: string;
+  wordList: WordListData;
+};
 export type WordListData = WordListGroupData[];
 export type WordListGroupData = {
   title: string;

src/data/null.json

@@ -0,0 +1,5 @@
+{
+  "title": "Not Found",
+  "url": "https://bit.ly/lindybingocard",
+  "wordList": []
+}