Skip to content

Commit 661212a

Browse files
Tushar3099Tushar3099
committed
changing layout and adding styles
2 parents e3912fa + 0fe1a61 commit 661212a

25 files changed

+509
-225
lines changed

‎client/.eslintcache

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
[{"D:\\Webdev\\remote-code-executor\\client\\src\\index.js":"1","D:\\Webdev\\remote-code-executor\\client\\src\\reducers\\index.js":"2","D:\\Webdev\\remote-code-executor\\client\\src\\constants\\theme.js":"3","D:\\Webdev\\remote-code-executor\\client\\src\\constants\\global.js":"4","D:\\Webdev\\remote-code-executor\\client\\src\\components\\header\\Header.js":"5","D:\\Webdev\\remote-code-executor\\client\\src\\reducers\\code.js":"6","D:\\Webdev\\remote-code-executor\\client\\src\\actions\\code.js":"7","D:\\Webdev\\remote-code-executor\\client\\src\\App.js":"8","D:\\Webdev\\remote-code-executor\\client\\src\\reportWebVitals.js":"9"},{"size":813,"mtime":1609936382132,"results":"10","hashOfConfig":"11"},{"size":115,"mtime":1609936382137,"results":"12","hashOfConfig":"11"},{"size":298,"mtime":1609936382130,"results":"13","hashOfConfig":"11"},{"size":527,"mtime":1609936382130,"results":"14","hashOfConfig":"11"},{"size":408,"mtime":1609936382126,"results":"15","hashOfConfig":"11"},{"size":683,"mtime":1609936382135,"results":"16","hashOfConfig":"11"},{"size":906,"mtime":1609936382122,"results":"17","hashOfConfig":"11"},{"size":888,"mtime":1609936877737,"results":"18","hashOfConfig":"11"},{"size":375,"mtime":1609936382138,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"j0ormm",{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\Webdev\\remote-code-executor\\client\\src\\index.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\reducers\\index.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\constants\\theme.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\constants\\global.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\components\\header\\Header.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\reducers\\code.js",["38"],"D:\\Webdev\\remote-code-executor\\client\\src\\actions\\code.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\App.js",["39"],"D:\\Webdev\\remote-code-executor\\client\\src\\reportWebVitals.js",[],{"ruleId":"40","severity":1,"message":"41","line":9,"column":1,"nodeType":"42","endLine":33,"endColumn":2},{"ruleId":"43","severity":1,"message":"44","line":8,"column":8,"nodeType":"45","messageId":"46","endLine":8,"endColumn":19},"import/no-anonymous-default-export","Unexpected default export of anonymous function","ExportDefaultDeclaration","no-unused-vars","'InputOutput' is defined but never used.","Identifier","unusedVar"]
1+
[{"D:\\Webdev\\remote-code-executor\\client\\src\\index.js":"1","D:\\Webdev\\remote-code-executor\\client\\src\\reducers\\index.js":"2","D:\\Webdev\\remote-code-executor\\client\\src\\constants\\theme.js":"3","D:\\Webdev\\remote-code-executor\\client\\src\\constants\\global.js":"4","D:\\Webdev\\remote-code-executor\\client\\src\\components\\header\\Header.js":"5","D:\\Webdev\\remote-code-executor\\client\\src\\reducers\\code.js":"6","D:\\Webdev\\remote-code-executor\\client\\src\\actions\\code.js":"7","D:\\Webdev\\remote-code-executor\\client\\src\\App.js":"8","D:\\Webdev\\remote-code-executor\\client\\src\\components\\code-editor\\CodeEditor.js":"9","D:\\Webdev\\remote-code-executor\\client\\src\\components\\footer\\Footer.js":"10","D:\\Webdev\\remote-code-executor\\client\\src\\components\\code-editor\\Submit.js":"11","D:\\Webdev\\remote-code-executor\\client\\src\\components\\output\\InputOutput.js":"12"},{"size":743,"mtime":1610226935752,"results":"13","hashOfConfig":"14"},{"size":115,"mtime":1609936382137,"results":"15","hashOfConfig":"14"},{"size":311,"mtime":1610280878601,"results":"16","hashOfConfig":"14"},{"size":427,"mtime":1610283140701,"results":"17","hashOfConfig":"14"},{"size":383,"mtime":1610295941079,"results":"18","hashOfConfig":"14"},{"size":683,"mtime":1609936382135,"results":"19","hashOfConfig":"14"},{"size":906,"mtime":1609936382122,"results":"20","hashOfConfig":"14"},{"size":1064,"mtime":1610280711441,"results":"21","hashOfConfig":"14"},{"size":3775,"mtime":1610294310709,"results":"22","hashOfConfig":"14"},{"size":233,"mtime":1610269487789,"results":"23","hashOfConfig":"14"},{"size":527,"mtime":1610281152507,"results":"24","hashOfConfig":"14"},{"size":1324,"mtime":1610290413452,"results":"25","hashOfConfig":"14"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"j0ormm",{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"D:\\Webdev\\remote-code-executor\\client\\src\\index.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\reducers\\index.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\constants\\theme.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\constants\\global.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\components\\header\\Header.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\reducers\\code.js",["50"],"D:\\Webdev\\remote-code-executor\\client\\src\\actions\\code.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\App.js",["51"],"D:\\Webdev\\remote-code-executor\\client\\src\\components\\code-editor\\CodeEditor.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\components\\footer\\Footer.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\components\\code-editor\\Submit.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\components\\output\\InputOutput.js",["52"],{"ruleId":"53","severity":1,"message":"54","line":9,"column":1,"nodeType":"55","endLine":33,"endColumn":2},{"ruleId":"56","severity":1,"message":"57","line":9,"column":8,"nodeType":"58","messageId":"59","endLine":9,"endColumn":19},{"ruleId":"56","severity":1,"message":"60","line":33,"column":7,"nodeType":"58","messageId":"59","endLine":33,"endColumn":12},"import/no-anonymous-default-export","Unexpected default export of anonymous function","ExportDefaultDeclaration","no-unused-vars","'InputOutput' is defined but never used.","Identifier","unusedVar","'error' is assigned a value but never used."]

‎client/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"react-dom": "^17.0.1",
1515
"react-redux": "^7.2.2",
1616
"react-scripts": "4.0.1",
17+
"react-split": "^2.0.9",
1718
"redux": "^4.0.5",
1819
"styled-components": "^5.2.1",
1920
"web-vitals": "^0.2.4"

‎client/public/index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,13 @@
2626
-->
2727
<title>React App</title>
2828
</head>
29+
<style>
30+
#root {
31+
height: 100%;
32+
display: flex;
33+
flex-direction: column;
34+
}
35+
</style>
2936
<body>
3037
<noscript>You need to enable JavaScript to run this app.</noscript>
3138
<div id="root"></div>

‎client/src/App.css

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎client/src/App.js

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,32 @@
1-
import React from 'react';
2-
import { ThemeProvider } from 'styled-components';
3-
import { lightTheme, darkTheme } from './constants/theme.js';
4-
import { GlobalStyles } from './constants/global.js';
5-
import { useDarkMode } from './utils/useDarkMode';
6-
import Header from './components/header/Header.js';
7-
import CodeEditor from './components/code-editor/CodeEditor.js';
8-
import InputOutput from './components/output/InputOutput.js';
9-
import './App.css';
1+
import React from "react";
2+
import { ThemeProvider } from "styled-components";
3+
import { lightTheme, darkTheme } from "./constants/theme.js";
4+
import { GlobalStyles } from "./constants/global.js";
5+
import { useDarkMode } from "./utils/useDarkMode";
6+
import Header from "./components/header/Header.js";
7+
import Footer from "./components/footer/Footer.js";
8+
import CodeEditor from "./components/code-editor/CodeEditor.js";
9+
import InputOutput from "./components/output/InputOutput.js";
10+
import styles from "./App.module.css";
1011

1112
const App = () => {
1213
const [theme, toggleTheme, componentMounted] = useDarkMode();
1314

14-
const themeMode = theme === 'light' ? lightTheme : darkTheme;
15+
const themeMode = theme === "light" ? lightTheme : darkTheme;
1516

1617
if (!componentMounted) {
1718
return <div />;
1819
}
1920
return (
20-
<ThemeProvider theme={themeMode}>
21-
<GlobalStyles />
22-
<Header theme={theme} toggleTheme={toggleTheme} />
23-
<CodeEditor theme={theme} />
24-
</ThemeProvider>
21+
<div className={styles.App}>
22+
<ThemeProvider theme={themeMode}>
23+
<GlobalStyles />
24+
<Header theme={theme} toggleTheme={toggleTheme} />
25+
<Footer />
26+
<CodeEditor theme={theme} />
27+
{/* <Footer /> */}
28+
</ThemeProvider>
29+
</div>
2530
);
2631
};
2732

‎client/src/App.module.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
2+
3+
.App {
4+
display: flex;
5+
flex-direction: column;
6+
height: 100%;
7+
}
8+
9+
body {
10+
margin: 0;
11+
box-sizing: border-box;
12+
height: 100vh;
13+
background-color: gainsboro;
14+
font-family: "Montserrat", sans-serif;
15+
overflow: hidden;
16+
}

‎client/src/App.test.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎client/src/components/code-editor/CodeEditor.js

Lines changed: 94 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,42 @@
1-
import React, { useRef, useState } 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';
1+
import React, { useRef, useState } 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+
12+
const Row = styled.div`
13+
display: flex;
14+
flex-direction: row;
15+
flex-grow: 1;
16+
// background: blue;
17+
`;
18+
19+
const OutputWindow = styled.div`
20+
// height: 100%;
21+
// margin: 20px;
22+
// border: 2px solid #eeeeee;
23+
border-radius: 5px;
24+
padding: 0 20px;
25+
box-sizing: border-box;
26+
color: ${(props) => (props.error ? "red" : "black")};
27+
`;
628

729
const CodeEditor = ({ theme }) => {
8-
const loading = useSelector(state => state.code.isFetching);
30+
const loading = useSelector((state) => state.code.isFetching);
931
const [isEditorReady, setIsEditorReady] = useState(false);
10-
const [language, setLanguage] = useState('c');
11-
const [input, setInput] = useState('');
32+
const [language, setLanguage] = useState("c");
33+
const [input, setInput] = useState("");
1234
const dispatch = useDispatch();
1335
const valueGetter = useRef();
36+
let output = useSelector((state) => state.code.output);
37+
let error = useSelector((state) => state.code.error);
1438

15-
const handleEditorDidMount = _valueGetter => {
39+
const handleEditorDidMount = (_valueGetter) => {
1640
setIsEditorReady(true);
1741
valueGetter.current = _valueGetter;
1842
};
@@ -24,29 +48,72 @@ const CodeEditor = ({ theme }) => {
2448
dispatch(res);
2549
};
2650

27-
const changeLanguage = e => {
51+
const changeLanguage = (e) => {
2852
setLanguage(e.target.value);
2953
};
3054

3155
return (
3256
<>
33-
<select value={language} onChange={changeLanguage}>
34-
<option value='c'>C</option>
35-
<option value='cpp'>C++</option>
36-
<option value='python'>Python</option>
37-
<option value='javascript'>Javascript</option>
38-
<option value='java'>Java</option>
39-
</select>
40-
<button onClick={SubmitCode} disabled={!isEditorReady}>
41-
{loading ? 'Loading..' : 'Submit'}
42-
</button>
43-
<Editor
44-
height='70vh'
45-
language={language}
46-
theme={theme === 'dark' ? 'vs-dark' : 'light'}
47-
editorDidMount={handleEditorDidMount}
48-
/>
49-
<InputOutput input={input} setInput={setInput} theme={theme} />
57+
<Row>
58+
<Split
59+
sizes={[50, 50]}
60+
minSize={100}
61+
expandToMin={false}
62+
gutterSize={10}
63+
gutterAlign="center"
64+
snapOffset={30}
65+
dragInterval={1}
66+
direction="horizontal"
67+
cursor="ew-resize"
68+
class={styles.splitHor}
69+
>
70+
<div className={styles.left}>
71+
<div className={styles.runCode}>
72+
<Submit language={language} changeLanguage={changeLanguage} />
73+
<div
74+
className={styles.submitButton}
75+
onClick={SubmitCode}
76+
disabled={!isEditorReady}
77+
>
78+
{loading ? "Loading.." : "Submit"}
79+
</div>
80+
</div>
81+
<Editor
82+
className="editor"
83+
language={language}
84+
theme={theme === "dark" ? "vs-dark" : "light"}
85+
editorDidMount={handleEditorDidMount}
86+
/>
87+
</div>
88+
<div className={styles.right}>
89+
<Split
90+
sizes={[75, 25]}
91+
minSize={[25, 25]}
92+
expandToMin={false}
93+
gutterSize={10}
94+
gutterAlign="center"
95+
snapOffset={30}
96+
dragInterval={1}
97+
direction="vertical"
98+
cursor="ew-resize"
99+
class={styles.splitVer}
100+
>
101+
<div className={styles.output}>
102+
<div className={styles.outputHead}>Output</div>
103+
<OutputWindow error={error === "" ? false : true}>
104+
{output ? console.log(output) : null}
105+
<pre style={{ width: "100%" }}>
106+
{output === "" ? error : output}
107+
</pre>
108+
</OutputWindow>
109+
</div>
110+
<div className={styles.input}>
111+
<InputOutput input={input} setInput={setInput} theme={theme} />
112+
</div>
113+
</Split>
114+
</div>
115+
</Split>
116+
</Row>
50117
</>
51118
);
52119
};

‎client/src/components/code-editor/Submit.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from "react";
2+
import styles from "./style.module.css";
3+
4+
const Submit = ({ language, changeLanguage }) => {
5+
return (
6+
<div className={styles.sel_lang}>
7+
<select value={language} onChange={changeLanguage}>
8+
<option value="c">C</option>
9+
<option value="cpp">C++</option>
10+
<option value="python">Python</option>
11+
<option value="javascript">Javascript</option>
12+
<option value="java">Java</option>
13+
</select>
14+
</div>
15+
);
16+
};
17+
18+
export default Submit;

‎client/src/components/code-editor/style.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.gutter {
2+
/* background-color: #eee; */
3+
4+
background-repeat: no-repeat;
5+
background-position: 50%;
6+
transition: 0.3s all;
7+
}
8+
9+
.gutter:hover {
10+
background-color: rgb(24, 24, 24);
11+
cursor: col-resize;
12+
opacity: 0.7;
13+
}

0 commit comments

Comments
 (0)