refactor: 🎨 improved code

Author: AceTheCreator

package.json

@@ -14,6 +14,7 @@
     "react-icons": "^4.1.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "react-textarea-autosize": "^8.3.2",
     "remarkable": "^2.0.1",
     "remarkable-react": "^1.4.3",
     "styled-components": "^5.2.1",

src/Cell.js

@@ -5,18 +5,21 @@
 import React, { useRef, useEffect, useState } from "react";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import PropTypes from "prop-types";
+import TextareaAutosize from "react-textarea-autosize";
 import CodeMirror from "react-codemirror";
 import { Remarkable } from "remarkable";
 import { CgMathPlus, CgArrowUp, CgArrowDown, CgTrash } from "react-icons/cg";
 import { BsFillCaretRightFill } from "react-icons/bs";
-import { print_val, table } from "./utils";
+import { print_val } from "./utils";
 import {
   AddCellButton,
   CellButton,
   CellHead,
   OtherCellButtonWrapper,
-  CellTextArea,
   Output,
+  CellContainer,
+  RunContainer,
+  CellBodyContainer,
 } from "./Cell.style";
 
 require("codemirror/lib/codemirror.css");
@@ -34,6 +37,7 @@ export default function Cell({
   const refOutput = useRef("");
   const [showMoreCellButton, setShowMoreCellButton] = useState("none");
   useEffect(() => {
+    console.log(currentCell);
     if (currentCell === cellId) {
       setShowMoreCellButton("flex");
     } else {
@@ -44,9 +48,10 @@ export default function Cell({
     if (cell.type === "code") {
       const input = refCode.current.getCodeMirror().getValue();
       // eslint-disable-next-line no-eval
-      let output = ("global", eval)(input);
+      let output = ("global", eval)(input) || "";
       try {
         if (Array.isArray(output)) {
+          console.log("output");
           output = print_val(output);
         } else if (typeof output === "object" && output !== null) {
           output = JSON.stringify(output);
@@ -57,28 +62,28 @@ export default function Cell({
           // retreive value from the console function
           console.oldLog = console.log;
           console.log = function (value) {
-            output = value;
             return value;
           };
           // eslint-disable-next-line no-eval
           output = eval(input);
           if (Array.isArray(output)) {
+            console.log("output");
             output = print_val(output);
           } else if (typeof output === "object" && output !== null) {
             output = JSON.stringify(output);
             if (output === "{}") {
               output = "";
             }
           }
-          console.log(output);
-        }
-        if (
-          input.includes("table") ||
-          input.includes("plot") ||
-          input.includes("console.log(")
-        ) {
-          output = table(output);
+          console.log(output, "helllo");
         }
+        // if (
+        //   input.includes("table") ||
+        //   input.includes("plot") ||
+        //   input.includes("console.log(")
+        // ) {
+        //   output = table(output);
+        // }
         // eslint-disable-next-line no-eval
         const cellstate = { ...cell, input, output };
         dispatch({ type: "CHANGE_CELL", payload: cellstate });
@@ -153,6 +158,8 @@ export default function Cell({
   const showOutput = () => {
     if (cell.type === "text") {
       refOutput.current.style.display = "block";
+      refOutput.current.style.background = "white";
+      refOutput.current.style.color = "black";
       refCode.current.style.display = "none";
     }
   };
@@ -162,32 +169,21 @@ export default function Cell({
   };
   return (
     <>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          marginTop: "20px",
-        }}
-      >
-        <div style={{ marginTop: "30px" }}>
+      <CellContainer>
+        <RunContainer>
           {currentCell === cellId ? (
-            <button
-              style={{
-                background: "none",
-                border: "none",
-              }}
+            <div
               onClick={() => {
                 getCode();
               }}
             >
               <BsFillCaretRightFill color="#FFDF28" fontSize="30px" />
-            </button>
+            </div>
           ) : (
             <div>[{cellId}]:</div>
           )}
-        </div>
-        <div style={{ width: "95%" }}>
+        </RunContainer>
+        <CellBodyContainer>
           <CellHead>
             <div
               style={{
@@ -267,18 +263,25 @@ export default function Cell({
                 value={cell.input}
                 ref={refCode}
                 options={{
-                  tabSize: 1,
-                  theme: "yeti",
-                  lineNumbers: true,
                   mode: "javascript",
+                  extraKeys: { "Ctrl-Space": "autocomplete" },
+                  autoCloseBrackets: true,
+                  matchBrackets: true,
+                  lineNumbers: true,
+                  tabSize: 4,
+                  theme: "yeti",
+                  autocorrect: true,
                 }}
               />
             ) : (
-              <TextCell refText={refCode} />
+              <TextCell
+                selectCell={() => setCurrentCell(cellId)}
+                refText={refCode}
+              />
             )}
           </div>
-        </div>
-      </div>
+        </CellBodyContainer>
+      </CellContainer>
       <div
         style={{
           display: "flex",
@@ -296,8 +299,10 @@ export default function Cell({
   );
 }
 
-function TextCell({ refText }) {
-  return <CellTextArea ref={refText}></CellTextArea>;
+function TextCell({ refText, selectCell }) {
+  return (
+    <TextareaAutosize onFocus={selectCell} ref={refText}></TextareaAutosize>
+  );
 }
 
 TextCell.propTypes = {

src/Cell.style.js

@@ -1,6 +1,23 @@
 /* eslint-disable import/prefer-default-export */
 import styled from "styled-components";
 
+export const CellContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: 20px;
+  width: 100%;
+`;
+
+export const RunContainer = styled.div`
+  width: 5%;
+  cursor: pointer;
+`;
+
+export const CellBodyContainer = styled.div`
+  width: 100%;
+`;
+
 export const AddCellButton = styled.button`
   background: transparent;
   border: 1px solid rgb(179, 179, 179);
@@ -20,11 +37,8 @@ export const CellHead = styled.div`
 `;
 
 export const OtherCellButtonWrapper = styled.div`
-  position: absolute;
-  z-index: 99 !important;
   display: flex;
   align-items: flex-end;
-  left: 89%;
   margin-top: 37px;
   display: ${(props) => props.display};
 `;

src/components/NavBar/navbar.style.js

@@ -2,9 +2,6 @@
 import styled from "styled-components";
 
 export const NavBg = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
   background: #2e2e2e;
   width: initial;
   box-shadow: 0px 2px 1px #ffdf28;
@@ -15,7 +12,7 @@ export const NavBg = styled.div`
 `;
 
 export const NavWrapper = styled.div`
-  width: 100%;
+  margin: 0px auto;
   max-width: 1400px;
   display: flex;
   align-items: center;

src/components/header/header.style.js

@@ -15,29 +15,30 @@ export const NoteEditContainer = styled.div`
 `;
 
 export const NoteTitle = styled.input`
-  background: transparent;
+  background: #fafafa;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
   text-align: center;
   font-size: 16px;
   border: none;
   border-radius: 5px;
-  height: 40px;
-  box-shadow: 0px 1px 1px 1px rgb(231, 231, 231);
-  width: 150px;
+  width: 160px;
+  height: 47px;
 `;
 
 export const DownloadNoteBook = styled.button`
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  box-shadow: 0px 1px 1px 1px rgb(231, 231, 231);
-  min-width: 100px;
-  font-size: 14px;
-  height: 40px;
+  justify-content: center;
   background: #ffdf28;
-  border: none;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
   border-radius: 3px;
+  font-size: 15px;
+  border: none;
   cursor: pointer;
   margin-right: 20px;
+  width: 185px;
+  height: 47px;
 `;
 
 export const AddNoteInput = styled.input`

src/index.css

@@ -15,4 +15,14 @@ code {
 .CodeMirror{
   min-height: 50px !important;
   height: auto !important;
+}
+textarea{
+  width: 100%;
+  min-height: 7vh;
+  border: 1px solid #e5e1db;
+  border-radius: 5px;
+  resize: none;
+}
+textarea:focus{
+    outline: none;
 }

yarn.lock

@@ -9242,6 +9242,15 @@ react-scripts@4.0.0:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-textarea-autosize@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.2.tgz#4f9374d357b0a6f6469956726722549124a1b2db"
+  integrity sha512-JrMWVgQSaExQByP3ggI1eA8zF4mF0+ddVuX7acUeK2V7bmrpjVOY72vmLz2IXFJSAXoY3D80nEzrn0GWajWK3Q==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    use-composed-ref "^1.0.0"
+    use-latest "^1.0.0"
+
 react@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
@@ -10771,6 +10780,11 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
+ts-essentials@^2.0.3:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-2.0.12.tgz#c9303f3d74f75fa7528c3d49b80e089ab09d8745"
+  integrity sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==
+
 ts-pnp@1.2.0, ts-pnp@^1.1.6:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
@@ -11028,6 +11042,25 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-composed-ref@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.1.0.tgz#9220e4e94a97b7b02d7d27eaeab0b37034438bbc"
+  integrity sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==
+  dependencies:
+    ts-essentials "^2.0.3"
+
+use-isomorphic-layout-effect@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz#7bb6589170cd2987a152042f9084f9effb75c225"
+  integrity sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==
+
+use-latest@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.0.tgz#a44f6572b8288e0972ec411bdd0840ada366f232"
+  integrity sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==
+  dependencies:
+    use-isomorphic-layout-effect "^1.0.0"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"