Skip to content

Commit a5853ac

Browse files
AceTheCreatorAceTheCreator
committed
structuring project folder and added code formatting
1 parent b58701d commit a5853ac

File tree

8 files changed

+11922
-201
lines changed

8 files changed

+11922
-201
lines changed

‎.editorconfig

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# http://editorconfig.org
2+
3+
# A special property that should be specified at the top of the file outside of
4+
# any sections. Set to true to stop .editor config file search on current file
5+
root = true
6+
7+
[*]
8+
# Indentation style
9+
# Possible values - tab, space
10+
indent_style = space
11+
12+
# Indentation size in single-spaced characters
13+
# Possible values - an integer, tab
14+
indent_size = 2
15+
16+
# Line ending file format
17+
# Possible values - lf, crlf, cr
18+
end_of_line = lf
19+
20+
# File character encoding
21+
# Possible values - latin1, utf-8, utf-16be, utf-16le
22+
charset = utf-8
23+
24+
# Denotes whether to trim whitespace at the end of lines
25+
# Possible values - true, false
26+
trim_trailing_whitespace = true
27+
28+
# Denotes whether file should end with a newline
29+
# Possible values - true, false
30+
insert_final_newline = true
31+
32+
[*.hbs]
33+
insert_final_newline = false
34+
35+
[*.ts]
36+
indent_size = 2
37+
38+
[{package}.json]
39+
indent_size = 2
40+
41+
[*.md]
42+
max_line_length = 0
43+
trim_trailing_whitespace = false
44+
45+
[*.yml]
46+
indent_size = 2
47+
48+
[Makefile]
49+
indent_style = tab

‎.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎.eslintrc.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
es6: true,
5+
node: true,
6+
jest: true,
7+
},
8+
extends: [
9+
"airbnb-base",
10+
"eslint:recommended",
11+
"plugin:jsx-a11y/recommended",
12+
"plugin:react-hooks/recommended",
13+
"plugin:react/recommended",
14+
"plugin:prettier/recommended",
15+
],
16+
plugins: ["prettier"],
17+
globals: {
18+
Atomics: "readonly",
19+
SharedArrayBuffer: "readonly",
20+
},
21+
22+
parserOptions: {
23+
ecmaVersion: 2018,
24+
sourceType: "module",
25+
},
26+
rules: {
27+
"no-param-reassign": ["error", { props: false }],
28+
"linebreak-style": 0,
29+
"prettier/prettier": "error",
30+
},
31+
settings: {
32+
react: {
33+
version: "detect",
34+
},
35+
},
36+
};

‎.prettierrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"prettier": {
3+
"printWidth": 90,
4+
"bracketSpacing": false,
5+
"trailingComma": "es5"
6+
}
7+
}

‎package.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"react-codemirror": "^1.0.0",
1212
"react-codemirror2": "^7.2.1",
1313
"react-dom": "^17.0.1",
14+
"react-router-dom": "^5.2.0",
1415
"react-scripts": "4.0.0",
1516
"remarkable": "^2.0.1",
1617
"remarkable-react": "^1.4.3",
@@ -39,5 +40,14 @@
3940
"last 1 firefox version",
4041
"last 1 safari version"
4142
]
43+
},
44+
"devDependencies": {
45+
"eslint-config-prettier": "^7.0.0",
46+
"eslint-plugin-import": "^2.22.1",
47+
"eslint-plugin-jsx-a11y": "^6.4.1",
48+
"eslint-plugin-prettier": "^3.2.0",
49+
"eslint-plugin-react": "^7.21.5",
50+
"eslint-plugin-react-hooks": "^4.2.0",
51+
"prettier": "^2.2.1"
4252
}
4353
}

‎src/Cell.js

Lines changed: 125 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,171 @@
1-
import React, {useRef, useEffect} from 'react'
1+
import React, { useRef, useEffect } from "react";
22
import CodeMirror from "react-codemirror";
3-
import { Remarkable } from 'remarkable';
3+
import { Remarkable } from "remarkable";
44

55
require("codemirror/lib/codemirror.css");
66
require("codemirror/mode/javascript/javascript");
77
require("codemirror/theme/dracula.css");
88

9-
export default function Cell({cell, dispatch, currentCell, setCurrentCell,cellId}) {
9+
export default function Cell({
10+
cell,
11+
dispatch,
12+
currentCell,
13+
setCurrentCell,
14+
cellId,
15+
}) {
1016
const refCode = useRef(null);
11-
const refOutput = useRef('');
17+
const refOutput = useRef("");
1218

13-
const getCode = ()=>{
14-
if(cell.type === "code"){
19+
const getCode = () => {
20+
if (cell.type === "code") {
1521
const input = refCode.current.getCodeMirror().getValue();
1622
try {
17-
const output = ("global",eval)(input) || ''
18-
const cellstate = {...cell, input: input, output:output}
19-
dispatch({type:"CHANGE_CELL", payload:cellstate});
20-
}catch(error){
21-
const cellstate = {...cell, input: input, output:error}
22-
dispatch({type:"CHANGE_CELL", payload:cellstate});
23+
// eslint-disable-next-line no-eval
24+
const output = ("global", eval)(input) || "";
25+
const cellstate = { ...cell, input, output };
26+
dispatch({ type: "CHANGE_CELL", payload: cellstate });
27+
} catch (error) {
28+
const cellstate = { ...cell, input, output: error };
29+
dispatch({ type: "CHANGE_CELL", payload: cellstate });
2330
}
24-
25-
26-
}else{
27-
const cellstate = {...cell, input: refCode.current.value}
31+
} else {
32+
const cellstate = { ...cell, input: refCode.current.value };
2833
showOutput();
29-
dispatch({type:"CHANGE_CELL", payload:cellstate});
34+
dispatch({ type: "CHANGE_CELL", payload: cellstate });
3035
}
31-
}
36+
};
3237

33-
const setId = ()=>{
34-
const id = currentCell? currentCell : parseInt(cell.id.split("_")[1]);
38+
const setId = () => {
39+
const id = currentCell || parseInt(cell.id.split("_")[1]);
3540
setCurrentCell(id);
36-
}
41+
};
3742

38-
useEffect(()=>{
39-
if(cell.type ==="text"){
43+
useEffect(() => {
44+
if (cell.type === "text") {
4045
refCode.current.value = cell.input;
4146
const md = new Remarkable();
4247
refOutput.current.innerHTML = md.render(cell.input);
43-
refCode.current.style.display = cell.input ? "none": "block";
44-
}else
45-
{
48+
refCode.current.style.display = cell.input ? "none" : "block";
49+
} else {
4650
refCode.current.getCodeMirror().setValue(cell.input);
4751
refOutput.current.innerHTML = cell.output;
4852
}
4953
setId();
50-
},[cell])
51-
52-
const upCell = (type)=>{
54+
// eslint-disable-next-line react-hooks/exhaustive-deps
55+
}, [cell]);
5356

54-
const id = cellId -1;
55-
newCell(id,type);
56-
}
57+
const upCell = (type) => {
58+
const id = cellId - 1;
59+
newCell(id, type);
60+
};
5761

58-
const downCell = (type)=>{
62+
const downCell = (type) => {
5963
const id = cellId;
60-
newCell(id,type);
61-
62-
}
63-
64-
const newCell = (id, type)=>{
64+
newCell(id, type);
65+
};
6566

67+
const newCell = (id, type) => {
6668
const newCell = {
67-
id: "cell_"+(currentCell+1),
69+
id: `cell_${currentCell + 1}`,
6870
input: "",
69-
}
71+
};
7072

71-
if(type === "text"){
72-
newCell["type"] = "text"
73-
}else{
74-
newCell["output"] = ""
75-
newCell["type"] = "code"
73+
if (type === "text") {
74+
newCell.type = "text";
75+
} else {
76+
newCell.output = "";
77+
newCell.type = "code";
7678
}
77-
setCurrentCell(currentCell+1);
78-
dispatch({type:"ADD_CELL", payload:newCell, currentId: id});
79-
}
79+
setCurrentCell(currentCell + 1);
80+
dispatch({ type: "ADD_CELL", payload: newCell, currentId: id });
81+
};
8082

81-
const disableOutput = ()=>{
82-
if(cell.type === "text"){
83+
const disableOutput = () => {
84+
if (cell.type === "text") {
8385
refOutput.current.style.display = "none";
8486
refCode.current.style.display = "block";
8587
}
86-
}
88+
};
8789

88-
const showOutput = ()=>{
89-
if(cell.type === "text"){
90+
const showOutput = () => {
91+
if (cell.type === "text") {
9092
refOutput.current.style.display = "block";
9193
refCode.current.style.display = "none";
9294
}
93-
}
95+
};
9496

95-
const deleteCell = ()=>{
96-
dispatch({type:"DELETE_CELL",payload:cell.id});
97-
}
97+
const deleteCell = () => {
98+
dispatch({ type: "DELETE_CELL", payload: cell.id });
99+
};
98100

99101
return (
100102
<>
101-
<button onClick={()=>{getCode()}}>Run</button>
102-
<button onClick={()=>{upCell("code")}}>Up cell</button>
103-
<button onClick={()=>{downCell("code")}}>down cell</button>
104-
<button onClick={()=>{upCell("text")}}>Text up</button>
105-
<button onClick={()=>{downCell("text")}}>Text down</button>
106-
<button onClick={()=>{deleteCell()}}>Delete Cell</button>
107-
{cell.type === "code" ? <CodeMirror value={cell.input} ref={refCode}
108-
options={{
109-
tabSize: 2,
110-
theme: "dracula",
111-
lineNumbers: true,
112-
mode: "javascript"
103+
<button
104+
onClick={() => {
105+
getCode();
106+
}}
107+
>
108+
Run
109+
</button>
110+
<button
111+
onClick={() => {
112+
upCell("code");
113+
}}
114+
>
115+
Up cell
116+
</button>
117+
<button
118+
onClick={() => {
119+
downCell("code");
120+
}}
121+
>
122+
down cell
123+
</button>
124+
<button
125+
onClick={() => {
126+
upCell("text");
113127
}}
114-
/> : <TextCell refText={refCode}/>}
115-
<div ref={refOutput} onClick={()=>{disableOutput()}}></div>
116-
</>
117-
)
128+
>
129+
Text up
130+
</button>
131+
<button
132+
onClick={() => {
133+
downCell("text");
134+
}}
135+
>
136+
Text down
137+
</button>
138+
<button
139+
onClick={() => {
140+
deleteCell();
141+
}}
142+
>
143+
Delete Cell
144+
</button>
145+
{cell.type === "code" ? (
146+
<CodeMirror
147+
value={cell.input}
148+
ref={refCode}
149+
options={{
150+
tabSize: 2,
151+
theme: "dracula",
152+
lineNumbers: true,
153+
mode: "javascript",
154+
}}
155+
/>
156+
) : (
157+
<TextCell refText={refCode} />
158+
)}
159+
<div
160+
ref={refOutput}
161+
onClick={() => {
162+
disableOutput();
163+
}}
164+
></div>
165+
</>
166+
);
118167
}
119168

120-
function TextCell({refText}){
121-
122-
return (
123-
<textarea ref={refText}></textarea>
124-
)
125-
}
169+
function TextCell({ refText }) {
170+
return <textarea ref={refText}></textarea>;
171+
}

0 commit comments

Comments
 (0)