From c80591fec3a0b669a44b70d34ef08117b816e74d Mon Sep 17 00:00:00 2001 From: inaseem Date: Sat, 2 Oct 2021 20:22:09 +0530 Subject: [PATCH] Added the idle state and reconnect logic on editor value change --- frontend/pages/editor/[lang].js | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/frontend/pages/editor/[lang].js b/frontend/pages/editor/[lang].js index 8c6aff9..709b8dd 100644 --- a/frontend/pages/editor/[lang].js +++ b/frontend/pages/editor/[lang].js @@ -1,7 +1,7 @@ import MonacoEditor, { useMonaco } from "@monaco-editor/react"; import { Circle, Code as Format, Home, PlayArrow } from "@mui/icons-material"; import { LoadingButton } from "@mui/lab"; -import { Box, Button, Divider, Typography } from "@mui/material"; +import { Box, Button, Chip, Divider, Typography } from "@mui/material"; import ansi from "ansicolor"; import dynamic from "next/dynamic"; import Head from "next/head"; @@ -34,12 +34,14 @@ const CodeRunner = (props) => { const [isLspStarted, setLspStarted] = useState(false); const [isLspRequested, setIsLspRequested] = useState(false); const monaco = useMonaco(); + const [status, setStatus] = useState("connecting"); function sendToTerminal(type, data) { EventEmitter.dispatch("terminal", { type, data }); } function connect() { + setStatus("connecting"); const socket = new WebSocket( // (document.location.protocol === "http:" ? "ws://" : "wss://") + "wss://" + @@ -48,6 +50,7 @@ const CodeRunner = (props) => { ); socket.addEventListener("open", () => { console.log("Successfully connected to server playground"); + setStatus("connected"); }); EventEmitter.subscribe("send", (payload) => { if (DEBUG) { @@ -262,9 +265,10 @@ const CodeRunner = (props) => { setRunning(false); setLspStarted(false); setIsLspRequested(false); + setStatus("idle"); }); - return () => socket && socket.close(); + return socket; } useEffect(() => { @@ -326,6 +330,14 @@ const CodeRunner = (props) => { } }; + const handleChange = () => { + if (isConnected) { + return; + } else { + connect(); + } + }; + return ( <> @@ -353,7 +365,7 @@ const CodeRunner = (props) => { sx={{ display: "flex", flexDirection: "row", - alignItems: "center", + alignItems: "stretch", boxShadow: `0 2px 4px rgb(0 0 0 / 2%)`, width: "60%", }} @@ -374,6 +386,16 @@ const CodeRunner = (props) => { {config.name} + {