[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/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>
+  );
+}