[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/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";
@@ -16,15 +16,17 @@ export function useRconDialog(isOpen = false) {
 }
 
 export default function RconDialog(props) {
-  const { serverName, open, dialogToggle } = props;
+  const { server, open, dialogToggle } = props;
+  const { name: serverName, id: serverId } = server ?? {};
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+
   return (
     <Dialog
       sx={
         fullScreen
           ? {}
-          : { "& .MuiDialog-paper": { width: "80%", maxHeight: 525 } }
+          : { "& .mcl-MuiDialog-paper": { width: "80%", maxHeight: 555 } }
       }
       maxWidth="xs"
       open={open}
@@ -33,7 +35,7 @@ export default function RconDialog(props) {
       <Toolbar sx={{ display: { sm: "none" } }} />
       <DialogTitle>RCON - {serverName}</DialogTitle>
       <DialogContent>
-        <RconView serverName={serverName} />
+        <RconView serverId={serverId} />
       </DialogContent>
       <DialogActions>
         <Button autoFocus onClick={dialogToggle}>

src/components/servers/RconSocket.js

@@ -1,13 +1,17 @@
 import { io } from "socket.io-client";
 export default class RconSocket {
-  constructor(logUpdate, serverName) {
-    (this.sk = io("/", { query: { serverName } })), (this.logs = []);
+  constructor(logUpdate, serverId) {
+    (this.sk = io("/", { query: { serverId } })), (this.logs = []);
     this.logUpdate = logUpdate;
     this.sk.on("push", this.onPush.bind(this));
     this.sk.on("connect", this.onConnect.bind(this));
+    this.sk.on("rcon-error", this.onRconError.bind(this));
+    this.sk.on("error", () => console.log("WHOOSPSIE I GUESS?"));
+    this.rconLive = false;
   }
 
   onPush(p) {
+    this.rconLive = true;
     this.logs = [...this.logs, p];
     this.logUpdate(this.logs);
   }
@@ -16,7 +20,13 @@ export default class RconSocket {
     this.sk.emit("msg", m);
   }
 
+  onRconError(v) {
+    this.rconLive = false;
+    console.log("Server sent" + v);
+  }
+
   onConnect() {
+    this.sk.readyState = 1;
     this.logs = [];
   }
 

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>
   );

src/components/servers/ServerCard.jsx

@@ -11,7 +11,6 @@ import Typography from "@mui/material/Typography";
 import StopIcon from "@mui/icons-material/Stop";
 import TerminalIcon from "@mui/icons-material/Terminal";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
-import PendingIcon from "@mui/icons-material/Pending";
 import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
 import EditIcon from "@mui/icons-material/Edit";
 import FolderIcon from "@mui/icons-material/Folder";
@@ -19,10 +18,10 @@ import { Link } from "react-router-dom";
 
 export default function ServerCard(props) {
   const { server, openRcon } = props;
-  const { name, metrics, ftpAvailable, serverAvailable, services } = server;
-  const startServer = useStartServer(name);
-  const stopServer = useStopServer(name);
-  const deleteServer = useDeleteServer(name);
+  const { name, id, metrics, ftpAvailable, serverAvailable, services } = server;
+  const startServer = useStartServer(id);
+  const stopServer = useStopServer(id);
+  const deleteServer = useDeleteServer(id);
   function toggleRcon() {
     if (!services.includes("server")) return;
     openRcon();
@@ -113,7 +112,7 @@ export default function ServerCard(props) {
             aria-label="Edit"
             size="large"
             component={Link}
-            to={`/mcl/edit?server=${name}`}
+            to={`/mcl/edit?server=${id}`}
           >
             <EditIcon />
           </IconButton>
@@ -122,8 +121,8 @@ export default function ServerCard(props) {
             aria-label="Files"
             size="large"
             component={Link}
-            to={`/mcl/files?server=${name}`}
-            disabled={!services.includes("ftp")}
+            to={`/mcl/files?server=${id}`}
+            disabled={!ftpAvailable}
           >
             <FolderIcon />
           </IconButton>