feat: load players dynamically from server

src/Rankings.tsx

@@ -1,29 +1,11 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ReactSortable, ReactSortableProps, Sortable } from "react-sortablejs";
-import api from "./api";
+import api, { baseUrl } from "./api";
 
 interface Player {
   id: number;
   name: string;
-}
+  number: string | null;
-
-function loadPlayers() {
-  const players = [
-    "August",
-    "Beate",
-    "Ceasar",
-    "Daedalus",
-    "Elli",
-    "Ford P.",
-    "Gabriel",
-    "Hugo",
-    "Ivar Johansson",
-    "Jürgen Gordon Malinauskas",
-    "Karsten Uwe Kalinowski",
-  ].map((v, i) => {
-    return { id: i, name: v } as Player;
-  });
-  return players;
 }
 
 type PlayerListProps = Partial<ReactSortableProps<any>> & {
@@ -43,14 +25,25 @@ function PlayerList(props: PlayerListProps) {
 }
 
 export function Chemistry() {
-  const players = loadPlayers();
   const [user, setUser] = useState<Player[]>([]);
   const [playersLeft, setPlayersLeft] = useState<Player[]>([]);
-  const [playersMiddle, setPlayersMiddle] = useState<Player[]>(players);
+  const [playersMiddle, setPlayersMiddle] = useState<Player[]>([]);
   const [playersRight, setPlayersRight] = useState<Player[]>([]);
 
   const [dialog, setDialog] = useState("dialog");
 
+  async function loadPlayers() {
+    const response = await fetch(`${baseUrl}player/list`, {
+      method: "GET",
+    });
+    const data = await response.json();
+    setPlayersMiddle(data as Player[]);
+  }
+
+  useEffect(() => {
+    loadPlayers();
+  }, []);
+
   async function handleSubmit() {
     const dialog = document.querySelector("dialog[id='ChemistryDialog']");
     (dialog as HTMLDialogElement).showModal();
@@ -160,13 +153,24 @@ export function Chemistry() {
 }
 
 export function MVP() {
-  const players = loadPlayers();
   const [user, setUser] = useState<Player[]>([]);
-  const [availablePlayers, setAvailablePlayers] = useState<Player[]>(players);
+  const [availablePlayers, setAvailablePlayers] = useState<Player[]>([]);
   const [rankedPlayers, setRankedPlayers] = useState<Player[]>([]);
 
   const [dialog, setDialog] = useState("dialog");
 
+  async function loadPlayers() {
+    const response = await fetch(`${baseUrl}player/list`, {
+      method: "GET",
+    });
+    const data = await response.json();
+    setAvailablePlayers(data as Player[]);
+  }
+
+  useEffect(() => {
+    loadPlayers();
+  }, []);
+
   async function handleSubmit() {
     const dialog = document.querySelector("dialog[id='MVPDialog']");
     (dialog as HTMLDialogElement).showModal();