[FEATURE] Backups View & Style fix (#22)

Co-authored-by: Dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.dev/elysium/minecluster/pulls/22

src/pages/Home.jsx

@@ -12,12 +12,16 @@ import SpeedDialIcon from "@mui/material/SpeedDialIcon";
 import "@mcl/css/server-card.css";
 import "@mcl/css/overview.css";
 import { useServerInstances } from "@mcl/queries";
+import BackupDialog, {
+  useBackupDialog,
+} from "../components/servers/BackupsDialog";
 
 export default function Home() {
   const clusterMetrics = { cpu: 0, memory: 0 };
   const [server, setServer] = useState();
   const [servers, setServers] = useState([]);
   const [rdOpen, rconToggle] = useRconDialog();
+  const [bkOpen, backupsToggle] = useBackupDialog();
   const { isLoading, data: serversData } = useServerInstances();
   const serverInstances = serversData ?? [];
   useEffect(() => {
@@ -31,6 +35,11 @@ export default function Home() {
     rconToggle();
   };
 
+  const openBackups = (s) => () => {
+    setServer(s);
+    backupsToggle();
+  };
+
   return (
     <Box className="home">
       <Overview clusterMetrics={clusterMetrics} />
@@ -51,10 +60,20 @@ export default function Home() {
       <Box className="servers">
         {!isLoading &&
           servers.map((s, k) => (
-            <ServerCard key={k} server={s} openRcon={openRcon(s)} />
+            <ServerCard
+              key={k}
+              server={s}
+              openRcon={openRcon(s)}
+              openBackups={openBackups(s)}
+            />
           ))}
       </Box>
       <RconDialog open={rdOpen} dialogToggle={rconToggle} server={server} />
+      <BackupDialog
+        open={bkOpen}
+        dialogToggle={backupsToggle}
+        serverId={server?.id}
+      />
       <Button
         component={Link}
         to="/mcl/create"