feat: use form and onSubmit to make forms easier to use

djpiper28 · Jun 18, 2024 · 74f9244 · 74f9244
1 parent e157915
commit 74f9244
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 130 deletions.
diff --git a/cahfrontend/src/components/gameControls/GameSettingsInput.tsx b/cahfrontend/src/components/gameControls/GameSettingsInput.tsx
@@ -23,7 +23,7 @@ interface Props {
 export default function GameSettingsInput(props: Readonly<Props>) {
   return (
     <div class="flex flex-col gap-2">
-      <div class="flex flex-row flex-wrap gap-2 md:gap-1">
+      <fieldset class="flex flex-row flex-wrap gap-2 md:gap-1">
         <Input
           inputType={InputType.Text}
           placeHolder="password"
@@ -74,7 +74,7 @@ export default function GameSettingsInput(props: Readonly<Props>) {
           label="Max Game Rounds"
           errorState={!validateMaxGameRounds(props.settings.maxRounds)}
         />
-      </div>
+      </fieldset>
 
       <p class="text-error-colour text-lg">{props.errorMessage}</p>
     </div>

diff --git a/cahfrontend/src/pages/create.tsx b/cahfrontend/src/pages/create.tsx
@@ -40,7 +40,7 @@ export default function Create() {
         cardPacksList.sort((a, b) => {
           if (!a.name || !b.name) return 0;
           return a.name.localeCompare(b.name);
-        }),
+        })
       );
     } catch (err) {
       console.error(err);
@@ -58,8 +58,70 @@ export default function Create() {
   const [playerName, setPlayerName] = createSignal("");
   const [gameSettings, setGameSettings] = createSignal(settings);
 
+  const onSubmit = async () => {
+    if (!validateGameSettings(settings)) {
+      console.error("The game settings are invalid");
+      return;
+    }
+
+    try {
+      await gameState.leaveGame();
+      clearGameCookies();
+    } catch (e) {
+      console.log(e);
+    }
+
+    apiClient.games
+      .createCreate({
+        settings: {
+          cardPacks: selectedPacks(),
+          gamePassword: gameSettings().gamePassword,
+          maxPlayers: gameSettings().maxPlayers,
+          maxRounds: gameSettings().maxRounds,
+          playingToPoints: gameSettings().playingToPoints,
+        },
+        playerName: playerName(),
+      })
+      .then((newGame) => {
+        console.log("Creating game for ", JSON.stringify(newGame.data));
+        cookieStorage.setItem(
+          playerIdCookie,
+          newGame.data.playerId ?? "error",
+          cookieOptions
+        );
+        cookieStorage.setItem(
+          gameIdParamCookie,
+          newGame.data.gameId ?? "error",
+          cookieOptions
+        );
+        cookieStorage.setItem(
+          gamePasswordCookie,
+          gameSettings().gamePassword,
+          cookieOptions
+        );
+        cookieStorage.setItem(
+          authenticationCookie,
+          newGame.data.authentication,
+          cookieOptions
+        );
+        navigate(
+          `${joinGameUrl}?${gameIdParamCookie}=${encodeURIComponent(
+            newGame.data.gameId ?? "error"
+          )}`
+        );
+      })
+      .catch((err) => {
+        setErrorMessage(err.error.error);
+      });
+  };
+
   return (
-    <>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit;
+      }}
+    >
       <Header text="Create a game" />
       <RoundedWhite>
         <SubHeader
@@ -95,67 +157,8 @@ export default function Create() {
           setSettings={setGameSettings}
         />
 
-        <Button
-          onClick={async () => {
-            if (!validateGameSettings(settings)) {
-              console.error("The game settings are invalid");
-              return;
-            }
-
-            try {
-              await gameState.leaveGame();
-              clearGameCookies();
-            } catch (e) {
-              console.log(e);
-            }
-
-            apiClient.games
-              .createCreate({
-                settings: {
-                  cardPacks: selectedPacks(),
-                  gamePassword: gameSettings().gamePassword,
-                  maxPlayers: gameSettings().maxPlayers,
-                  maxRounds: gameSettings().maxRounds,
-                  playingToPoints: gameSettings().playingToPoints,
-                },
-                playerName: playerName(),
-              })
-              .then((newGame) => {
-                console.log("Creating game for ", JSON.stringify(newGame.data));
-                cookieStorage.setItem(
-                  playerIdCookie,
-                  newGame.data.playerId ?? "error",
-                  cookieOptions,
-                );
-                cookieStorage.setItem(
-                  gameIdParamCookie,
-                  newGame.data.gameId ?? "error",
-                  cookieOptions,
-                );
-                cookieStorage.setItem(
-                  gamePasswordCookie,
-                  gameSettings().gamePassword,
-                  cookieOptions,
-                );
-                cookieStorage.setItem(
-                  authenticationCookie,
-                  newGame.data.authentication,
-                  cookieOptions,
-                );
-                navigate(
-                  `${joinGameUrl}?${gameIdParamCookie}=${encodeURIComponent(
-                    newGame.data.gameId ?? "error",
-                  )}`,
-                );
-              })
-              .catch((err) => {
-                setErrorMessage(err.error.error);
-              });
-          }}
-        >
-          Create Game
-        </Button>
+        <Button onClick={onSubmit}>Create Game</Button>
       </RoundedWhite>
-    </>
+    </form>
   );
 }
diff --git a/cahfrontend/src/pages/playerJoin.tsx b/cahfrontend/src/pages/playerJoin.tsx
@@ -32,77 +32,74 @@ export default function PlayerJoin() {
     return;
   }
 
-  return (
-    <RoundedWhite>
-      <Header text="Enter a username to join the game" />
-      <Input
-        inputType={InputType.Text}
-        label="Player Name"
-        value={playerName()}
-        onChanged={(value) => setPlayerName(value)}
-        placeHolder="John Smith"
-        errorState={!validatePlayerName(playerName())}
-      />
-      <Input
-        inputType={InputType.Text}
-        autocomplete="password"
-        label="Password, leave blank if none"
-        value={password()}
-        onChanged={(value) => setPassword(value)}
-        placeHolder="Password"
-        errorState={password().length > MaxPasswordLength}
-      />
-      <p class="text-error-colour">{error()}</p>
+  const onSubmit = async () => {
+    if (!validatePlayerName(playerName())) {
+      return;
+    }
 
-      <Button
-        onClick={async () => {
-          if (!validatePlayerName(playerName())) {
-            return;
-          }
+    setError("");
+    apiClient.games
+      .joinCreate({
+        gameId: gameId,
+        playerName: playerName(),
+        password: password(),
+      })
+      .then(async (res) => {
+        try {
+          await gameState.leaveGame();
+          clearGameCookies();
+        } catch (e) {
+          console.log(e);
+        }
 
-          setError("");
-          apiClient.games
-            .joinCreate({
-              gameId: gameId,
-              playerName: playerName(),
-              password: password(),
-            })
-            .then(async (res) => {
-              try {
-                await gameState.leaveGame();
-                clearGameCookies();
-              } catch (e) {
-                console.log(e);
-              }
+        cookieStorage.setItem(gamePasswordCookie, password(), cookieOptions);
+        cookieStorage.setItem(playerIdCookie, res.data.playerId, cookieOptions);
+        cookieStorage.setItem(gameIdParamCookie, gameId, cookieOptions);
+        cookieStorage.setItem(
+          authenticationCookie,
+          res.data.authentication,
+          cookieOptions
+        );
 
-              cookieStorage.setItem(
-                gamePasswordCookie,
-                password(),
-                cookieOptions,
-              );
-              cookieStorage.setItem(
-                playerIdCookie,
-                res.data.playerId,
-                cookieOptions,
-              );
-              cookieStorage.setItem(gameIdParamCookie, gameId, cookieOptions);
-              cookieStorage.setItem(
-                authenticationCookie,
-                res.data.authentication,
-                cookieOptions,
-              );
+        naviagte(
+          `${joinGameUrl}?${gameIdParamCookie}=${encodeURIComponent(gameId)}`
+        );
+      })
+      .catch((res) => {
+        setError(res.error.error);
+      });
+  };
 
-              naviagte(
-                `${joinGameUrl}?${gameIdParamCookie}=${encodeURIComponent(gameId)}`,
-              );
-            })
-            .catch((res) => {
-              setError(res.error.error);
-            });
+  return (
+    <RoundedWhite>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          onSubmit;
         }}
       >
-        Join Game
-      </Button>
+        <Header text="Enter a username to join the game" />
+        <Input
+          inputType={InputType.Text}
+          label="Player Name"
+          value={playerName()}
+          onChanged={(value) => setPlayerName(value)}
+          placeHolder="John Smith"
+          errorState={!validatePlayerName(playerName())}
+        />
+        <Input
+          inputType={InputType.Text}
+          autocomplete="password"
+          label="Password, leave blank if none"
+          value={password()}
+          onChanged={(value) => setPassword(value)}
+          placeHolder="Password"
+          errorState={password().length > MaxPasswordLength}
+        />
+        <p class="text-error-colour">{error()}</p>
+
+        <Button onClick={onSubmit}>Join Game</Button>
+      </form>
     </RoundedWhite>
   );
 }