[STYLING] Adjusted formatting for options

src/components/files/MineclusterFiles.jsx

@@ -40,10 +40,16 @@ export default function MineclusterFiles(props) {
 
   const updateFiles = () => {
     const dir = dirStack.join("/");
-    getServerFiles(serverId, dir).then((f) => {
-      const files = f.map((fi) => ({ ...fi, id: `${dir}/${fi.name}` }));
-      setFiles(files ?? []);
-    });
+    getServerFiles(serverId, dir)
+      .then((f) => {
+        const files = f.map((fi) => ({ ...fi, id: `${dir}/${fi.name}` }));
+        setFiles(files ?? []);
+      })
+      .catch(() =>
+        console.error(
+          "Couldn't update files, server likely hasn't started yet",
+        ),
+      );
   };
 
   useEffect(() => {

src/components/server-options/CpuOption.jsx

@@ -0,0 +1,26 @@
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+
+const maxCpuSupported = 8;
+export const cpuOptions = new Array(2 * maxCpuSupported)
+  .fill(0)
+  .map((v, i) => (i + 1) * 0.5);
+
+export default function CpuOption(props) {
+  const { value, onChange } = props;
+  return (
+    <TextField
+      label="CPU"
+      onChange={onChange}
+      value={value}
+      select
+      required
+      SelectProps={{ MenuProps: { sx: { maxHeight: "20rem" } } }}
+      disabled // TODO: Enable on backend support
+    >
+      {cpuOptions.map((o, i) => (
+        <MenuItem value={o} key={i}>{`${o} CPU`}</MenuItem>
+      ))}
+    </TextField>
+  );
+}

src/components/server-options/HostOption.jsx

@@ -0,0 +1,14 @@
+import TextField from "@mui/material/TextField";
+export default function HostOption(props) {
+  const { onChange } = props;
+
+  return (
+    <TextField
+      label="Host"
+      onChange={onChange}
+      helperText="Example: host.mydomain.com"
+      FormHelperTextProps={{ sx: { ml: 0 } }}
+      required
+    />
+  );
+}

src/components/server-options/MemoryOption.jsx

@@ -0,0 +1,24 @@
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+const maxMemSupported = 10;
+export const memoryOptions = new Array(2 * maxMemSupported)
+  .fill(0)
+  .map((v, i) => (i + 1) * 512);
+
+export default function Option(props) {
+  const { value, onChange } = props;
+  return (
+    <TextField
+      label="Memory"
+      onChange={onChange}
+      value={value}
+      select
+      required
+      SelectProps={{ MenuProps: { sx: { maxHeight: "20rem" } } }}
+    >
+      {memoryOptions.map((o, i) => (
+        <MenuItem value={o} key={i}>{`${o / 1024} Gi`}</MenuItem>
+      ))}
+    </TextField>
+  );
+}

src/components/server-options/NameOption.jsx

@@ -0,0 +1,14 @@
+import TextField from "@mui/material/TextField";
+export default function NameOption(props) {
+  const { onChange } = props;
+
+  return (
+    <TextField
+      label="Name"
+      onChange={onChange}
+      helperText="Example: My Survival World"
+      FormHelperTextProps={{ sx: { ml: 0 } }}
+      required
+    />
+  );
+}

src/components/server-options/ServerTypeOption.jsx

@@ -0,0 +1,25 @@
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+
+const displayOption = (o) => o.charAt(0) + o.toLowerCase().slice(1);
+
+export const serverTypeOptions = ["VANILLA", "FABRIC", "PAPER", "SPIGOT"];
+export default function ServerTypeOption(props) {
+  const { value, onChange } = props;
+  return (
+    <TextField
+      label="Memory"
+      onChange={onChange}
+      value={value}
+      select
+      required
+      SelectProps={{ MenuProps: { sx: { maxHeight: "20rem" } } }}
+    >
+      {serverTypeOptions.map((o, i) => (
+        <MenuItem value={o} key={i}>
+          {displayOption(o)}
+        </MenuItem>
+      ))}
+    </TextField>
+  );
+}

src/components/server-options/VersionOption.jsx

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+import { useVersionList } from "@mcl/queries";
+
+export default function VersionOption(props) {
+  const { value, onChange } = props;
+  const versionList = useVersionList();
+  const [versions, setVersions] = useState(["latest"]);
+
+  useEffect(() => {
+    if (!versionList.data) return;
+    setVersions([
+      "latest",
+      ...versionList.data.versions
+        .filter(({ type: releaseType }) => releaseType === "release")
+        .map(({ id }) => id),
+    ]);
+  }, [versionList.data]);
+
+  return (
+    <TextField
+      label="Version"
+      onChange={onChange}
+      value={value}
+      select
+      required
+      SelectProps={{ MenuProps: { sx: { maxHeight: "20rem" } } }}
+    >
+      {versions.map((v, k) => (
+        <MenuItem value={v} key={k}>
+          {v}
+        </MenuItem>
+      ))}
+    </TextField>
+  );
+}

src/pages/CreateOptions.jsx

@@ -1,27 +1,37 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import Autocomplete from "@mui/material/Autocomplete";
 import TextField from "@mui/material/TextField";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Chip from "@mui/material/Chip";
-import Select from "@mui/material/Select";
-import MenuItem from "@mui/material/MenuItem";
-import InputLabel from "@mui/material/InputLabel";
 import FormControl from "@mui/material/FormControl";
-import { useCreateServer, useVersionList } from "@mcl/queries";
+import { useCreateServer } from "@mcl/queries";
+
+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";
 
 const defaultServer = {
   version: "latest",
-  serverType: "VANILLA",
-  memory: "512",
+  serverType: serverTypeOptions[0],
+  cpu: cpuOptions[0],
+  memory: memoryOptions[2], // 1.5GB
 };
 
 export default function Create() {
   const [spec, setSpec] = useState(defaultServer);
   const nav = useNavigate();
-  const versionList = useVersionList();
-  const [versions, setVersions] = useState(["latest"]);
   const createServer = useCreateServer(spec);
 
   const updateSpec = (attr, val) => {
@@ -30,16 +40,6 @@ export default function Create() {
     setSpec(s);
   };
 
-  useEffect(() => {
-    if (!versionList.data) return;
-    setVersions([
-      "latest",
-      ...versionList.data.versions
-        .filter(({ type: releaseType }) => releaseType === "release")
-        .map(({ id }) => id),
-    ]);
-  }, [versionList.data]);
-
   const coreUpdate = (attr) => (e) => updateSpec(attr, e.target.value);
 
   async function upsertSpec() {
@@ -67,54 +67,15 @@ export default function Create() {
       sx={{ width: "100%", maxWidth: "600px", margin: "auto" }}
     >
       <FormControl fullWidth sx={{ mt: "2rem", display: "flex", gap: ".5rem" }}>
-        <TextField
-          label="Name"
-          onChange={coreUpdate("name")}
-          helperText="Example: My Survival World"
-          defaultValue={spec.name}
-          FormHelperTextProps={{ sx: { ml: 0 } }}
-          required
-        />
-        <TextField
-          label="Host"
-          onChange={coreUpdate("host")}
-          helperText="Example: host.mydomain.com"
-          FormHelperTextProps={{ sx: { ml: 0 } }}
-          required
-        />
-        <TextField
-          label="Version"
-          onChange={coreUpdate("version")}
-          value={spec.version}
-          select
-          required
-          SelectProps={{ MenuProps: { sx: { maxHeight: "20rem" } } }}
-        >
-          {versions.map((v, k) => (
-            <MenuItem value={v} key={k}>
-              {v}
-            </MenuItem>
-          ))}
-        </TextField>
-        <TextField
-          label="Server Type"
-          onChange={coreUpdate("serverType")}
+        <NameOption onChange={coreUpdate("name")} />
+        <HostOption onChange={coreUpdate("host")} />
+        <VersionOption value={spec.version} onChange={coreUpdate("version")} />
+        <ServerTypeOption
           value={spec.serverType}
-          select
-          required
-        >
-          <MenuItem value={"VANILLA"}>Vanilla</MenuItem>
-          <MenuItem value={"FABRIC"}>Fabric</MenuItem>
-          <MenuItem value={"PAPER"}>Paper</MenuItem>
-          <MenuItem value={"SPIGOT"}>Spigot</MenuItem>
-        </TextField>
-
-        <TextField
-          label="Memory"
-          onChange={coreUpdate("memory")}
-          defaultValue={spec.memory}
-          required
+          onChange={coreUpdate("serverType")}
         />
+        <CpuOption value={spec.cpu} onChange={coreUpdate("cpu")} />
+        <MemoryOption value={spec.memory} onChange={coreUpdate("memory")} />
         <Button onClick={upsertSpec} variant="contained">
           Create
         </Button>