Skip to content

Commit

Permalink
changing layout and adding styles
Browse files Browse the repository at this point in the history
  • Loading branch information
Tushar3099 committed Jan 10, 2021
2 parents e3912fa + 0fe1a61 commit 661212a
Show file tree
Hide file tree
Showing 25 changed files with 509 additions and 225 deletions.
2 changes: 1 addition & 1 deletion client/.eslintcache
Original file line number Diff line number Diff line change
@@ -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"]
[{"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."]
1 change: 1 addition & 0 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-scripts": "4.0.1",
"react-split": "^2.0.9",
"redux": "^4.0.5",
"styled-components": "^5.2.1",
"web-vitals": "^0.2.4"
Expand Down
7 changes: 7 additions & 0 deletions client/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,13 @@
-->
<title>React App</title>
</head>
<style>
#root {
height: 100%;
display: flex;
flex-direction: column;
}
</style>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
Expand Down
43 changes: 0 additions & 43 deletions client/src/App.css

This file was deleted.

35 changes: 20 additions & 15 deletions client/src/App.js
Original file line number Diff line number Diff line change
@@ -1,27 +1,32 @@
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { lightTheme, darkTheme } from './constants/theme.js';
import { GlobalStyles } from './constants/global.js';
import { useDarkMode } from './utils/useDarkMode';
import Header from './components/header/Header.js';
import CodeEditor from './components/code-editor/CodeEditor.js';
import InputOutput from './components/output/InputOutput.js';
import './App.css';
import React from "react";
import { ThemeProvider } from "styled-components";
import { lightTheme, darkTheme } from "./constants/theme.js";
import { GlobalStyles } from "./constants/global.js";
import { useDarkMode } from "./utils/useDarkMode";
import Header from "./components/header/Header.js";
import Footer from "./components/footer/Footer.js";
import CodeEditor from "./components/code-editor/CodeEditor.js";
import InputOutput from "./components/output/InputOutput.js";
import styles from "./App.module.css";

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

const themeMode = theme === 'light' ? lightTheme : darkTheme;
const themeMode = theme === "light" ? lightTheme : darkTheme;

if (!componentMounted) {
return <div />;
}
return (
<ThemeProvider theme={themeMode}>
<GlobalStyles />
<Header theme={theme} toggleTheme={toggleTheme} />
<CodeEditor theme={theme} />
</ThemeProvider>
<div className={styles.App}>
<ThemeProvider theme={themeMode}>
<GlobalStyles />
<Header theme={theme} toggleTheme={toggleTheme} />
<Footer />
<CodeEditor theme={theme} />
{/* <Footer /> */}
</ThemeProvider>
</div>
);
};

Expand Down
16 changes: 16 additions & 0 deletions client/src/App.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");

.App {
display: flex;
flex-direction: column;
height: 100%;
}

body {
margin: 0;
box-sizing: border-box;
height: 100vh;
background-color: gainsboro;
font-family: "Montserrat", sans-serif;
overflow: hidden;
}
8 changes: 0 additions & 8 deletions client/src/App.test.js

This file was deleted.

121 changes: 94 additions & 27 deletions client/src/components/code-editor/CodeEditor.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,42 @@
import React, { useRef, useState } from 'react';
import Editor from '@monaco-editor/react';
import { executeCode, setLoadingTrue } from '../../actions/code';
import { useDispatch, useSelector } from 'react-redux';
import InputOutput from '../output/InputOutput';
import React, { useRef, useState } from "react";
import Editor from "@monaco-editor/react";
import { executeCode, setLoadingTrue } from "../../actions/code";
import { useDispatch, useSelector } from "react-redux";
import InputOutput from "../output/InputOutput";
import Submit from "./Submit";
import Split from "react-split";
import styled from "styled-components";
import styles from "./style.module.css";
import "./style.css";

const Row = styled.div`
display: flex;
flex-direction: row;
flex-grow: 1;
// background: blue;
`;

const OutputWindow = styled.div`
// height: 100%;
// margin: 20px;
// border: 2px solid #eeeeee;
border-radius: 5px;
padding: 0 20px;
box-sizing: border-box;
color: ${(props) => (props.error ? "red" : "black")};
`;

const CodeEditor = ({ theme }) => {
const loading = useSelector(state => state.code.isFetching);
const loading = useSelector((state) => state.code.isFetching);
const [isEditorReady, setIsEditorReady] = useState(false);
const [language, setLanguage] = useState('c');
const [input, setInput] = useState('');
const [language, setLanguage] = useState("c");
const [input, setInput] = useState("");
const dispatch = useDispatch();
const valueGetter = useRef();
let output = useSelector((state) => state.code.output);
let error = useSelector((state) => state.code.error);

const handleEditorDidMount = _valueGetter => {
const handleEditorDidMount = (_valueGetter) => {
setIsEditorReady(true);
valueGetter.current = _valueGetter;
};
Expand All @@ -24,29 +48,72 @@ const CodeEditor = ({ theme }) => {
dispatch(res);
};

const changeLanguage = e => {
const changeLanguage = (e) => {
setLanguage(e.target.value);
};

return (
<>
<select value={language} onChange={changeLanguage}>
<option value='c'>C</option>
<option value='cpp'>C++</option>
<option value='python'>Python</option>
<option value='javascript'>Javascript</option>
<option value='java'>Java</option>
</select>
<button onClick={SubmitCode} disabled={!isEditorReady}>
{loading ? 'Loading..' : 'Submit'}
</button>
<Editor
height='70vh'
language={language}
theme={theme === 'dark' ? 'vs-dark' : 'light'}
editorDidMount={handleEditorDidMount}
/>
<InputOutput input={input} setInput={setInput} theme={theme} />
<Row>
<Split
sizes={[50, 50]}
minSize={100}
expandToMin={false}
gutterSize={10}
gutterAlign="center"
snapOffset={30}
dragInterval={1}
direction="horizontal"
cursor="ew-resize"
class={styles.splitHor}
>
<div className={styles.left}>
<div className={styles.runCode}>
<Submit language={language} changeLanguage={changeLanguage} />
<div
className={styles.submitButton}
onClick={SubmitCode}
disabled={!isEditorReady}
>
{loading ? "Loading.." : "Submit"}
</div>
</div>
<Editor
className="editor"
language={language}
theme={theme === "dark" ? "vs-dark" : "light"}
editorDidMount={handleEditorDidMount}
/>
</div>
<div className={styles.right}>
<Split
sizes={[75, 25]}
minSize={[25, 25]}
expandToMin={false}
gutterSize={10}
gutterAlign="center"
snapOffset={30}
dragInterval={1}
direction="vertical"
cursor="ew-resize"
class={styles.splitVer}
>
<div className={styles.output}>
<div className={styles.outputHead}>Output</div>
<OutputWindow error={error === "" ? false : true}>
{output ? console.log(output) : null}
<pre style={{ width: "100%" }}>
{output === "" ? error : output}
</pre>
</OutputWindow>
</div>
<div className={styles.input}>
<InputOutput input={input} setInput={setInput} theme={theme} />
</div>
</Split>
</div>
</Split>
</Row>
</>
);
};
Expand Down
18 changes: 18 additions & 0 deletions client/src/components/code-editor/Submit.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from "react";
import styles from "./style.module.css";

const Submit = ({ language, changeLanguage }) => {
return (
<div className={styles.sel_lang}>
<select value={language} onChange={changeLanguage}>
<option value="c">C</option>
<option value="cpp">C++</option>
<option value="python">Python</option>
<option value="javascript">Javascript</option>
<option value="java">Java</option>
</select>
</div>
);
};

export default Submit;
13 changes: 13 additions & 0 deletions client/src/components/code-editor/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.gutter {
/* background-color: #eee; */

background-repeat: no-repeat;
background-position: 50%;
transition: 0.3s all;
}

.gutter:hover {
background-color: rgb(24, 24, 24);
cursor: col-resize;
opacity: 0.7;
}
Loading

0 comments on commit 661212a

Please sign in to comment.