MirrorMirror
/
riju
mirror of https://github.com/radian-software/riju.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added the idle state and reconnect logic on editor value change

This commit is contained in:
inaseem 2021-10-02 20:22:09 +05:30
parent a4543740ab
commit c80591fec3
1 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/pages/editor/[lang].js
View File

@ -1,7 +1,7 @@
import MonacoEditor, { useMonaco } from "@monaco-editor/react"; import MonacoEditor, { useMonaco } from "@monaco-editor/react";
import { Circle, Code as Format, Home, PlayArrow } from "@mui/icons-material"; import { Circle, Code as Format, Home, PlayArrow } from "@mui/icons-material";
import { LoadingButton } from "@mui/lab"; 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 ansi from "ansicolor";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import Head from "next/head"; import Head from "next/head";
@ -34,12 +34,14 @@ const CodeRunner = (props) => {
const [isLspStarted, setLspStarted] = useState(false); const [isLspStarted, setLspStarted] = useState(false);
const [isLspRequested, setIsLspRequested] = useState(false); const [isLspRequested, setIsLspRequested] = useState(false);
const monaco = useMonaco(); const monaco = useMonaco();
const [status, setStatus] = useState("connecting");
function sendToTerminal(type, data) { function sendToTerminal(type, data) {
EventEmitter.dispatch("terminal", { type, data }); EventEmitter.dispatch("terminal", { type, data });
} }
function connect() { function connect() {
setStatus("connecting");
const socket = new WebSocket( const socket = new WebSocket(
// (document.location.protocol === "http:" ? "ws://" : "wss://") + // (document.location.protocol === "http:" ? "ws://" : "wss://") +
"wss://" + "wss://" +
@ -48,6 +50,7 @@ const CodeRunner = (props) => {
); );
socket.addEventListener("open", () => { socket.addEventListener("open", () => {
console.log("Successfully connected to server playground"); console.log("Successfully connected to server playground");
setStatus("connected");
}); });
EventEmitter.subscribe("send", (payload) => { EventEmitter.subscribe("send", (payload) => {
if (DEBUG) { if (DEBUG) {
@ -262,9 +265,10 @@ const CodeRunner = (props) => {
setRunning(false); setRunning(false);
setLspStarted(false); setLspStarted(false);
setIsLspRequested(false); setIsLspRequested(false);
setStatus("idle");
}); });
return () => socket && socket.close(); return socket;
} }
useEffect(() => { useEffect(() => {
@ -326,6 +330,14 @@ const CodeRunner = (props) => {
} }
}; };
const handleChange = () => {
if (isConnected) {
return;
} else {
connect();
}
};
return ( return (
<> <>
<Head> <Head>
@ -353,7 +365,7 @@ const CodeRunner = (props) => {
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "stretch",
boxShadow: `0 2px 4px rgb(0 0 0 / 2%)`, boxShadow: `0 2px 4px rgb(0 0 0 / 2%)`,
width: "60%", width: "60%",
}} }}
@ -374,6 +386,16 @@ const CodeRunner = (props) => {
<Typography sx={{ fontSize: 14, px: 2, fontWeight: 600 }}> <Typography sx={{ fontSize: 14, px: 2, fontWeight: 600 }}>
{config.name} {config.name}
</Typography> </Typography>
<Chip
size="small"
variant="outlined"
sx={{
fontSize: "0.7rem",
alignSelf: "center",
height: "16px",
}}
label={connectionStatus}
/>
</Box> </Box>
<LoadingButton <LoadingButton
onClick={handleLspClick} onClick={handleLspClick}
@ -442,6 +464,7 @@ const CodeRunner = (props) => {
<Box <Box
component={MonacoEditor} component={MonacoEditor}
wrapperClassName={"rijuEditor"} wrapperClassName={"rijuEditor"}
onChange={handleChange}
height="90vh" height="90vh"
defaultLanguage="javascript" defaultLanguage="javascript"
defaultValue="// some comment" defaultValue="// some comment"