diff --git a/src/App.tsx b/src/App.tsx index f4fe5b0..dcb66a5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,30 +1,55 @@ import React from "react"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; import ContentLayout from "./layouts/ContentLayout"; -import Card from "./components/Card"; -import WordList from "./components/WordList"; -import wordList from "./data/teamLindyWordList.json"; +import Card from "./components/DynamicCard"; +import WordList from "./components/DynamicWordList"; import QRCode from "./components/QRCode"; -import flattenWordList from "./lib/flattenWordList"; +import { + defaultWordListLoader, + wordListLoader, +} from "./loaders/wordListLoaders"; const App: React.FC = () => { - const flattenedWordList = flattenWordList(wordList); + const rootPath = "/bingo-frontend"; const router = createBrowserRouter([ { - path: "/bingo-frontend", - element: , + path: rootPath, + loader: defaultWordListLoader, + element: , }, { - path: "/", + path: rootPath, element: , children: [ { - path: "/bingo-frontend/word_list", - element: , + path: "word_list", + element: , + loader: defaultWordListLoader, }, { - path: "/bingo-frontend/qr_code", + path: "qr_code", + element: , + }, + ], + }, + { + path: `${rootPath}/:wordListName`, + loader: wordListLoader, + element: , + }, + { + path: `${rootPath}/:wordListName`, + loader: wordListLoader, + element: , + children: [ + { + path: "word_list", + element: , + loader: wordListLoader, + }, + { + path: "qr_code", element: , }, ], diff --git a/src/components/CardActions.tsx b/src/components/CardActions.tsx index 7884a84..4014d85 100644 --- a/src/components/CardActions.tsx +++ b/src/components/CardActions.tsx @@ -20,7 +20,7 @@ const CardActions: React.FC<{ onClick={shareClick} activeDuration={1500} /> - + QR code Icon diff --git a/src/components/DynamicCard.tsx b/src/components/DynamicCard.tsx new file mode 100644 index 0000000..f3280c1 --- /dev/null +++ b/src/components/DynamicCard.tsx @@ -0,0 +1,18 @@ +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"; + +const DynamicCard: React.FC = () => { + const wordList = useLoaderData() as WordListData; + + 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 ; + } +}; + +export default DynamicCard; diff --git a/src/components/DynamicWordList.tsx b/src/components/DynamicWordList.tsx new file mode 100644 index 0000000..c6886a0 --- /dev/null +++ b/src/components/DynamicWordList.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import { useLoaderData } from "react-router-dom"; +import WordList from "./WordList"; +import type { WordListData } from "../data/wordList"; + +const DynamicWordList: React.FC = () => { + const wordList = useLoaderData() as WordListData; + + if (wordList.length > 0) { + return ; + } +}; + +export default DynamicWordList; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 519bfe3..4b33c3a 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -8,7 +8,7 @@ const Footer: React.FC<{ className?: string }> = ({ className }) => {