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}
/>
-
+
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 }) => {