feat: Team management panel

the display name of a player is the same for all teams... change that?

src/App.css

@@ -507,9 +507,15 @@ button {
   &.new-player {
     background-color: #3838;
   }
+
+  &.disable-player {
+    background-color: #e338;
+  }
 }
 
 .new-player-inputs {
+  display: flex;
+  flex-direction: column;
   margin: auto;
 
   div {

src/TeamPanel.tsx

@@ -1,6 +1,7 @@
 import { FormEvent, useEffect, useState } from "react";
 import { apiAuth, loadPlayers, User } from "./api";
 import { useSession } from "./Session";
+import { ErrorState } from "./types";
 
 export const TeamPanel = () => {
   const { teams } = useSession();
@@ -11,12 +12,13 @@ export const TeamPanel = () => {
     number: "",
     email: "",
   } as User;
-  const [error, setError] = useState("");
+  const [error, setError] = useState<ErrorState>();
   const [players, setPlayers] = useState<User[] | null>(null);
   const [player, setPlayer] = useState(newPlayerTemplate);
 
   useEffect(() => {
     if (teams) {
+      setError({ ok: true, message: "" });
       loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
     }
   }, [teams]);
@@ -24,16 +26,45 @@ export const TeamPanel = () => {
   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 (player.id === 0) {
+        const r = await apiAuth(`player/${teams?.activeTeam}`, player, "POST");
+        if (r.detail) setError({ ok: false, message: r.detail });
+        else {
+          setError({ ok: true, message: r });
+          loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
+        }
+      } else {
+        const r = await apiAuth(`player/${teams?.activeTeam}`, player, "PUT");
+        if (r.detail) setError({ ok: false, message: r.detail });
+        else {
+          setError({ ok: true, message: r });
+          loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
+        }
+      }
     }
   }
 
-  if (teams) {
+  async function handleDisable(e: FormEvent) {
+    e.preventDefault();
+    if (teams && player.id !== 0) {
+      var confirmation = confirm("are you sure?");
+      if (confirmation) {
+        const r = await apiAuth(
+          `player/${teams?.activeTeam}`,
+          { player_id: player.id },
+          "DELETE"
+        );
+        if (r.detail) setError({ ok: false, message: r.detail });
+        else {
+          setError({ ok: true, message: r });
+          setPlayer(newPlayerTemplate);
+          loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
+        }
+      }
+    }
+  }
+
+  if (teams && players) {
     const activeTeam = teams.teams.filter(
       (team) => team.id == teams?.activeTeam
     )[0];
@@ -60,7 +91,10 @@ export const TeamPanel = () => {
                   <button
                     className="team-player"
                     key={p.id}
-                    onClick={() => setPlayer(p)}
+                    onClick={() => {
+                      setPlayer(p);
+                      setError({ ok: true, message: "" });
+                    }}
                   >
                     {p.display_name}
                   </button>
@@ -68,7 +102,10 @@ export const TeamPanel = () => {
               <button
                 className="team-player new-player"
                 key="add-player"
-                onClick={() => setPlayer(newPlayerTemplate)}
+                onClick={() => {
+                  setPlayer(newPlayerTemplate);
+                  setError({ ok: true, message: "" });
+                }}
               >
                 +
               </button>
@@ -85,13 +122,14 @@ export const TeamPanel = () => {
                 type="text"
                 required
                 value={player.display_name}
-                onChange={(e) =>
+                onChange={(e) => {
                   setPlayer({
                     ...player,
                     display_name: e.target.value,
                     username: e.target.value.toLowerCase().replace(/\W/g, ""),
-                  })
-                }
+                  });
+                  setError({ ok: true, message: "" });
+                }}
               />
             </div>
             <div>
@@ -99,30 +137,62 @@ export const TeamPanel = () => {
               <input
                 type="text"
                 required
+                disabled={player.id !== 0}
                 value={player.username}
-                onChange={(e) =>
-                  setPlayer({ ...player, username: e.target.value })
-                }
+                onChange={(e) => {
+                  setPlayer({ ...player, username: e.target.value });
+                  setError({ ok: true, message: "" });
+                }}
               />
             </div>
             <div>
-              <label>number</label>
+              <label>number (optional)</label>
               <input
                 type="text"
-                value={player.number}
-                onChange={(e) =>
-                  setPlayer({ ...player, number: e.target.value })
-                }
+                value={player.number || ""}
+                onChange={(e) => {
+                  setPlayer({ ...player, number: e.target.value });
+                  setError({ ok: true, message: "" });
+                }}
               />
             </div>
             <div>
-              {error && (
-                <span style={{ color: "red", margin: "auto" }}>{error}</span>
+              <label>email (optional)</label>
+              <input
+                type="email"
+                value={player.email || ""}
+                onChange={(e) => {
+                  setPlayer({ ...player, email: e.target.value });
+                  setError({ ok: true, message: "" });
+                }}
+              />
+            </div>
+            <div style={{ margin: "auto" }}>
+              {error?.message && (
+                <span
+                  style={{
+                    color: error.ok ? "green" : "red",
+                  }}
+                >
+                  {error.message}
+                </span>
               )}
             </div>
-            <button className="team-player new-player">
-              {player.id === 0 ? "add player" : "modify player"}
-            </button>
+            <div style={{ margin: "auto" }}>
+              <button className="team-player new-player">
+                {player.id === 0 ? "add player" : "modify player"}
+              </button>
+            </div>
+            {player.id !== 0 && (
+              <div style={{ margin: "auto" }}>
+                <button
+                  className="team-player disable-player"
+                  onClick={handleDisable}
+                >
+                  remove player
+                </button>
+              </div>
+            )}
           </form>
         </div>
       </div>

src/api.ts

@@ -78,7 +78,7 @@ export async function currentUser(): Promise<User> {
 
 export async function loadPlayers(teamId: number) {
   try {
-    const data = await apiAuth(`player/list/${teamId}`, null, "GET");
+    const data = await apiAuth(`player/${teamId}/list`, null, "GET");
     return data as User[];
   } catch (error) {
     console.error(error);

src/types.ts

@@ -39,3 +39,8 @@ export interface Team {
   location: string;
   country: string;
 }
+
+export type ErrorState = {
+  ok: boolean;
+  message: string;
+};