create console component

src/components/common/Console/Console.jsx

@@ -1,34 +1,26 @@
-import React, { useState, useEffect } from 'react';
 import style from './Console.module.scss';
+import { useConsole } from '../../../hooks/useConsole';
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import ConsoleItem from '../ConsoleItem/ConsoleItem';
 
-export const Console = ({ isOpen, close }) => {
-  const [output, setOutput] = useState([]);
-  const [command, setCommand] = useState('');
+export function Console({ isOpen, close }) {
+  const appConsole = useConsole();
+  const { files } = useSelector((state) => state.currentWork);
 
   useEffect(() => {
-    window.console = {
-      log: (...args) => setOutput((output) => [...output, args.join(' ')]),
-      error: (...args) => setOutput((output) => [...output, args.join(' ')]),
-      clear: () => setOutput([]),
-    };
-  }, []);
+    const timeout = setTimeout(() => {
+      appConsole.readCode(files.js.text);
+    }, 700);
 
-  const handleCommandChange = (event) => {
-    setCommand(event.target.value);
-  };
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [files.js.text]);
 
-  const handleKeyDown = (event) => {
-    if (event.key === 'Enter') {
-      try {
-        const result = eval(event.target.value);
-        setOutput((output) => [...output, result]);
-      } catch (e) {
-        setOutput((output) => [...output, e.toString()]);
-      }
-      setCommand('');
-      event.preventDefault();
-    }
-  };
+  useEffect(() => {
+    appConsole.readCode(files.js.text);
+  }, []);
 
   if (isOpen) {
     return (
@@ -39,17 +31,17 @@ export const Console = ({ isOpen, close }) => {
           <button onClick={close}>x</button>
         </div>
         <div className={style.out}>
-          {output.map((item, index) => (
-            <div key={index}>{item}</div>
+          {appConsole.output.map((item, index) => (
+            <ConsoleItem key={index} message={item} />
           ))}
         </div>
         <div className={style.entryField}>
           <span>&#62;</span>
           <input
             type="text"
-            value={command}
-            onChange={handleCommandChange}
-            onKeyDown={handleKeyDown}
+            value={appConsole.command}
+            onChange={appConsole.handleCommandChange}
+            onKeyDown={appConsole.handleKeyDown}
           />
         </div>
       </div>
@@ -57,4 +49,4 @@ export const Console = ({ isOpen, close }) => {
   } else {
     return null;
   }
-};
+}

src/components/common/Console/Console.module.scss

@@ -31,17 +31,17 @@
   }
 
   .out {
+    display: flex;
+    flex-direction: column;
     flex: 1;
-    overflow-y: auto;
-    padding: 10px;
     background-color: #1d1e22;
     color: white;
+    overflow: scroll;
   }
 
   // FIXME: height
   input {
     color: white;
-    width: 100%;
     height: auto;
     padding: 7px;
     font-size: 15px;

src/components/common/ConsoleItem/ConsoleItem.jsx

@@ -0,0 +1,7 @@
+import style from './ConsoleItem.module.scss';
+
+const ConsoleItem = ({ message }) => {
+  return <pre className={style.consoleItem}>{message}</pre>;
+};
+
+export default ConsoleItem;

src/components/common/ConsoleItem/ConsoleItem.module.scss

@@ -0,0 +1,8 @@
+@import '../../../scss/index.scss';
+
+.consoleItem {
+    padding: 10px 10px 5px;
+    border-bottom: 1px solid #5A5F73;
+    font-size: 17px;
+    font-weight: 500;
+}

src/components/common/Preview/Preview.jsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import style from "./Preview.module.scss";
+import { useEffect, useState } from 'react';
+import style from './Preview.module.scss';
 
 export const Preview = ({ html, css, js }) => {
   const [srcDoc, setSrcDoc] = useState();

src/components/pages/PenPage/PenPage.jsx

@@ -31,7 +31,8 @@ export const PenPage = () => {
       vertical={true}
       className={style.container}
       onActivate={() => setIsSizeChanged(true)}
-      afterResizing={() => setIsSizeChanged(false)}>
+      afterResizing={() => setIsSizeChanged(false)}
+    >
       <HeaderPen />
 
       <Section children={<Editors />} />

src/components/pages/PenPage/PenPage.module.scss

@@ -1,22 +1,9 @@
-@import '../../../scss/index.scss';
+@import "../../../scss/index.scss";
 
 .container {
   width: 100vw;
   height: 100vh;
 
-  // .editors {
-  //   height: 50%;
-  //   display: flex;
-  //   background-color: black;
-  //   width: 100%;
-
-  //   .bar {
-  //     background: black;
-  //     border-left: 1px solid #2f2f2f;
-  //     border-right: 1px solid #2f2f2f;
-  //     width: 15px;
-  //   }
-  // }
   .barVertical {
     background: black;
     width: 100%;
@@ -36,13 +23,15 @@
 }
 
 footer {
-  background-color: black;
-  height: 40px;
-}
+  @include flex($direction: row, $align: center, $justify: start) ;
+  padding: 0 5px;
+  height:30px;
+  background-color: #060606;
 
-footer button {
-  margin: 8px;
-  @extend %buttonGrey;
-  border-radius: 3px;
-  padding: 5px 8px;
+  button {
+    @extend %buttonGrey;
+    padding: 3px 7px;
+    border-radius: 2px;
+    font-size: 15px;
+  }
 }

src/hooks/useConsole.js

@@ -0,0 +1,90 @@
+import { useEffect, useState } from 'react';
+
+// export const useConsole = () => {
+//   const [history, setHistory] = useState([]);
+
+//   function addResult(inputAsString, output) {
+//     const outputAsString = Array.isArray(output)
+//       ? `[${output.join(', ')}]`
+//       : output.toString();
+//     setHistory((prevHistory) => [
+//       ...prevHistory,
+//       { input: inputAsString, output: outputAsString },
+//     ]);
+//   }
+
+//   const readCode = (code) => {
+//     if (code.length === 0) return;
+
+//     const strings = code.split('\n').filter((item) => item.length);
+
+//     strings.forEach((string) => {
+//       try {
+//         addResult(string, eval(string));
+//       } catch (err) {
+//         addResult(string, err);
+//       }
+//     });
+//   };
+
+//   return {
+//     history,
+//     readCode,
+//     addResult,
+//     handleInputKeyUp,
+//   };
+// };
+
+export const useConsole = () => {
+  const [output, setOutput] = useState([]);
+  const [command, setCommand] = useState('');
+
+  useEffect(() => {
+    window.console = {
+      log: (...args) => setOutput((output) => [...output, args.join(' ')]),
+      error: (...args) => setOutput((output) => [...output, args.join(' ')]),
+      clear: () => setOutput([]),
+    };
+  }, []);
+
+  const handleCommandChange = (event) => {
+    setCommand(event.target.value);
+  };
+
+  const readCode = (code) => {
+    setOutput([]);
+    const strings = code.split('\n').filter((item) => item.length);
+
+    strings.forEach((string) => {
+      try {
+        const result = eval(string);
+
+        setOutput((output) => [...output, result]);
+      } catch (e) {
+        setOutput((output) => [...output, e.toString()]);
+      }
+    });
+  };
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      try {
+        const result = eval(event.target.value);
+        setOutput((output) => [...output, result]);
+      } catch (e) {
+        setOutput((output) => [...output, e.toString()]);
+      }
+      setCommand('');
+      event.preventDefault();
+    }
+  };
+
+  return {
+    output,
+    command,
+    setCommand,
+    readCode,
+    handleKeyDown,
+    handleCommandChange,
+  };
+};