Separate session data per config

Pass the file name to the session data key, so that we get separate
entries per config.

This has the effect of auto-switching the grid when choosing a new
config - that's not actually an expected use case but it feels correct
that the app should only be able to show a consistent set of config and
words.

Jump through some hoops to avoid not found resulting in junk
localstorage entries:

Since we fall back to a default list if the name is not recognised
(maybe a bad idea?), the param doesn't always match the list filename,
and we don't want eg http://localhost:5173/bingo-frontend/foo to result
in storing bingoSession-foo in localstorage.

Maybe we can skip all that nonsense and do some kind of redirect or not
found instead?

src/App.tsx

@@ -28,7 +28,7 @@ const App: React.FC = () => {
         {
           path: "qr_code",
           element: <QRCode />,
-          loader: configLoader,
+          loader: defaultConfigLoader,
         },
       ],
     },

src/components/Card.test.tsx

@@ -13,7 +13,7 @@ describe("'New card' button", () => {
   test("changes the words on the card", () => {
     render(
       <BrowserRouter>
-        <Card wordList={wordList} name={""} url={""} />
+        <Card wordList={wordList} name={""} url={""} id={""} />
       </BrowserRouter>,
     );
     const initialCells = screen.queryAllByRole("gridcell");
@@ -30,7 +30,7 @@ describe("'New card' button", () => {
   test("clears any stamped cells", () => {
     render(
       <BrowserRouter>
-        <Card wordList={wordList} name={""} url={""} />
+        <Card wordList={wordList} name={""} url={""} id={""} />
       </BrowserRouter>,
     );
     const cells = screen.queryAllByRole("gridcell");
@@ -49,7 +49,7 @@ describe("'Clear' button", () => {
   test("clears any stamped cells", () => {
     render(
       <BrowserRouter>
-        <Card wordList={wordList} name={""} url={""} />
+        <Card wordList={wordList} name={""} url={""} id={""} />
       </BrowserRouter>,
     );
     const cells = screen.queryAllByRole("gridcell");
@@ -74,7 +74,7 @@ describe("'Share' button", () => {
     const user = userEvent.setup();
     render(
       <BrowserRouter>
-        <Card wordList={wordList} name={""} url={""} />
+        <Card wordList={wordList} name={""} url={""} id={""} />
         <textarea rows={5} />
       </BrowserRouter>,
     );

src/components/Card.tsx

@@ -8,13 +8,16 @@ import share from "../lib/share";
 import type { CellProps } from "./Cell";
 import type { ButtonClickHandler } from "../clickHandler";
 
-const Card: React.FC<{ name: string; url: string; wordList: string[] }> = ({
-  name,
-  url,
-  wordList,
-}) => {
-  const [cellDataList, toggleStamped, setNewWords, clearAllCells] =
-    useCard(wordList);
+const Card: React.FC<{
+  id: string;
+  name: string;
+  url: string;
+  wordList: string[];
+}> = ({ id, name, url, wordList }) => {
+  const [cellDataList, toggleStamped, setNewWords, clearAllCells] = useCard(
+    id,
+    wordList,
+  );
 
   const cellPropsList: CellProps[] = cellDataList.map((cellData, index) => ({
     ...cellData,

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 { Config } from "../data/config";
+import type { KeyedConfig } from "../loaders/configLoaders";
 
 const DynamicCard: React.FC = () => {
-  const { name = "", url, wordList } = useLoaderData() as Config;
+  const { id, name = "", url, wordList } = 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} />;
+    return <Card wordList={words} name={name} url={url} id={id} />;
   }
 };
 

src/hooks/useCard.ts

@@ -10,7 +10,7 @@ type GetterSetters = [
   ButtonClickHandler,
 ];
 
-const useCard = (wordList: string[]): GetterSetters => {
+const useCard = (id: string, wordList: string[]): GetterSetters => {
   const newWords = (): string[] => shuffle(wordList).slice(0, 25);
 
   const newCellDataList = function (): CellData[] {
@@ -19,8 +19,10 @@ const useCard = (wordList: string[]): GetterSetters => {
     });
   };
 
-  const [cellDataList, setCellDataList] =
-    useSession<CellData[]>(newCellDataList);
+  const [cellDataList, setCellDataList] = useSession<CellData[]>({
+    keyName: `bingoSession-${id}`,
+    initFunction: newCellDataList,
+  });
 
   const setStamped = (index: number, stamped: boolean): void => {
     setCellDataList(

src/hooks/useSession.ts

@@ -3,10 +3,16 @@ import GuaranteedJsonSession from "../lib/GuaranteedJsonSession";
 
 type GetterSetter<T> = [T, (data: T) => void];
 
-const useSession = function <T>(initialData: () => T): GetterSetter<T> {
+const useSession = function <T>({
+  keyName,
+  initFunction,
+}: {
+  keyName: string;
+  initFunction: () => T;
+}): GetterSetter<T> {
   const session = useMemo(
-    () => new GuaranteedJsonSession<T>(initialData),
-    [initialData],
+    () => new GuaranteedJsonSession<T>({ keyName, initFunction }),
+    [initFunction],
   );
 
   const [data, setData] = useState<T>(session.sessionData);

src/lib/GuaranteedJsonSession.test.ts

@@ -7,7 +7,10 @@ beforeEach(() => {
 
 test("can store an array of cell data in the session", () => {
   const initFunction = () => [];
-  const session = new GuaranteedJsonSession<CellData[]>(initFunction);
+  const session = new GuaranteedJsonSession<CellData[]>({
+    keyName: "key",
+    initFunction,
+  });
 
   session.sessionData = [
     { word: "Aardvark", stamped: false },
@@ -22,7 +25,10 @@ test("can store an array of cell data in the session", () => {
 
 test("returns a new array if nothing is stored", () => {
   const initFunction = () => [{ word: "Camel", stamped: false }];
-  const session = new GuaranteedJsonSession<CellData[]>(initFunction);
+  const session = new GuaranteedJsonSession<CellData[]>({
+    keyName: "key",
+    initFunction,
+  });
 
   expect(session.sessionData).toEqual([{ word: "Camel", stamped: false }]);
 });

src/lib/GuaranteedJsonSession.ts

@@ -7,8 +7,14 @@ class GuaranteedJsonSession<T> {
   #session: JsonSession<T>;
   #initFunction: () => T;
 
-  constructor(initFunction: () => T) {
-    this.#session = new JsonSession<T>();
+  constructor({
+    keyName,
+    initFunction,
+  }: {
+    keyName: string;
+    initFunction: () => T;
+  }) {
+    this.#session = new JsonSession<T>(keyName);
     this.#initFunction = initFunction;
   }
 

src/lib/JsonSession.test.ts

@@ -6,7 +6,7 @@ beforeEach(() => {
 });
 
 test("can store an array of cell data in the session", () => {
-  const session = new JsonSession<CellData[]>();
+  const session = new JsonSession<CellData[]>("key");
 
   session.sessionData = [
     { word: "Aardvark", stamped: false },
@@ -20,7 +20,7 @@ test("can store an array of cell data in the session", () => {
 });
 
 test("returns null if nothing is stored", () => {
-  const session = new JsonSession();
+  const session = new JsonSession("Key");
 
   expect(session.sessionData).toEqual(null);
 });

src/lib/JsonSession.ts

@@ -1,6 +1,10 @@
 class JsonSession<T> {
   #store = window.localStorage;
-  #keyName = "sessionData";
+  #keyName: string;
+
+  constructor(keyName: string) {
+    this.#keyName = keyName;
+  }
 
   get sessionData(): T | null {
     const sessionDataString: string | null = this.#store.getItem(this.#keyName);

src/lib/importJsonData.ts

@@ -0,0 +1,21 @@
+type EmptyObject = Record<string, never>;
+type Result<T> =
+  | { success: true; data: T }
+  | { success: false; data: EmptyObject };
+
+const importJsonData = async <T>(listName: string): Promise<Result<T>> => {
+  try {
+    return {
+      success: true,
+      data: (await import(`../data/${listName}.json`)).default,
+    };
+  } catch (error) {
+    return {
+      success: false,
+      data: {},
+    };
+    console.error("Failed to load the data", error);
+  }
+};
+
+export default importJsonData;

src/loaders/configLoaders.ts

@@ -1,25 +1,34 @@
 import defaultConfig from "../data/teamLindy.json";
 import nullConfig from "../data/teamLindy.json";
-import JsonDataImporter from "../lib/JsonDataImporter";
+import importJsonData from "../lib/importJsonData";
 import type { Params } from "react-router-dom";
 import type { Config } from "../data/config";
 
-export const defaultConfigLoader = (): Config => {
-  return defaultConfig;
+export type KeyedConfig = { id: string } & Config;
+
+const defaultKeyedConfig: KeyedConfig = { id: "teamLindy", ...defaultConfig };
+
+export const defaultConfigLoader = (): KeyedConfig => {
+  return defaultKeyedConfig;
 };
 
 export const configLoader = async ({
   params,
 }: {
   params: Params<string>;
-}): Promise<Config> => {
-  if (params.gameName) {
-    const importer = new JsonDataImporter({ defaultData: defaultConfig });
-    return await importer.import(params.gameName);
+}): Promise<KeyedConfig> => {
+  const id = params.gameName;
+  if (id) {
+    const { success, data } = await importJsonData<Config>(id);
+    if (success) {
+      return { id, ...data };
+    } else {
+      return defaultKeyedConfig;
+    }
   } else {
     console.error(
       "expected a param of 'gameName' but didn't find one or it had a falsey value",
     );
-    return nullConfig;
+    return { id: "null", ...nullConfig };
   }
 };