Add Player button

src/App.tsx

@@ -8,7 +8,7 @@ import {ApiUriContext, getData} from "./api/fetchApi.tsx";
 import {GetGames, GetPlayers} from "./api/endpoints/Data.tsx";
 import {
   AccordionGroup,
-  Box, CircularProgress,
+  Box, Button, CircularProgress,
   Divider,
   Input,
   Stack,
@@ -19,6 +19,7 @@ import PlayerAccordionItem from "./components/PlayerAccordionItem.tsx";
 import PlayerGameStatsDrawer from "./components/PlayerGameStatsDrawer.tsx";
 import {Cancel, CheckCircleOutline} from '@mui/icons-material';
 import {PlayerStatsDrawer} from "./components/PlayerStatsDrawer.tsx";
+import {AddPlayer} from "./api/endpoints/Actions.tsx";
 
 export default function App() {
   const [apiUri, setApiUri] = useState<string>("http://127.0.0.1:5239");
@@ -71,7 +72,6 @@ export default function App() {
         });
   }
 
-
   const [connectionTimer, setConnectionTimer] = useState<number | null>(null);
 
   useEffect(() => {
@@ -81,21 +81,33 @@ export default function App() {
         .then(() => setConnectionTimer(setInterval(checkConnection, 5000)));
   }, [apiUri]);
 
+  const [addPlayerStr, setAddPlayerStr] = useState("");
+  const addPlayer = () => {
+    const steamId = BigInt(addPlayerStr);
+    AddPlayer(apiUri, steamId);
+  }
   return (
       <ApiUriContext value={apiUri}>
         <PlayersContext.Provider value={{players: players}}>
           <GamesContext value={{games: games}}>
-            <Input type={"text"}
-                   placeholder={"Api Uri"}
-                   value={apiUri}
-                   onChange={(e) => setApiUri(e.target.value)}
-                   endDecorator={checkingConnection
-                       ? <CircularProgress sx={{height: "100%"}} />
-                       : connected
-                           ? <CheckCircleOutline color={"success"} />
-                           : <Cancel color={"error"} />}
-            />
-            <Stack direction={"row"} spacing={2}>
+            <Stack direction="row" spacing={2} position={"fixed"} top={5}>
+              <Input type={"text"}
+                     placeholder={"Api Uri"}
+                     value={apiUri}
+                     onChange={(e) => setApiUri(e.target.value)}
+                     endDecorator={checkingConnection
+                         ? <CircularProgress sx={{height: "100%"}} />
+                         : connected
+                             ? <CheckCircleOutline color={"success"} />
+                             : <Cancel color={"error"} />}
+              />
+              <Input type={"text"}
+                     placeholder={"Add SteamId"}
+                     onChange={(e) => setAddPlayerStr(e.target.value)}
+                     endDecorator={<Button onClick={addPlayer}>Add</Button>}
+              />
+            </Stack>
+            <Stack direction={"row"} spacing={2} overflow={"scroll"} position={"fixed"} top={50} width={"100%"} height={"calc(100% - 50px)"}>
               <Box sx={{width:'50%'}}>
                 <Typography level={"h2"}>Players</Typography>
                 <AccordionGroup>