[FIX] Adjusted Options & RCON

src/components/servers/RconDialog.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
 import Button from "@mui/material/Button";
@@ -20,6 +20,7 @@ export default function RconDialog(props) {
   const { name: serverName, id: serverId } = server ?? {};
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+
   return (
     <Dialog
       sx={

src/components/servers/RconSocket.js

@@ -5,6 +5,7 @@ export default class RconSocket {
     this.logUpdate = logUpdate;
     this.sk.on("push", this.onPush.bind(this));
     this.sk.on("connect", this.onConnect.bind(this));
+    this.sk.on("error", () => console.log("WHOOSPSIE I GUESS?"));
   }
 
   onPush(p) {
@@ -17,6 +18,7 @@ export default class RconSocket {
   }
 
   onConnect() {
+    this.sk.readyState = 1;
     this.logs = [];
   }
 

src/components/servers/RconView.jsx

@@ -10,18 +10,28 @@ export default function RconView(props) {
   const logsRef = useRef(0);
   const [cmd, setCmd] = useState("");
   const [logs, setLogs] = useState([]);
-  const [rcon, setRcon] = useState({});
+  const [rcon, setRcon] = useState();
   const updateCmd = (e) => setCmd(e.target.value);
-  useEffect(function () {
-    setRcon(new RconSocket(setLogs, serverId));
-    return () => {
-      if (rcon && typeof rcon.disconnect === "function") rcon.disconnect();
-    };
-  }, []);
 
-  useEffect(() => {
-    logsRef.current.scrollTo(0, logsRef.current.scrollHeight);
-  }, [rcon.logs]);
+  const disconnectRcon = () => {
+    if (!rcon || typeof rcon.disconnect !== "function") return;
+    rcon.disconnect();
+  };
+
+  useEffect(
+    function () {
+      if (!serverId) return;
+      const rs = new RconSocket(setLogs, serverId);
+      setRcon(rs);
+      return disconnectRcon;
+    },
+    [serverId],
+  );
+
+  useEffect(
+    () => logsRef.current.scrollTo(0, logsRef.current.scrollHeight),
+    [(rcon ?? {}).logs],
+  );
 
   function sendCommand() {
     rcon.send(cmd);

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

@@ -1,20 +1,17 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import TextField from "@mui/material/TextField";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import FormControl from "@mui/material/FormControl";
 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";
@@ -29,7 +26,7 @@ const defaultServer = {
   memory: memoryOptions[2], // 1.5GB
 };
 
-export default function Create() {
+export default function CreateCoreOptions() {
   const [spec, setSpec] = useState(defaultServer);
   const nav = useNavigate();
   const createServer = useCreateServer(spec);

src/pages/Home.jsx

@@ -30,6 +30,7 @@ export default function Home() {
     setServer(s);
     rconToggle();
   };
+
   return (
     <Box className="home">
       <Overview clusterMetrics={clusterMetrics} />