added default code

Author: tomarviii88

client/.eslintcache

@@ -1,17 +1,24 @@
-import React, { useRef, useState, useEffect } from "react";
-import { ControlledEditor } from "@monaco-editor/react";
-import { executeCode, setLoadingTrue } from "../../actions/code";
-import { useDispatch, useSelector } from "react-redux";
-import Input from "./Input";
-import Submit from "./Submit";
-import Split from "react-split";
-import styled from "styled-components";
-import styles from "./styles/editor.module.css";
-import "./styles/style.css";
-import io from "socket.io-client";
-import { Play } from "react-feather";
-
-const ENDPOINT = "http://localhost:3000";
+import React, { useRef, useState, useEffect } from 'react';
+import { ControlledEditor } from '@monaco-editor/react';
+import { executeCode, setLoadingTrue } from '../../actions/code';
+import { useDispatch, useSelector } from 'react-redux';
+import Input from './Input';
+import Submit from './Submit';
+import Split from 'react-split';
+import styled from 'styled-components';
+import styles from './styles/editor.module.css';
+import './styles/style.css';
+import io from 'socket.io-client';
+import { Play } from 'react-feather';
+import {
+  getDefaultCode,
+  setLanguageLocalStorage,
+  getLanguageLocalStorage,
+  setCodeLocalStorage,
+  getCodeLocalStorage
+} from './utils/code-settings';
+
+const ENDPOINT = 'http://localhost:3000';
 
 const socket = io(ENDPOINT);
 
@@ -27,28 +34,38 @@ const OutputWindow = styled.div`
   box-sizing: border-box;
   overflow: auto;
   flex: 1;
-  color: ${(props) => (props.error ? "red" : "black")};
+  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 [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const [windowHeight, setWindowHeight] = useState(window.innerHeight);
-  const [language, setLanguage] = useState("c");
-  const [input, setInput] = useState("");
+  const [language, setLanguage] = useState('java');
+  const [input, setInput] = useState('');
   // const [output, setOutput] = useState("");
-  const [code, setCode] = useState("");
+  const [code, setCode] = useState('');
   const dispatch = useDispatch();
   const valueGetter = useRef();
-  let output = useSelector((state) => state.code.output);
+  let output = useSelector(state => state.code.output);
 
-  let error = useSelector((state) => state.code.error);
+  let error = useSelector(state => state.code.error);
 
   useEffect(() => {
-    window.addEventListener("resize", updateWindowDimensions);
+    window.addEventListener('resize', updateWindowDimensions);
+
+    if (getLanguageLocalStorage()) {
+      setLanguage(getLanguageLocalStorage());
+      if (getCodeLocalStorage()) {
+        setCode(getCodeLocalStorage());
+      } else setCode(getDefaultCode(getLanguageLocalStorage()));
+    } else {
+      setCode(getDefaultCode(language));
+    }
+
     return () => {
-      window.removeEventListener("resize", updateWindowDimensions);
+      window.removeEventListener('resize', updateWindowDimensions);
     };
   }, []);
 
@@ -58,23 +75,23 @@ const CodeEditor = ({ theme }) => {
   };
 
   useEffect(() => {
-    console.log("socket: browser says ping (1)");
-    socket.on("setLanguage", function (data) {
+    console.log('socket: browser says ping (1)');
+    socket.on('setLanguage', function(data) {
       // console.log(data);
       setLanguage(data);
     });
-    socket.on("setInput", (data) => {
+    socket.on('setInput', data => {
       setInput(data);
     });
-    socket.on("setOutput", (data) => {
+    socket.on('setOutput', data => {
       dispatch(data);
     });
-    socket.on("setCodeExec", (data) => {
+    socket.on('setCodeExec', data => {
       setCode(data);
     });
   }, []);
 
-  const handleEditorDidMount = (_valueGetter) => {
+  const handleEditorDidMount = _valueGetter => {
     setIsEditorReady(true);
     valueGetter.current = _valueGetter;
   };
@@ -84,9 +101,11 @@ const CodeEditor = ({ theme }) => {
     // socket.emit("getOutput", output);
     // setOutput(out);
   };
+
   const onChangeCode = (newValue, e) => {
     // console.log("onChange" + e);
-    socket.emit("getCodeExec", e);
+    socket.emit('getCodeExec', e);
+    setCodeLocalStorage(e);
     setCode(e);
   };
 
@@ -95,23 +114,26 @@ const CodeEditor = ({ theme }) => {
     const res = await executeCode(code, language, input);
     dispatch(res);
     // getOutput();
-    socket.emit("getOutput", res);
+    socket.emit('getOutput', res);
   };
 
-  const changeLanguage = (e) => {
-    socket.emit("getLanguage", e.target.value);
+  const changeLanguage = e => {
+    setLanguageLocalStorage(e.target.value);
+    setCode(getDefaultCode(e.target.value));
+    setCodeLocalStorage(getDefaultCode(e.target.value));
+    socket.emit('getLanguage', e.target.value);
     setLanguage(e.target.value);
   };
   return (
     <>
       <div className={styles.row}>
         <Split
-          direction={windowWidth > 800 ? "horizontal" : "vertical"}
+          direction={windowWidth > 800 ? 'horizontal' : 'vertical'}
           sizes={[60, 40]}
           minSize={windowWidth > 800 ? 0 : 500}
           snapOffset={windowWidth > 800 ? 200 : 0}
           gutterSize={20}
-          gutterAlign="center"
+          gutterAlign='center'
           className={styles.splitHor}
         >
           <div className={styles.left}>
@@ -122,8 +144,8 @@ const CodeEditor = ({ theme }) => {
                 onClick={SubmitCode}
                 disabled={!isEditorReady}
               >
-                {loading ? "Loading.." : "Run Code"}
-                <Play style={{ paddingLeft: 10, fontSize: "1em" }} />
+                {loading ? 'Loading..' : 'Run Code'}
+                <Play style={{ paddingLeft: 10, fontSize: '1em' }} />
               </div>
             </div>
             {/* <Editor
@@ -134,9 +156,9 @@ const CodeEditor = ({ theme }) => {
             /> */}
             <ControlledEditor
               // wrapperClassName="editor"
-              className="editor"
+              className='editor'
               language={language}
-              theme={theme === "dark" ? "vs-dark" : "light"}
+              theme={theme === 'dark' ? 'vs-dark' : 'light'}
               editorDidMount={handleEditorDidMount}
               value={code}
               onChange={onChangeCode}
@@ -145,20 +167,20 @@ const CodeEditor = ({ theme }) => {
           <div className={styles.right}>
             <div className={styles.column}>
               <Split
-                direction="vertical"
+                direction='vertical'
                 sizes={windowWidth > 800 ? [75, 25] : [100, 0]}
                 minSize={0}
                 snapOffset={windowWidth > 800 ? 100 : 0}
                 gutterSize={20}
-                gutterAlign="center"
+                gutterAlign='center'
                 className={styles.splitVer}
               >
                 <div className={styles.output}>
                   <div className={styles.outputHead}>Output</div>
-                  <OutputWindow error={error === "" ? false : true}>
+                  <OutputWindow error={error === '' ? false : true}>
                     {output ? console.log(output) : null}
-                    <pre style={{ width: "100%" }}>
-                      {output === "" ? error : output}
+                    <pre style={{ width: '100%' }}>
+                      {output === '' ? error : output}
                     </pre>
                   </OutputWindow>
                 </div>

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

@@ -0,0 +1,38 @@
+import c from './languages/c';
+import cpp from './languages/cpp';
+import python from './languages/python';
+import javascript from './languages/javascript';
+import java from './languages/java';
+
+export const getDefaultCode = language => {
+  switch (language) {
+    case 'c':
+      return c;
+    case 'cpp':
+      return cpp;
+    case 'python':
+      return python;
+    case 'javascript':
+      return javascript;
+    case 'java':
+      return java;
+    default:
+      return 'Choose Language';
+  }
+};
+
+export const setLanguageLocalStorage = language => {
+  localStorage.setItem('lang', language);
+};
+
+export const getLanguageLocalStorage = () => {
+  return localStorage.getItem('lang');
+};
+
+export const setCodeLocalStorage = code => {
+  localStorage.setItem('code', code);
+};
+
+export const getCodeLocalStorage = () => {
+  return localStorage.getItem('code');
+};

client/src/components/code-editor/utils/code-settings.js

@@ -0,0 +1,4 @@
+const code =
+  '#include<stdio.h>\nint main()\n{\n\t//Code\n\tprintf("Hello World");\n\treturn 0;\n}';
+
+export default code;

client/src/components/code-editor/utils/languages/c.js

@@ -0,0 +1,4 @@
+const code =
+  '#include<iostream.h>\nusing namespace std;\nint main()\n{\n\t//Code\n\tcout<<"Hello World";\n\treturn 0;\n}';
+
+export default code;

client/src/components/code-editor/utils/languages/cpp.js

@@ -0,0 +1,4 @@
+const code =
+  '//Code\nclass HelloWorld {\n\tpublic static void main(String[] args) {\n\t\tSystem.out.println("Hello World");\n\t}\n}';
+
+export default code;

client/src/components/code-editor/utils/languages/java.js

@@ -0,0 +1,3 @@
+const code = '//Code\nconsole.log("Hello World");';
+
+export default code;

client/src/components/code-editor/utils/languages/javascript.js

@@ -0,0 +1,3 @@
+const code = '#Code\nprint("Hello World")';
+
+export default code;