feat: improve TeamPanel input placement

src/TeamPanel.tsx

@@ -1,21 +1,38 @@
-import { useEffect, useState } from "react";
-import { loadPlayers, User } from "./api";
+import { FormEvent, useEffect, useState } from "react";
+import { apiAuth, loadPlayers, User } from "./api";
 import { useSession } from "./Session";
 
 export const TeamPanel = () => {
   const { teams } = useSession();
-  const [players, setPlayers] = useState<User[] | null>(null);
-  const [newPlayer, setNewPlayer] = useState({
+  const newPlayerTemplate = {
+    id: 0,
     username: "",
     display_name: "",
     number: "",
-  });
+    email: "",
+  } as User;
+  const [error, setError] = useState("");
+  const [players, setPlayers] = useState<User[] | null>(null);
+  const [player, setPlayer] = useState(newPlayerTemplate);
+
   useEffect(() => {
     if (teams) {
       loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
     }
   }, [teams]);
 
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (teams) {
+      const r = await apiAuth(
+        `player/add/${teams?.activeTeam}`,
+        player,
+        "POST"
+      );
+      if (r.detail) setError(r.detail);
+    }
+  }
+
   if (teams) {
     const activeTeam = teams.teams.filter(
       (team) => team.id == teams?.activeTeam
@@ -23,36 +40,57 @@ export const TeamPanel = () => {
     return (
       <div className="team-panel">
         <h1>{activeTeam.name}</h1>
-        <div className="stack column">
+        <div>
           <input type="text" value={activeTeam.location || ""} disabled />
+          <br />
           <input type="text" value={activeTeam.country || ""} disabled />
           <hr style={{ width: "100%" }} />
 
           <h2>players</h2>
-          <div
-            style={{
-              display: "flex",
-              flexWrap: "wrap",
-              justifyContent: "center",
-            }}
-          >
-            {players &&
-              players.map((player) => (
-                <div className="team-player" key={player.id}>
-                  {player.display_name}
-                </div>
-              ))}
-          </div>
-
+          {players ? (
+            <div
+              style={{
+                display: "flex",
+                flexWrap: "wrap",
+                justifyContent: "center",
+              }}
+            >
+              {players &&
+                players.map((p) => (
+                  <button
+                    className="team-player"
+                    key={p.id}
+                    onClick={() => setPlayer(p)}
+                  >
+                    {p.display_name}
+                  </button>
+                ))}
+              <button
+                className="team-player new-player"
+                key="add-player"
+                onClick={() => setPlayer(newPlayerTemplate)}
+              >
+                +
+              </button>
+            </div>
+          ) : (
+            <span className="loader" />
+          )}
           <hr style={{ width: "100%" }} />
-          <div className="new-player-inputs">
+
+          <form className="new-player-inputs" onSubmit={handleSubmit}>
             <div>
               <label>name</label>
               <input
                 type="text"
-                value={newPlayer.display_name}
+                required
+                value={player.display_name}
                 onChange={(e) =>
-                  setNewPlayer({ ...newPlayer, display_name: e.target.value })
+                  setPlayer({
+                    ...player,
+                    display_name: e.target.value,
+                    username: e.target.value.toLowerCase().replace(/\W/g, ""),
+                  })
                 }
               />
             </div>
@@ -60,9 +98,10 @@ export const TeamPanel = () => {
               <label>username</label>
               <input
                 type="text"
-                value={newPlayer.username}
+                required
+                value={player.username}
                 onChange={(e) =>
-                  setNewPlayer({ ...newPlayer, username: e.target.value })
+                  setPlayer({ ...player, username: e.target.value })
                 }
               />
             </div>
@@ -70,16 +109,21 @@ export const TeamPanel = () => {
               <label>number</label>
               <input
                 type="text"
-                value={newPlayer.number}
+                value={player.number}
                 onChange={(e) =>
-                  setNewPlayer({ ...newPlayer, number: e.target.value })
+                  setPlayer({ ...player, number: e.target.value })
                 }
               />
             </div>
-          </div>
-          <button className="team-player" id="new-team-player">
-            add player
-          </button>
+            <div>
+              {error && (
+                <span style={{ color: "red", margin: "auto" }}>{error}</span>
+              )}
+            </div>
+            <button className="team-player new-player">
+              {player.id === 0 ? "add player" : "modify player"}
+            </button>
+          </form>
         </div>
       </div>
     );