Refactor: code for loading JSON files

Got this warning from Vite:

> [vite] warning: invalid import "./${listName}.json". Variable
> imports cannot import their own directory, place imports in a separate
> directory or make the import filename more specific. For example:
> import(`./foo/${bar}.js`).

...though I'm not sure why since it seemed to work fine anyway.

This feels better in any case: only one file loading the default word
list.

src/lib/JsonDataImporter.ts

@@ -0,0 +1,19 @@
+export default class JsonDataImporter<T> {
+  #defaultData: T;
+
+  constructor({ defaultData }: { defaultData: T }) {
+    this.#defaultData = defaultData;
+  }
+
+  async import(listName: string): Promise<T> {
+    let data = this.#defaultData;
+
+    try {
+      data = (await import(`../data/${listName}.json`)).default;
+    } catch (error) {
+      console.error("Failed to load the data", error);
+    }
+
+    return data;
+  }
+}

src/loaders/wordListLoaders.ts

@@ -1,5 +1,5 @@
 import defaultWordList from "../data/teamLindyWordList.json";
-import loader from "../data/loader";
+import JsonDataImporter from "../lib/JsonDataImporter";
 import type { Params } from "react-router-dom";
 import type { WordListData } from "../data/wordList";
 
@@ -13,7 +13,8 @@ export const wordListLoader = async ({
   params: Params<string>;
 }): Promise<WordListData> => {
   if (params.wordListName) {
-    return await loader(params.wordListName);
+    const importer = new JsonDataImporter({ defaultData: defaultWordList });
+    return await importer.import(params.wordListName);
   } else {
     console.error(
       "expected a param of 'wordListName' but didn't find one or it had a falsey value",