Skip to content

Commit 41f65ce

Browse files
committed
merging with fixes
2 parents 6860d2b + a3f96a3 commit 41f65ce

File tree

19 files changed

+741
-56
lines changed

19 files changed

+741
-56
lines changed

client/.eslintcache

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

client/package-lock.json

Lines changed: 89 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

client/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"react-split": "^2.0.9",
2121
"react-typist": "^2.0.5",
2222
"redux": "^4.0.5",
23+
"socket.io-client": "^3.0.5",
2324
"styled-components": "^5.2.1",
2425
"web-vitals": "^0.2.4"
2526
},

client/src/App.module.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@ body {
1212
height: 100vh;
1313
background-color: gainsboro;
1414
font-family: "Montserrat", sans-serif;
15-
/* overflow: hidden; */
15+
overflow: hidden;
1616
}
Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import React, { useRef, useState, useEffect } from "react";
2+
import Editor from "@monaco-editor/react";
3+
import { executeCode, setLoadingTrue } from "../../actions/code";
4+
import { useDispatch, useSelector } from "react-redux";
5+
import InputOutput from "../output/InputOutput";
6+
import Submit from "./Submit";
7+
import Split from "react-split";
8+
import styled from "styled-components";
9+
import styles from "./style.module.css";
10+
import "./style.css";
11+
import { Play } from "react-feather";
12+
13+
const Row = styled.div`
14+
display: flex;
15+
flex-direction: row;
16+
flex-grow: 1;
17+
// background: blue;
18+
`;
19+
20+
const OutputWindow = styled.div`
21+
// height: 100%;
22+
// margin: 20px;
23+
// border: 2px solid #eeeeee;
24+
border-radius: 5px;
25+
padding: 0 20px;
26+
box-sizing: border-box;
27+
color: ${(props) => (props.error ? "red" : "black")};
28+
`;
29+
30+
const CodeEditor = ({ theme }) => {
31+
const loading = useSelector((state) => state.code.isFetching);
32+
const [isEditorReady, setIsEditorReady] = useState(false);
33+
const [language, setLanguage] = useState("c");
34+
const [input, setInput] = useState("");
35+
const dispatch = useDispatch();
36+
const valueGetter = useRef();
37+
let output = useSelector((state) => state.code.output);
38+
let error = useSelector((state) => state.code.error);
39+
40+
const handleEditorDidMount = (_valueGetter) => {
41+
setIsEditorReady(true);
42+
valueGetter.current = _valueGetter;
43+
};
44+
45+
const SubmitCode = async () => {
46+
dispatch(setLoadingTrue());
47+
const res = await executeCode(valueGetter.current(), language, input);
48+
console.log(res);
49+
dispatch(res);
50+
};
51+
52+
const changeLanguage = (e) => {
53+
setLanguage(e.target.value);
54+
};
55+
56+
return (
57+
<>
58+
<Row>
59+
<Split
60+
sizes={[50, 50]}
61+
minSize={100}
62+
expandToMin={false}
63+
gutterSize={10}
64+
gutterAlign="center"
65+
snapOffset={30}
66+
dragInterval={1}
67+
direction="horizontal"
68+
cursor="ew-resize"
69+
class={styles.splitHor}
70+
>
71+
<div className={styles.left}>
72+
<div className={styles.runCode}>
73+
<Submit language={language} changeLanguage={changeLanguage} />
74+
<div
75+
className={styles.submitButton}
76+
onClick={SubmitCode}
77+
disabled={!isEditorReady}
78+
>
79+
{loading ? "Loading.." : "Run Code"}
80+
<Play style={{ paddingLeft: 10, fontSize: "1em" }} />
81+
</div>
82+
</div>
83+
<Editor
84+
className="editor"
85+
language={language}
86+
theme={theme === "dark" ? "vs-dark" : "light"}
87+
editorDidMount={handleEditorDidMount}
88+
/>
89+
</div>
90+
<div className={styles.right}>
91+
<Split
92+
sizes={[75, 25]}
93+
minSize={[25, 25]}
94+
expandToMin={false}
95+
gutterSize={10}
96+
gutterAlign="center"
97+
snapOffset={30}
98+
dragInterval={1}
99+
direction="vertical"
100+
cursor="ew-resize"
101+
class={styles.splitVer}
102+
>
103+
<div className={styles.output}>
104+
<div className={styles.outputHead}>Output</div>
105+
<OutputWindow error={error === "" ? false : true}>
106+
{output ? console.log(output) : null}
107+
<pre style={{ width: "100%" }}>
108+
{output === "" ? error : output}
109+
</pre>
110+
</OutputWindow>
111+
</div>
112+
<div className={styles.input}>
113+
<InputOutput input={input} setInput={setInput} theme={theme} />
114+
</div>
115+
</Split>
116+
</div>
117+
</Split>
118+
</Row>
119+
</>
120+
);
121+
};
122+
123+
export default CodeEditor;

client/src/components/code-editor/CodeEditorIndex.js

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
1-
import React from 'react';
2-
import { ThemeProvider } from 'styled-components';
3-
import { lightTheme, darkTheme } from '../../constants/theme';
4-
import { GlobalStyles } from '../../constants/global';
5-
import { useDarkMode } from '../../utils/useDarkMode';
6-
import Header from './Header.js';
7-
import Footer from './Footer.js';
8-
import Editor from './Editor';
1+
import React, { useEffect } from "react";
2+
import { ThemeProvider } from "styled-components";
3+
import { lightTheme, darkTheme } from "../../constants/theme";
4+
import { GlobalStyles } from "../../constants/global";
5+
import { useDarkMode } from "../../utils/useDarkMode";
6+
import Header from "./Header.js";
7+
import Footer from "./Footer.js";
8+
import Editor from "./Editor";
99

1010
const CodeEditorIndex = () => {
1111
const [theme, toggleTheme, componentMounted] = useDarkMode();
1212

13-
const themeMode = theme === 'light' ? lightTheme : darkTheme;
13+
const themeMode = theme === "light" ? lightTheme : darkTheme;
1414

1515
if (!componentMounted) {
1616
return <div />;
1717
}
18+
1819
return (
1920
<ThemeProvider theme={themeMode}>
2021
<GlobalStyles />

0 commit comments

Comments
 (0)