Skip to content

Commit d04b59c

Browse files
AceTheCreatorAceTheCreator
committed
completed project folder structuring
1 parent a5853ac commit d04b59c

File tree

9 files changed

+180
-67
lines changed

9 files changed

+180
-67
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ module.exports = {
2525
},
2626
rules: {
2727
"no-param-reassign": ["error", { props: false }],
28+
camelcase: "off",
2829
"linebreak-style": 0,
2930
"prettier/prettier": "error",
3031
},

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,16 @@
1515
"react-scripts": "4.0.0",
1616
"remarkable": "^2.0.1",
1717
"remarkable-react": "^1.4.3",
18+
"styled-components": "^5.2.1",
1819
"web-vitals": "^0.2.4"
1920
},
2021
"scripts": {
2122
"start": "react-scripts start",
2223
"build": "react-scripts build",
2324
"test": "react-scripts test",
24-
"eject": "react-scripts eject"
25+
"eject": "react-scripts eject",
26+
"lint": "eslint .",
27+
"lint:fix": "eslint . --fix"
2528
},
2629
"eslintConfig": {
2730
"extends": [

‎src/App.js‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,50 @@
1+
/* eslint-disable camelcase */
12
// import './App.css';
2-
import React, {useState,useReducer} from 'react';
3+
import React, { useState, useReducer } from "react";
34
import Cell from "./Cell";
4-
import {reducer} from "./reducer";
5-
import {makeGlobal, downLoad_notebook, load_notebook} from "./utils"
5+
import { reducer } from "./reducer";
6+
import { makeGlobal, downLoad_notebook, load_notebook } from "./utils";
7+
import Layout from "./components/layout/layout";
68

79
const defaultState = {
8-
cells: [{id:"cell_1",input:"",output:"",type:"code"}]
9-
}
10+
cells: [{ id: "cell_1", input: "", output: "", type: "code" }],
11+
};
1012
function App() {
11-
1213
const [state, dispatch] = useReducer(reducer, defaultState);
13-
const [currentCell, setCurrentCell] = useState(null)
14+
const [currentCell, setCurrentCell] = useState(null);
1415

1516
makeGlobal();
1617

1718
return (
18-
<>
19-
<button onClick={()=>{ downLoad_notebook(state)}}>Download Notebook</button>
20-
<input type="file" id="import-notebook-file" onChange={()=>{load_notebook(dispatch)}}></input><br />
21-
{state.cells.map((cell,index)=>{
22-
return <Cell key={cell.id} cell={cell} dispatch={dispatch} currentCell={currentCell}
23-
setCurrentCell={setCurrentCell} cellId={index+1}/>
24-
})}
25-
</>
19+
<Layout>
20+
<button
21+
onClick={() => {
22+
downLoad_notebook(state);
23+
}}
24+
>
25+
Download Notebook
26+
</button>
27+
<input
28+
type="file"
29+
id="import-notebook-file"
30+
onChange={() => {
31+
load_notebook(dispatch);
32+
}}
33+
></input>
34+
<br />
35+
{state.cells.map((cell, index) => {
36+
return (
37+
<Cell
38+
key={cell.id}
39+
cell={cell}
40+
dispatch={dispatch}
41+
currentCell={currentCell}
42+
setCurrentCell={setCurrentCell}
43+
cellId={index + 1}
44+
/>
45+
);
46+
})}
47+
</Layout>
2648
);
2749
}
2850

‎src/App.test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { render, screen } from '@testing-library/react';
2-
import App from './App';
1+
import { render, screen } from "@testing-library/react";
2+
import App from "./App";
33

4-
test('renders learn react link', () => {
4+
test("renders learn react link", () => {
55
render(<App />);
66
const linkElement = screen.getByText(/learn react/i);
77
expect(linkElement).toBeInTheDocument();

‎src/components/layout/layout.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import React from "react";
3+
import { Layout } from "./layout.style";
4+
5+
export default function layout(props) {
6+
return <Layout>{props.children}</Layout>;
7+
}

‎src/components/layout/layout.style.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/* eslint-disable import/prefer-default-export */
2+
import styled from "styled-components";
3+
4+
export const Layout = styled.div`
5+
margin: 0 auto;
6+
max-width: 1500px;
7+
padding: 0px;
8+
`;

‎src/index.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import "./index.css";
4+
import App from "./App";
55

66
ReactDOM.render(
77
<React.StrictMode>
88
<App />
99
</React.StrictMode>,
10-
document.getElementById('root')
10+
document.getElementById("root")
1111
);
12-

‎src/reducer.js‎

Lines changed: 34 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,40 @@
1-
export const reducer = (state, action)=>{
2-
3-
if(action.type === "CHANGE_CELL"){
4-
const stateCells = state.cells.map((cell)=>{
5-
if(cell.id === action.payload.id){
6-
return action.payload;
7-
}
8-
return cell;
9-
})
10-
return {
11-
...state,
12-
cells : stateCells
13-
}
14-
}
15-
16-
if(action.type === "ADD_CELL"){
17-
const newCell = [...state.cells]
18-
newCell.splice(action.currentId,0,action.payload);
19-
console.log(newCell);
20-
return {
21-
...state,
22-
cells: newCell
1+
export const reducer = (state, action) => {
2+
if (action.type === "CHANGE_CELL") {
3+
const stateCells = state.cells.map((cell) => {
4+
if (cell.id === action.payload.id) {
5+
return action.payload;
236
}
24-
}
7+
return cell;
8+
});
9+
return {
10+
...state,
11+
cells: stateCells,
12+
};
13+
}
2514

26-
if(action.type === "DELETE_CELL"){
27-
if(state.cells.length >1){
28-
const newCell = state.cells.filter((cell)=>{
29-
return cell.id !== action.payload
30-
});
15+
if (action.type === "ADD_CELL") {
16+
const newCell = [...state.cells];
17+
newCell.splice(action.currentId, 0, action.payload);
18+
console.log(newCell);
19+
return {
20+
...state,
21+
cells: newCell,
22+
};
23+
}
3124

32-
return {...state, cells: newCell};
33-
}else{
34-
return {...state};
35-
}
36-
37-
}
25+
if (action.type === "DELETE_CELL") {
26+
if (state.cells.length > 1) {
27+
const newCell = state.cells.filter((cell) => {
28+
return cell.id !== action.payload;
29+
});
3830

39-
if(action.type === "LOAD_NOTE"){
40-
console.log("action payload", action.payload);
41-
return {...state, cells: action.payload }
31+
return { ...state, cells: newCell };
4232
}
33+
return { ...state };
34+
}
4335

44-
}
36+
if (action.type === "LOAD_NOTE") {
37+
console.log("action payload", action.payload);
38+
return { ...state, cells: action.payload };
39+
}
40+
};

‎yarn.lock‎

Lines changed: 81 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
jsesc "^2.5.1"
6767
source-map "^0.5.0"
6868

69-
"@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.10":
69+
"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.10":
7070
version "7.12.10"
7171
resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz#54ab9b000e60a93644ce17b3f37d313aaf1d115d"
7272
integrity sha512-XplmVbC1n+KY6jL8/fgLVXXUauDIB+lD5+GsQEh6F6GBF1dq1qy4DP4yXWzDKcoqXB3X58t61e85Fitoww4JVQ==
@@ -1098,7 +1098,7 @@
10981098
"@babel/parser" "^7.12.7"
10991099
"@babel/types" "^7.12.7"
11001100

1101-
"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.10", "@babel/traverse@^7.12.5", "@babel/traverse@^7.7.0":
1101+
"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.10", "@babel/traverse@^7.12.5", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0":
11021102
version "7.12.10"
11031103
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.10.tgz#2d1f4041e8bf42ea099e5b2dc48d6a594c00017a"
11041104
integrity sha512-6aEtf0IeRgbYWzta29lePeYSk+YAFIC3kyqESeft8o5CkFlYIMX+EQDDWEiAQ9LHOA3d0oHdgrSsID/CKqXJlg==
@@ -1145,6 +1145,28 @@
11451145
resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
11461146
integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
11471147

1148+
"@emotion/is-prop-valid@^0.8.8":
1149+
version "0.8.8"
1150+
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
1151+
integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
1152+
dependencies:
1153+
"@emotion/memoize" "0.7.4"
1154+
1155+
"@emotion/memoize@0.7.4":
1156+
version "0.7.4"
1157+
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
1158+
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
1159+
1160+
"@emotion/stylis@^0.8.4":
1161+
version "0.8.5"
1162+
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
1163+
integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
1164+
1165+
"@emotion/unitless@^0.7.4":
1166+
version "0.7.5"
1167+
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
1168+
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
1169+
11481170
"@eslint/eslintrc@^0.2.2":
11491171
version "0.2.2"
11501172
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.2.2.tgz#d01fc791e2fc33e88a29d6f3dc7e93d0cd784b76"
@@ -2564,6 +2586,21 @@ babel-plugin-named-asset-import@^0.3.7:
25642586
resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz#156cd55d3f1228a5765774340937afc8398067dd"
25652587
integrity sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw==
25662588

2589+
"babel-plugin-styled-components@>= 1":
2590+
version "1.12.0"
2591+
resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz#1dec1676512177de6b827211e9eda5a30db4f9b9"
2592+
integrity sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==
2593+
dependencies:
2594+
"@babel/helper-annotate-as-pure" "^7.0.0"
2595+
"@babel/helper-module-imports" "^7.0.0"
2596+
babel-plugin-syntax-jsx "^6.18.0"
2597+
lodash "^4.17.11"
2598+
2599+
babel-plugin-syntax-jsx@^6.18.0:
2600+
version "6.18.0"
2601+
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
2602+
integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
2603+
25672604
babel-plugin-syntax-object-rest-spread@^6.8.0:
25682605
version "6.13.0"
25692606
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -3040,6 +3077,11 @@ camelcase@^6.0.0, camelcase@^6.1.0, camelcase@^6.2.0:
30403077
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
30413078
integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
30423079

3080+
camelize@^1.0.0:
3081+
version "1.0.0"
3082+
resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
3083+
integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
3084+
30433085
caniuse-api@^3.0.0:
30443086
version "3.0.0"
30453087
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -3605,6 +3647,11 @@ css-blank-pseudo@^0.1.4:
36053647
dependencies:
36063648
postcss "^7.0.5"
36073649

3650+
css-color-keywords@^1.0.0:
3651+
version "1.0.0"
3652+
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
3653+
integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
3654+
36083655
css-color-names@0.0.4, css-color-names@^0.0.4:
36093656
version "0.0.4"
36103657
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -3676,6 +3723,15 @@ css-select@^2.0.0:
36763723
domutils "^1.7.0"
36773724
nth-check "^1.0.2"
36783725

3726+
css-to-react-native@^3.0.0:
3727+
version "3.0.0"
3728+
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
3729+
integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
3730+
dependencies:
3731+
camelize "^1.0.0"
3732+
css-color-keywords "^1.0.0"
3733+
postcss-value-parser "^4.0.2"
3734+
36793735
css-tree@1.0.0-alpha.37:
36803736
version "1.0.0-alpha.37"
36813737
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -5452,7 +5508,7 @@ hmac-drbg@^1.0.0:
54525508
minimalistic-assert "^1.0.0"
54535509
minimalistic-crypto-utils "^1.0.1"
54545510

5455-
hoist-non-react-statics@^3.1.0:
5511+
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0:
54565512
version "3.3.2"
54575513
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
54585514
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -9867,6 +9923,11 @@ shallow-clone@^3.0.0:
98679923
dependencies:
98689924
kind-of "^6.0.2"
98699925

9926+
shallowequal@^1.1.0:
9927+
version "1.1.0"
9928+
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
9929+
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
9930+
98709931
shebang-command@^1.2.0:
98719932
version "1.2.0"
98729933
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -10369,6 +10430,22 @@ style-loader@1.3.0:
1036910430
loader-utils "^2.0.0"
1037010431
schema-utils "^2.7.0"
1037110432

10433+
styled-components@^5.2.1:
10434+
version "5.2.1"
10435+
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a"
10436+
integrity sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==
10437+
dependencies:
10438+
"@babel/helper-module-imports" "^7.0.0"
10439+
"@babel/traverse" "^7.4.5"
10440+
"@emotion/is-prop-valid" "^0.8.8"
10441+
"@emotion/stylis" "^0.8.4"
10442+
"@emotion/unitless" "^0.7.4"
10443+
babel-plugin-styled-components ">= 1"
10444+
css-to-react-native "^3.0.0"
10445+
hoist-non-react-statics "^3.0.0"
10446+
shallowequal "^1.1.0"
10447+
supports-color "^5.5.0"
10448+
1037210449
stylehacks@^4.0.0:
1037310450
version "4.0.3"
1037410451
resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -10378,7 +10455,7 @@ stylehacks@^4.0.0:
1037810455
postcss "^7.0.0"
1037910456
postcss-selector-parser "^3.0.0"
1038010457

10381-
supports-color@^5.3.0:
10458+
supports-color@^5.3.0, supports-color@^5.5.0:
1038210459
version "5.5.0"
1038310460
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
1038410461
integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==

0 commit comments

Comments
 (0)