[FEATURE] Migrated to new loading sequence (#6)

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

src/pages/Create.jsx

@@ -1,11 +1,10 @@
 import Box from "@mui/material/Box";
-import CreateOptions from "./CreateOptions.jsx";
+import CreateCoreOptions from "./CreateCoreOptions.jsx";
 export default function Create() {
   return (
     <Box className="create">
-      {/*<CreateMenu />*/}
       <Box className="create-wrapper" sx={{ display: "flex" }}>
-        <CreateOptions />
+        <CreateCoreOptions />
       </Box>
     </Box>
   );

src/pages/CreateCoreOptions.jsx

@@ -0,0 +1,145 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import FormControl from "@mui/material/FormControl";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+import Typography from "@mui/material/Typography";
+import { useCreateServer } from "@mcl/queries";
+
+// Core Options
+import NameOption from "@mcl/components/server-options/NameOption.jsx";
+import HostOption from "@mcl/components/server-options/HostOption.jsx";
+import VersionOption from "@mcl/components/server-options/VersionOption.jsx";
+import ServerTypeOption, {
+  serverTypeOptions,
+} from "@mcl/components/server-options/ServerTypeOption.jsx";
+import CpuOption, {
+  cpuOptions,
+} from "@mcl/components/server-options/CpuOption.jsx";
+import MemoryOption, {
+  memoryOptions,
+} from "@mcl/components/server-options/MemoryOption.jsx";
+
+import BackupHostOption from "@mcl/components/server-options/BackupHostOption.jsx";
+import BackupBucketOption from "@mcl/components/server-options/BackupBucketOption.jsx";
+import BackupIdOption from "@mcl/components/server-options/BackupIdOption.jsx";
+import BackupKeyOption from "@mcl/components/server-options/BackupKeyOption.jsx";
+import BackupIntervalOption, {
+  backupIntervalDefault,
+} from "@mcl/components/server-options/BackupIntervalOption.jsx";
+
+const defaultServer = {
+  version: "latest",
+  serverType: serverTypeOptions[0],
+  cpu: cpuOptions[0],
+  memory: memoryOptions[2], // 1.5GB
+};
+
+export default function CreateCoreOptions() {
+  const [backupEnabled, setBackupEnabled] = useState(false);
+  const [spec, setSpec] = useState(defaultServer);
+  const nav = useNavigate();
+  const createServer = useCreateServer(spec);
+
+  const updateSpec = (attr, val) => {
+    const s = { ...spec };
+    s[attr] = val;
+    setSpec(s);
+  };
+
+  const coreUpdate = (attr) => (e) => updateSpec(attr, e.target.value);
+
+  async function upsertSpec() {
+    if (validateSpec() !== "validated") return;
+    createServer(spec)
+      // .then(() => nav("/"))
+      .catch(alert);
+  }
+
+  function validateSpec() {
+    console.log("TODO CREATE VALIDATION");
+    if (!spec.host) return alertValidationError("Host cannot be blank");
+    if (!spec.name) return alertValidationError("Name not included");
+    if (!spec.version) return alertValidationError("Version cannot be blank");
+    return "validated";
+  }
+
+  function alertValidationError(reason) {
+    alert(`Could not validate spec because: ${reason}`);
+  }
+
+  const toggleBackupEnabled = () => {
+    const s = { ...spec };
+    if (!backupEnabled) {
+      (s.backupInterval = backupIntervalDefault),
+        (s.backupBucket = `/mcl/server-backups/${(
+          s.name ?? "my-server"
+        ).toLowerCase()}`);
+    } else for (var k in s) if (k.startsWith("backup")) delete s[k];
+    setSpec(s);
+    console.log(s);
+    setBackupEnabled(!backupEnabled);
+  };
+
+  return (
+    <Box
+      className="create-options"
+      sx={{ width: "100%", maxWidth: "600px", margin: "auto" }}
+    >
+      <FormControl fullWidth sx={{ mt: "2rem", display: "flex", gap: ".5rem" }}>
+        <NameOption onChange={coreUpdate("name")} />
+        <HostOption onChange={coreUpdate("host")} />
+        <VersionOption value={spec.version} onChange={coreUpdate("version")} />
+        <ServerTypeOption
+          value={spec.serverType}
+          onChange={coreUpdate("serverType")}
+        />
+        <CpuOption value={spec.cpu} onChange={coreUpdate("cpu")} />
+        <MemoryOption value={spec.memory} onChange={coreUpdate("memory")} />
+        <FormControlLabel
+          control={
+            <Switch
+              checked={backupEnabled}
+              onChange={toggleBackupEnabled}
+              inputProps={{ "aria-label": "controlled" }}
+            />
+          }
+          label="Enable Backups?"
+          labelPlacement="start"
+          sx={{ mr: "auto" }}
+        />
+        {backupEnabled && (
+          <FormControl
+            fullWidth
+            sx={{ mt: "2rem", display: "flex", gap: ".5rem" }}
+          >
+            <Typography variant="h6">Backups</Typography>
+            <BackupHostOption
+              value={spec.backupHost}
+              onChange={coreUpdate("backupHost")}
+            />
+            <BackupBucketOption
+              value={spec.backupBucket}
+              onChange={coreUpdate("backupBucket")}
+            />
+            <BackupIdOption
+              value={spec.backupId}
+              onChange={coreUpdate("backupId")}
+            />
+            <BackupKeyOption
+              value={spec.backupKey}
+              onChange={coreUpdate("backupKey")}
+            />
+            <BackupIntervalOption onChange={coreUpdate("backupInterval")} />
+          </FormControl>
+        )}
+
+        <Button onClick={upsertSpec} variant="contained">
+          Create
+        </Button>
+      </FormControl>
+    </Box>
+  );
+}

src/pages/Files.jsx

@@ -1,20 +1,36 @@
-import { useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useSearchParams, useNavigate } from "react-router-dom";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Toolbar from "@mui/material/Toolbar";
+import FilePreview, {
+  useFilePreview,
+} from "@mcl/components/files/FilePreview.jsx";
 import MineclusterFiles from "@mcl/components/files/MineclusterFiles.jsx";
 
 export default function Files() {
+  const [open, dialogToggle] = useFilePreview();
+  const [previewData, setPreviewData] = useState();
   const [searchParams] = useSearchParams();
   const currentServer = searchParams.get("server");
   const nav = useNavigate();
   useEffect(() => {
     if (!currentServer) nav("/");
   }, [currentServer]);
+
+  function changePreview(name, fileData) {
+    setPreviewData({ name, fileData });
+    dialogToggle();
+  }
+
   return (
     <Box className="edit" sx={{ height: "100%" }}>
-      <MineclusterFiles server={currentServer} />
+      <FilePreview
+        open={open}
+        dialogToggle={dialogToggle}
+        previewData={previewData}
+      />
+      <MineclusterFiles server={currentServer} changePreview={changePreview} />
     </Box>
   );
 }

src/pages/Home.jsx

@@ -30,6 +30,7 @@ export default function Home() {
     setServer(s);
     rconToggle();
   };
+
   return (
     <Box className="home">
       <Overview clusterMetrics={clusterMetrics} />
@@ -50,10 +51,10 @@ export default function Home() {
       <Box className="servers">
         {!isLoading &&
           servers.map((s, k) => (
-            <ServerCard key={k} server={s} openRcon={openRcon(s.name)} />
+            <ServerCard key={k} server={s} openRcon={openRcon(s)} />
           ))}
       </Box>
-      <RconDialog open={rdOpen} dialogToggle={rconToggle} serverName={server} />
+      <RconDialog open={rdOpen} dialogToggle={rconToggle} server={server} />
       <Button
         component={Link}
         to="/mcl/create"