[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/servers/RconView.jsx

@@ -6,22 +6,32 @@ import RconSocket from "./RconSocket.js";
 import "@mcl/css/rcon.css";
 
 export default function RconView(props) {
-  const { serverName } = props;
+  const { serverId } = 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, serverName));
-    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);
@@ -45,8 +55,12 @@ export default function RconView(props) {
           variant="outlined"
           value={cmd}
           onChange={updateCmd}
+          disabled={!(rcon && rcon.rconLive)}
         />
-        <Button onClick={sendCommand}>Send</Button>
+        {rcon && rcon.rconLive && <Button onClick={sendCommand}>Send</Button>}
+        {!(rcon && rcon.rconLive) && (
+          <Button color="secondary">Not Connected</Button>
+        )}
       </Box>
     </Box>
   );