Update Players and Games on connection check

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");
@@ -44,26 +45,19 @@ export default function App() {
     setOpenPlayerStats(true);
   }
 
-  useEffect(() => {
-    if(!connected)
-    {
-      setPlayers([]);
-      setGames([]);
-      return;
-    }
-    GetPlayers(apiUri).then(setPlayers);
-    GetGames(apiUri).then(setGames);
-  }, [connected]);
-
   const checkConnection = () => {
     setCheckingConnection(true);
     return getData(`${apiUri}/swagger/v1/swagger.json`)
         .then(() => {
           setConnected(true);
+          GetPlayers(apiUri).then(setPlayers);
+          GetGames(apiUri).then(setGames);
           return Promise.resolve();
         })
         .catch(() =>  {
           setConnected(false)
+          setPlayers([]);
+          setGames([]);
           return Promise.reject();
         })
         .finally(() => {
@@ -71,7 +65,6 @@ export default function App() {
         });
   }
 
-
   const [connectionTimer, setConnectionTimer] = useState<number | null>(null);
 
   useEffect(() => {
@@ -81,21 +74,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"}
+            <Stack direction="row" spacing={2} position={"fixed"} top={5}>
-                   placeholder={"Api Uri"}
+              <Input type={"text"}
-                   value={apiUri}
+                     placeholder={"Api Uri"}
-                   onChange={(e) => setApiUri(e.target.value)}
+                     value={apiUri}
-                   endDecorator={checkingConnection
+                     onChange={(e) => setApiUri(e.target.value)}
-                       ? <CircularProgress sx={{height: "100%"}} />
+                     endDecorator={checkingConnection
-                       : connected
+                         ? <CircularProgress sx={{height: "100%"}} />
-                           ? <CheckCircleOutline color={"success"} />
+                         : connected
-                           : <Cancel color={"error"} />}
+                             ? <CheckCircleOutline color={"success"} />
-            />
+                             : <Cancel color={"error"} />}
-            <Stack direction={"row"} spacing={2}>
+              />
+              <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>

src/components/PlayerGameStatsDrawer.tsx

@@ -30,7 +30,8 @@ export default function PlayerGameStatsDrawer({player, game, open, setOpen} : {p
             </DialogTitle>
             <DialogContent>
                 <LineChart xAxis={[{data : trackedTime?.map(t => new Date(t.timeStamp))??[], scaleType: "utc", label: "Date"}]}
-                           series={[{data: trackedTime?.map(t => Number(t.timePlayed))??[], label: "Minutes Played"}]}
+                           yAxis={[{label: "Minutes Played", scaleType: "linear", min: 0}]}
+                           series={[{data: trackedTime?.map(t => Number(t.timePlayed))??[], label: game?.name}]}
                            sx={{height: "80%"}}/>
             </DialogContent>
         </Drawer>

src/components/PlayerStatsDrawer.tsx

@@ -78,7 +78,7 @@ export function PlayerStatsDrawer({player, open, setOpen}: {
                     />
                     <LineChart dataset={trackedTimes}
                                xAxis={[{dataKey: "date", scaleType: "utc"}]}
-                               yAxis={[{dataKey: "time", scaleType: "linear"}]}
+                               yAxis={[{dataKey: "time", scaleType: "linear", min: 0}]}
                                series={selectedSeries}
                     />
                 </Stack>