changing layout and adding styles

AASF-IIITM · Jan 10, 2021 · 661212a · 661212a
2 parents e3912fa + 0fe1a61
commit 661212a
Show file tree

Hide file tree

Showing 25 changed files with 509 additions and 225 deletions.
diff --git a/client/.eslintcache b/client/.eslintcache
@@ -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."]
diff --git a/client/package.json b/client/package.json
@@ -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"

diff --git a/client/public/index.html b/client/public/index.html
@@ -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>

diff --git a/client/src/App.css b/client/src/App.css
diff --git a/client/src/App.js b/client/src/App.js
@@ -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>
   );
 };
 

diff --git a/client/src/App.module.css b/client/src/App.module.css
@@ -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;
+}
diff --git a/client/src/App.test.js b/client/src/App.test.js
diff --git a/client/src/components/code-editor/CodeEditor.js b/client/src/components/code-editor/CodeEditor.js
@@ -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;
   };
@@ -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>
     </>
   );
 };

diff --git a/client/src/components/code-editor/Submit.js b/client/src/components/code-editor/Submit.js
@@ -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;
diff --git a/client/src/components/code-editor/style.css b/client/src/components/code-editor/style.css
@@ -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;
+}