fix(wordlist): store settings in state \o,0/

src/App.tsx

@@ -3,9 +3,11 @@ import React, { useState } from 'react';
 import { Layout } from './components';
 import { Game, Settings } from './pages';
 import { Pages } from './types';
+import { getSettingsFromLocalStorage } from './utilities';
 
 export const App = () => {
   const [page, setPage] = useState<Pages>(Pages.Game);
+  const [settings, setSettings] = useState<string[]>(getSettingsFromLocalStorage());
 
   const AppWrapper = ({ children }: { children: React.ReactNode }) => (
     <Layout setPage={setPage} page={page}>
@@ -17,14 +19,14 @@ export const App = () => {
     case Pages.Settings:
       return (
         <AppWrapper>
-          <Settings goToGame={() => setPage(Pages.Game)} />
+          <Settings goToGame={() => setPage(Pages.Game)} settings={settings} setSettings={setSettings} />
         </AppWrapper>
       );
     case Pages.Game:
     default:
       return (
         <AppWrapper>
-          <Game />
+          <Game settings={settings} />
         </AppWrapper>
       );
   }

src/pages/game/Game.tsx

@@ -8,7 +8,13 @@ import { GuessesStateProps, PreviousWordStateProps } from './stateProps';
 
 const wordListContainer = new WordListContainer();
 
-export const Game = () => {
+interface GameProps {
+  settings: string[];
+}
+
+export const Game = (props: GameProps) => {
+  const { settings } = props;
+
   const inputRef = React.useRef<null | HTMLInputElement>(null);
 
   // I don't really know if this works, but it is set after the wordlist has been filtered
@@ -36,7 +42,7 @@ export const Game = () => {
 
   useEffect(() => {
     if (!gameStarted) {
-      wordListContainer.applySettings().then(() => {
+      wordListContainer.applySettings(settings).then(() => {
         // Make the game playable after the wordlist has been loaded with applied filters
         setReady(true);
         setCurrentWord(wordListContainer.getRandomWord());

src/pages/game/components/Stats.tsx

@@ -18,8 +18,14 @@ interface StatsProps {
 }
 
 // Avoiding 0 division here (if that is even possible?)
-const calculatePerMinute = (correct: number, clockDuration: number): string =>
-  Math.round(correct / (clockDuration === 0 ? 0.0001 : clockDuration / (1000 * 60))).toLocaleString();
+const calculatePerMinute = (correct: number, clockDuration: number): string => {
+  const value = Math.round(correct / (clockDuration === 0 ? 0.0001 : clockDuration / (1000 * 60)));
+  if (value <= 0) {
+    return '0';
+  }
+
+  return value.toLocaleString();
+};
 
 export const Stats = ({ wordListSize, clockDuration, guesses }: StatsProps) => (
   <div className="flex flex-col justify-center space-x-4">

src/pages/settings/Settings.tsx

@@ -1,11 +1,13 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import { LETTERS, NUMBERS, SIGNS } from '../../symbols/keys';
-import { getSettingsFromLocalStorage, saveSettingsInLocalStorage } from '../../utilities';
+import { saveSettingsInLocalStorage } from '../../utilities';
 import { SettingsSection } from './components';
 
 interface SettingsProps {
   goToGame: () => void;
+  settings: string[];
+  setSettings: React.Dispatch<React.SetStateAction<string[]>>;
 }
 
 const numberOfSymbolsSelectedForSection = (symbols: string[], settings: string[]): string =>
@@ -26,8 +28,8 @@ const sections: { symbols: string[]; heading: string }[] = [
   },
 ];
 
-export const Settings = ({ goToGame }: SettingsProps) => {
-  const [settings, setSettings] = useState<string[]>(getSettingsFromLocalStorage());
+export const Settings = (props: SettingsProps) => {
+  const { settings, setSettings, goToGame } = props;
 
   return (
     <div className="flex justify-center flex-col w-full max-w-xl">

src/wordListContainer/wordListContainer.ts

@@ -1,4 +1,3 @@
-import { getSettingsFromLocalStorage } from '../utilities';
 import wordsPayload from './words.json';
 
 // TODO
@@ -15,8 +14,8 @@ export class WordListContainer {
     this.lookup = wordsPayload.words;
   }
 
-  async applySettings() {
-    this.settings = getSettingsFromLocalStorage();
+  async applySettings(settings: string[]) {
+    this.settings = settings;
 
     // There has got to be a better way of doing this lmao
     for (const word of this.lookup) {