Skip to content

Commit 38a67aa

Browse files
AceTheCreatorAceTheCreator
committed
refactor: 🎨 improved code
1 parent 6f5c5ab commit 38a67aa

7 files changed

Lines changed: 115 additions & 54 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"react-icons": "^4.1.0",
1515
"react-router-dom": "^5.2.0",
1616
"react-scripts": "4.0.0",
17+
"react-textarea-autosize": "^8.3.2",
1718
"remarkable": "^2.0.1",
1819
"remarkable-react": "^1.4.3",
1920
"styled-components": "^5.2.1",

‎src/Cell.js‎

Lines changed: 42 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,21 @@
55
import React, { useRef, useEffect, useState } from "react";
66
// eslint-disable-next-line import/no-extraneous-dependencies
77
import PropTypes from "prop-types";
8+
import TextareaAutosize from "react-textarea-autosize";
89
import CodeMirror from "react-codemirror";
910
import { Remarkable } from "remarkable";
1011
import { CgMathPlus, CgArrowUp, CgArrowDown, CgTrash } from "react-icons/cg";
1112
import { BsFillCaretRightFill } from "react-icons/bs";
12-
import { print_val, table } from "./utils";
13+
import { print_val } from "./utils";
1314
import {
1415
AddCellButton,
1516
CellButton,
1617
CellHead,
1718
OtherCellButtonWrapper,
18-
CellTextArea,
1919
Output,
20+
CellContainer,
21+
RunContainer,
22+
CellBodyContainer,
2023
} from "./Cell.style";
2124

2225
require("codemirror/lib/codemirror.css");
@@ -34,6 +37,7 @@ export default function Cell({
3437
const refOutput = useRef("");
3538
const [showMoreCellButton, setShowMoreCellButton] = useState("none");
3639
useEffect(() => {
40+
console.log(currentCell);
3741
if (currentCell === cellId) {
3842
setShowMoreCellButton("flex");
3943
} else {
@@ -44,9 +48,10 @@ export default function Cell({
4448
if (cell.type === "code") {
4549
const input = refCode.current.getCodeMirror().getValue();
4650
// eslint-disable-next-line no-eval
47-
let output = ("global", eval)(input);
51+
let output = ("global", eval)(input) || "";
4852
try {
4953
if (Array.isArray(output)) {
54+
console.log("output");
5055
output = print_val(output);
5156
} else if (typeof output === "object" && output !== null) {
5257
output = JSON.stringify(output);
@@ -57,28 +62,28 @@ export default function Cell({
5762
// retreive value from the console function
5863
console.oldLog = console.log;
5964
console.log = function (value) {
60-
output = value;
6165
return value;
6266
};
6367
// eslint-disable-next-line no-eval
6468
output = eval(input);
6569
if (Array.isArray(output)) {
70+
console.log("output");
6671
output = print_val(output);
6772
} else if (typeof output === "object" && output !== null) {
6873
output = JSON.stringify(output);
6974
if (output === "{}") {
7075
output = "";
7176
}
7277
}
73-
console.log(output);
74-
}
75-
if (
76-
input.includes("table") ||
77-
input.includes("plot") ||
78-
input.includes("console.log(")
79-
) {
80-
output = table(output);
78+
console.log(output, "helllo");
8179
}
80+
// if (
81+
// input.includes("table") ||
82+
// input.includes("plot") ||
83+
// input.includes("console.log(")
84+
// ) {
85+
// output = table(output);
86+
// }
8287
// eslint-disable-next-line no-eval
8388
const cellstate = { ...cell, input, output };
8489
dispatch({ type: "CHANGE_CELL", payload: cellstate });
@@ -153,6 +158,8 @@ export default function Cell({
153158
const showOutput = () => {
154159
if (cell.type === "text") {
155160
refOutput.current.style.display = "block";
161+
refOutput.current.style.background = "white";
162+
refOutput.current.style.color = "black";
156163
refCode.current.style.display = "none";
157164
}
158165
};
@@ -162,32 +169,21 @@ export default function Cell({
162169
};
163170
return (
164171
<>
165-
<div
166-
style={{
167-
display: "flex",
168-
alignItems: "center",
169-
justifyContent: "space-between",
170-
marginTop: "20px",
171-
}}
172-
>
173-
<div style={{ marginTop: "30px" }}>
172+
<CellContainer>
173+
<RunContainer>
174174
{currentCell === cellId ? (
175-
<button
176-
style={{
177-
background: "none",
178-
border: "none",
179-
}}
175+
<div
180176
onClick={() => {
181177
getCode();
182178
}}
183179
>
184180
<BsFillCaretRightFill color="#FFDF28" fontSize="30px" />
185-
</button>
181+
</div>
186182
) : (
187183
<div>[{cellId}]:</div>
188184
)}
189-
</div>
190-
<div style={{ width: "95%" }}>
185+
</RunContainer>
186+
<CellBodyContainer>
191187
<CellHead>
192188
<div
193189
style={{
@@ -267,18 +263,25 @@ export default function Cell({
267263
value={cell.input}
268264
ref={refCode}
269265
options={{
270-
tabSize: 1,
271-
theme: "yeti",
272-
lineNumbers: true,
273266
mode: "javascript",
267+
extraKeys: { "Ctrl-Space": "autocomplete" },
268+
autoCloseBrackets: true,
269+
matchBrackets: true,
270+
lineNumbers: true,
271+
tabSize: 4,
272+
theme: "yeti",
273+
autocorrect: true,
274274
}}
275275
/>
276276
) : (
277-
<TextCell refText={refCode} />
277+
<TextCell
278+
selectCell={() => setCurrentCell(cellId)}
279+
refText={refCode}
280+
/>
278281
)}
279282
</div>
280-
</div>
281-
</div>
283+
</CellBodyContainer>
284+
</CellContainer>
282285
<div
283286
style={{
284287
display: "flex",
@@ -296,8 +299,10 @@ export default function Cell({
296299
);
297300
}
298301

299-
function TextCell({ refText }) {
300-
return <CellTextArea ref={refText}></CellTextArea>;
302+
function TextCell({ refText, selectCell }) {
303+
return (
304+
<TextareaAutosize onFocus={selectCell} ref={refText}></TextareaAutosize>
305+
);
301306
}
302307

303308
TextCell.propTypes = {

‎src/Cell.style.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,23 @@
11
/* eslint-disable import/prefer-default-export */
22
import styled from "styled-components";
33

4+
export const CellContainer = styled.div`
5+
display: flex;
6+
align-items: center;
7+
justify-content: flex-start;
8+
margin-top: 20px;
9+
width: 100%;
10+
`;
11+
12+
export const RunContainer = styled.div`
13+
width: 5%;
14+
cursor: pointer;
15+
`;
16+
17+
export const CellBodyContainer = styled.div`
18+
width: 100%;
19+
`;
20+
421
export const AddCellButton = styled.button`
522
background: transparent;
623
border: 1px solid rgb(179, 179, 179);
@@ -20,11 +37,8 @@ export const CellHead = styled.div`
2037
`;
2138

2239
export const OtherCellButtonWrapper = styled.div`
23-
position: absolute;
24-
z-index: 99 !important;
2540
display: flex;
2641
align-items: flex-end;
27-
left: 89%;
2842
margin-top: 37px;
2943
display: ${(props) => props.display};
3044
`;

‎src/components/NavBar/navbar.style.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22
import styled from "styled-components";
33

44
export const NavBg = styled.div`
5-
display: flex;
6-
align-items: center;
7-
justify-content: center;
85
background: #2e2e2e;
96
width: initial;
107
box-shadow: 0px 2px 1px #ffdf28;
@@ -15,7 +12,7 @@ export const NavBg = styled.div`
1512
`;
1613

1714
export const NavWrapper = styled.div`
18-
width: 100%;
15+
margin: 0px auto;
1916
max-width: 1400px;
2017
display: flex;
2118
align-items: center;

‎src/components/header/header.style.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,30 @@ export const NoteEditContainer = styled.div`
1515
`;
1616

1717
export const NoteTitle = styled.input`
18-
background: transparent;
18+
background: #fafafa;
19+
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
20+
border-radius: 3px;
1921
text-align: center;
2022
font-size: 16px;
2123
border: none;
2224
border-radius: 5px;
23-
height: 40px;
24-
box-shadow: 0px 1px 1px 1px rgb(231, 231, 231);
25-
width: 150px;
25+
width: 160px;
26+
height: 47px;
2627
`;
2728

2829
export const DownloadNoteBook = styled.button`
2930
display: flex;
3031
align-items: center;
31-
justify-content: space-between;
32-
box-shadow: 0px 1px 1px 1px rgb(231, 231, 231);
33-
min-width: 100px;
34-
font-size: 14px;
35-
height: 40px;
32+
justify-content: center;
3633
background: #ffdf28;
37-
border: none;
34+
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
3835
border-radius: 3px;
36+
font-size: 15px;
37+
border: none;
3938
cursor: pointer;
4039
margin-right: 20px;
40+
width: 185px;
41+
height: 47px;
4142
`;
4243

4344
export const AddNoteInput = styled.input`

‎src/index.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,14 @@ code {
1515
.CodeMirror{
1616
min-height: 50px !important;
1717
height: auto !important;
18+
}
19+
textarea{
20+
width: 100%;
21+
min-height: 7vh;
22+
border: 1px solid #e5e1db;
23+
border-radius: 5px;
24+
resize: none;
25+
}
26+
textarea:focus{
27+
outline: none;
1828
}

‎yarn.lock‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9242,6 +9242,15 @@ react-scripts@4.0.0:
92429242
optionalDependencies:
92439243
fsevents "^2.1.3"
92449244

9245+
react-textarea-autosize@^8.3.2:
9246+
version "8.3.2"
9247+
resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.2.tgz#4f9374d357b0a6f6469956726722549124a1b2db"
9248+
integrity sha512-JrMWVgQSaExQByP3ggI1eA8zF4mF0+ddVuX7acUeK2V7bmrpjVOY72vmLz2IXFJSAXoY3D80nEzrn0GWajWK3Q==
9249+
dependencies:
9250+
"@babel/runtime" "^7.10.2"
9251+
use-composed-ref "^1.0.0"
9252+
use-latest "^1.0.0"
9253+
92459254
react@^17.0.1:
92469255
version "17.0.1"
92479256
resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
@@ -10771,6 +10780,11 @@ tryer@^1.0.1:
1077110780
resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
1077210781
integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
1077310782

10783+
ts-essentials@^2.0.3:
10784+
version "2.0.12"
10785+
resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-2.0.12.tgz#c9303f3d74f75fa7528c3d49b80e089ab09d8745"
10786+
integrity sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==
10787+
1077410788
ts-pnp@1.2.0, ts-pnp@^1.1.6:
1077510789
version "1.2.0"
1077610790
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
@@ -11028,6 +11042,25 @@ url@^0.11.0:
1102811042
punycode "1.3.2"
1102911043
querystring "0.2.0"
1103011044

11045+
use-composed-ref@^1.0.0:
11046+
version "1.1.0"
11047+
resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.1.0.tgz#9220e4e94a97b7b02d7d27eaeab0b37034438bbc"
11048+
integrity sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==
11049+
dependencies:
11050+
ts-essentials "^2.0.3"
11051+
11052+
use-isomorphic-layout-effect@^1.0.0:
11053+
version "1.1.1"
11054+
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz#7bb6589170cd2987a152042f9084f9effb75c225"
11055+
integrity sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==
11056+
11057+
use-latest@^1.0.0:
11058+
version "1.2.0"
11059+
resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.0.tgz#a44f6572b8288e0972ec411bdd0840ada366f232"
11060+
integrity sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==
11061+
dependencies:
11062+
use-isomorphic-layout-effect "^1.0.0"
11063+
1103111064
use@^3.1.0:
1103211065
version "3.1.1"
1103311066
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

0 commit comments

Comments
 (0)