Data loading for the word pack

Author: miorel

public/fruits.txt

@@ -0,0 +1,56 @@
+APPLE
+APRICOT
+BANANA
+BLACKBERRY
+BLUEBERRY
+BOYSENBERRY
+BREADFRUIT
+CANTALOUPE
+CARAMBOLA
+CHERIMOYA
+CHERRY
+CLEMENTINE
+COCONUT
+CRANBERRY
+DATE
+DRAGONFRUIT
+DURIAN
+ELDERBERRY
+FIG
+GOOSEBERRY
+GRAPE
+GRAPEFRUIT
+GUAVA
+HONEYDEW
+JACKFRUIT
+JUJUBE
+KIWI
+KUMQUAT
+LEMON
+LIME
+LYCHEE
+MANGO
+MARIONBERRY
+MULBERRY
+NECTARINE
+ORANGE
+PAPAYA
+PASSIONFRUIT
+PEACH
+PEAR
+PERSIMMON
+PINEAPPLE
+PLANTAIN
+PLUM
+POMEGRANATE
+POMELO
+QUINCE
+RAMBUTAN
+RASPBERRY
+STRAWBERRY
+TAMARIND
+TANGELO
+TANGERINE
+TOMATO
+WATERMELON
+YUZU

src/App.tsx

@@ -1,18 +1,44 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import styles from "./App.module.css";
 import useAppState from "./useAppState";
 
 function App() {
   const [state, dispatch] = useAppState();
 
+  useEffect(() => {
+    fetch("fruits.txt")
+      .then((response) => response.text())
+      .then((text) => {
+        setTimeout(
+          () =>
+            dispatch({
+              type: "load-data",
+              wordPack: text
+                .split("\n")
+                .map((word) => word.toUpperCase().trim())
+                .filter(Boolean),
+            }),
+          3000,
+        );
+      });
+  }, []);
+
   let content = null;
   switch (state.phase) {
     case "pre-game": {
+      if (state.wordPack == null) {
+        content = <>Loading data...</>;
+        break;
+      }
+
       content = (
-        <button onClick={() => dispatch({ type: "start-game" })}>
-          Begin new game
-        </button>
+        <>
+          <div>Word pack is ready with {state.wordPack.length} words!</div>
+          <button onClick={() => dispatch({ type: "start-game" })}>
+            Begin new game
+          </button>
+        </>
       );
       break;
     }

src/getRandomWord.ts

@@ -1,41 +1,62 @@
 import { useReducer, type ActionDispatch } from "react";
 
-import getRandomWord from "./getRandomWord";
+import getRandomElement from "./util/getRandomElement";
 
-export type State =
+export type State = Readonly<
   | {
       phase: "pre-game";
+      wordPack: readonly string[] | null;
     }
   | {
       phase: "in-game";
       goal: string;
       guess: string;
+      wordPack: readonly string[];
     }
   | {
       phase: "post-game";
       goal: string;
-    };
+      wordPack: readonly string[];
+    }
+>;
 
 export function getInitialState(): State {
-  return { phase: "pre-game" };
+  return { phase: "pre-game", wordPack: null };
 }
 
 export type Action =
+  | { type: "load-data"; wordPack: readonly string[] }
   | { type: "start-game" }
   | { type: "update-guess"; newGuess: string };
 
 export function reducer(state: State, action: Action): State {
   switch (action.type) {
+    case "load-data": {
+      // No-op if not in pre-game phase.
+      if (state.phase !== "pre-game") {
+        return state;
+      }
+
+      return { ...state, wordPack: action.wordPack };
+    }
+
     case "start-game": {
       // No-op if already in a game.
       if (state.phase === "in-game") {
         return state;
       }
 
+      // No-op if data is not loaded.
+      const { wordPack } = state;
+      if (wordPack == null) {
+        return state;
+      }
+
       return {
         phase: "in-game",
-        goal: getRandomWord(),
+        goal: getRandomElement(wordPack),
         guess: "",
+        wordPack,
       };
     }
 
@@ -46,7 +67,11 @@ export function reducer(state: State, action: Action): State {
       }
 
       if (action.newGuess === state.goal) {
-        return { phase: "post-game", goal: state.goal };
+        return {
+          phase: "post-game",
+          goal: state.goal,
+          wordPack: state.wordPack,
+        };
       }
 
       return { ...state, guess: action.newGuess };