Skip to content

Commit b2f6f0f

Browse files
carlyjacksoncarlyjackson
committed
final changes to eslint files
1 parent bc6adeb commit b2f6f0f

File tree

6 files changed

+173
-183
lines changed

6 files changed

+173
-183
lines changed

‎.eslintrc.json

Lines changed: 14 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,22 @@
11
{
2-
"root": true,
3-
"ignorePatterns": ["**/test", "**/__tests__", "**/node_modules"],
4-
"env": {
5-
"node": true,
6-
"browser": true,
7-
"es2021": true
8-
},
9-
"plugins": ["react", "@typescript-eslint"],
10-
"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "airbnb", "airbnb/hooks", "plugin:import/typescript"],
2+
"extends": ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "airbnb-base"],
113
"parserOptions": {
12-
"sourceType": "module",
134
"ecmaFeatures": {
145
"jsx": true
15-
}
6+
},
7+
"ecmaVersion": 2018,
8+
"sourceType": "module"
169
},
17-
"rules": {
18-
"indent": ["warn", 2],
19-
"no-unused-vars": ["off", { "vars": "local" }],
20-
"no-case-declarations": "off",
21-
"prefer-const": "error",
22-
"quotes": ["warn", "single"],
23-
"react/prop-types": "off",
24-
"semi": ["warn", "always"],
25-
"linebreak-style": 0,
26-
"padded-blocks": 0,
27-
"no-trailing-spaces": 0
10+
"plugins": ["import", "react", "jest", "jsx-a11y", "babel"],
11+
"parser": "babel-eslint",
12+
"env": {
13+
"browser": true,
14+
"node": true,
15+
"es6": true,
16+
"jest": true
2817
},
29-
"settings": {
30-
"react": { "version": "detect"}
18+
"rules": {
19+
"class-methods-use-this": "off",
20+
"linebreak-style": 0
3121
}
3222
}

‎app/src/components/StateManagement/DisplayTab/DataTable.tsx

Lines changed: 67 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React, {useContext} from 'react';
2-
import StateContext from "../../../context/context";
1+
import React, { useContext } from 'react';
32
import Table from '@mui/material/Table';
43
import TableBody from '@mui/material/TableBody';
54
import TableContainer from '@mui/material/TableContainer';
@@ -8,100 +7,103 @@ import TableRow from '@mui/material/TableRow';
87
import Paper from '@mui/material/Paper';
98
import { styled } from '@mui/material/styles';
109
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
10+
import StateContext from '../../../context/context';
1111

1212
const StyledTableCell = styled(TableCell)(({ theme }) => ({
1313
[`&.${tableCellClasses.head}`]: {
1414
backgroundColor: theme.palette.common.black,
15-
color: theme.palette.common.white
15+
color: theme.palette.common.white,
1616
},
1717
[`&.${tableCellClasses.body}`]: {
18-
fontSize: 14
19-
}
18+
fontSize: 14,
19+
},
2020
}));
2121

2222
const StyledTableRow = styled(TableRow)(({ theme }) => ({
2323
'&:nth-of-type(odd)': {
24-
backgroundColor: theme.palette.action.hover
24+
backgroundColor: theme.palette.action.hover,
2525
},
2626
// hide last border
2727
'&:last-child td, &:last-child th': {
28-
border: 0
29-
}
28+
border: 0,
29+
},
3030
}));
3131

3232
export default function DataTable(props) {
33-
const { currComponentState, parentProps, clickedComp, data } = props;
33+
const {
34+
currComponentState, parentProps, clickedComp, data,
35+
} = props;
3436
const [state, dispatch] = useContext(StateContext);
3537

36-
//determine if the current component is a root component
38+
// determine if the current component is a root component
3739
let isRoot = false;
3840

3941
for (let i = 0; i < data.length; i++) {
40-
if (data[i]['name'] === clickedComp) {
41-
if (state.rootComponents.includes(data[i]['id'])) isRoot = true;
42+
if (data[i].name === clickedComp) {
43+
if (state.rootComponents.includes(data[i].id)) isRoot = true;
4244
}
4345
}
44-
46+
4547
return (
46-
<>
47-
<TableContainer component={Paper} sx={{ maxHeight: '350px' }}>
48-
<Table
49-
sx={{ width: '510px' }}
50-
aria-label="customized table"
51-
stickyHeader
52-
>
53-
54-
{/* we are checking if the clicked component is a root component-- if yes, it doesn't have any parents so don't need passed-in props table*/}
55-
{(!isRoot &&
56-
<>
57-
<TableHead>
58-
<TableRow>
59-
<StyledTableCell align="center" colSpan={3}>
60-
{ 'Props Passed in from Parent:'}
61-
</StyledTableCell>
62-
</TableRow>
63-
</TableHead>
64-
<TableBody>
48+
<TableContainer component={Paper} sx={{ maxHeight: '350px' }}>
49+
<Table
50+
sx={{ width: '510px' }}
51+
aria-label="customized table"
52+
stickyHeader
53+
>
54+
55+
{/* we are checking if the clicked component is a root component-- if yes, it doesn't have any parents so don't need passed-in props table */}
56+
{(!isRoot
57+
&& (
58+
<>
59+
<TableHead>
60+
<TableRow>
61+
<StyledTableCell align="center" colSpan={3}>
62+
Props Passed in from Parent:
63+
</StyledTableCell>
64+
</TableRow>
65+
</TableHead>
66+
<TableBody>
67+
<StyledTableRow>
68+
<StyledTableCell component="th" scope="row"><b>Key</b></StyledTableCell>
69+
<StyledTableCell align="right"><b>Type</b></StyledTableCell>
70+
<StyledTableCell align="right"><b>Initial Value</b></StyledTableCell>
71+
</StyledTableRow>
72+
{parentProps ? parentProps.map((data, index) => (
73+
<StyledTableRow key={index}>
74+
<StyledTableCell component="th" scope="row">{data.key}</StyledTableCell>
75+
<StyledTableCell align="right">{data.type}</StyledTableCell>
76+
<StyledTableCell align="right">{data.value}</StyledTableCell>
77+
</StyledTableRow>
78+
)) : ''}
79+
</TableBody>
80+
</>
81+
)
82+
)}
83+
84+
{/* The below table will contain the state initialized within the clicked component */}
85+
<TableHead>
86+
<TableRow>
87+
<StyledTableCell align="center" colSpan={3}>
88+
State Initialized in Current Component:
89+
</StyledTableCell>
90+
</TableRow>
91+
</TableHead>
92+
<TableBody>
6593
<StyledTableRow>
66-
<StyledTableCell component="th" scope="row" ><b>Key</b></StyledTableCell>
67-
<StyledTableCell align="right"><b>Type</b></StyledTableCell>
68-
<StyledTableCell align="right"><b>Initial Value</b></StyledTableCell>
94+
<StyledTableCell component="th" scope="row"><b>Key</b></StyledTableCell>
95+
<StyledTableCell align="right"><b>Type</b></StyledTableCell>
96+
<StyledTableCell align="right"><b>Initial Value</b></StyledTableCell>
6997
</StyledTableRow>
70-
{parentProps ? parentProps.map((data, index) => (
98+
{currComponentState ? currComponentState.map((data, index) => (
7199
<StyledTableRow key={index}>
72100
<StyledTableCell component="th" scope="row">{data.key}</StyledTableCell>
73101
<StyledTableCell align="right">{data.type}</StyledTableCell>
74102
<StyledTableCell align="right">{data.value}</StyledTableCell>
75103
</StyledTableRow>
76-
)): ''}
104+
)) : ''}
77105
</TableBody>
78-
</>
79-
)}
80-
81-
{/* The below table will contain the state initialized within the clicked component */}
82-
<TableHead>
83-
<TableRow>
84-
<StyledTableCell align="center" colSpan={3}>
85-
{'State Initialized in Current Component:'}
86-
</StyledTableCell>
87-
</TableRow>
88-
</TableHead>
89-
<TableBody>
90-
<StyledTableRow>
91-
<StyledTableCell component="th" scope="row" ><b>Key</b></StyledTableCell>
92-
<StyledTableCell align="right"><b>Type</b></StyledTableCell>
93-
<StyledTableCell align="right"><b>Initial Value</b></StyledTableCell>
94-
</StyledTableRow>
95-
{currComponentState ? currComponentState.map((data, index) => (
96-
<StyledTableRow key={index}>
97-
<StyledTableCell component="th" scope="row">{data.key}</StyledTableCell>
98-
<StyledTableCell align="right">{data.type}</StyledTableCell>
99-
<StyledTableCell align="right">{data.value}</StyledTableCell>
100-
</StyledTableRow>
101-
)): ''}
102-
</TableBody>
103-
</Table>
104-
</TableContainer>
105-
</>
106+
</Table>
107+
</TableContainer>
106108
);
107109
}

‎app/src/components/StateManagement/DisplayTab/DisplayContainer.tsx

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,60 @@
1-
import React, {useState, useContext} from 'react';
2-
import Tree from './Tree';
1+
import React, { useState, useContext } from 'react';
32
import Divider from '@mui/material/Divider';
43
import Grid from '@mui/material/Grid';
5-
import DataTable from './DataTable';
64
import { Typography } from '@mui/material';
5+
import DataTable from './DataTable';
6+
import Tree from './Tree';
77
import StateContext from '../../../context/context';
88

9-
function DisplayContainer({data, props}) { // "data" is referring to components from state - passed in from StateManagement
10-
11-
//grabbing intialized state from App using UseContext
9+
function DisplayContainer({ data, props }) { // "data" is referring to components from state - passed in from StateManagement
10+
// grabbing intialized state from App using UseContext
1211
const [currComponentState, setCurrComponentState] = useState([]);
1312
const [parentProps, setParentProps] = useState([]);
1413
const [state, dispatch] = useContext(StateContext);
15-
16-
let root = '';
14+
15+
let root = '';
1716

1817
// check the canvasFocus
19-
// if canvasFocus is a root component, use that root component as "root"
20-
if (state.rootComponents.includes(state.canvasFocus.componentId)) {
21-
for (let i = 0; i < data.length; i++) {
22-
if (data[i]["id"] === state.canvasFocus.componentId) root = data[i]["name"];
23-
}
24-
} else if (state.projectType === "Classic React") {
18+
// if canvasFocus is a root component, use that root component as "root"
19+
if (state.rootComponents.includes(state.canvasFocus.componentId)) {
20+
for (let i = 0; i < data.length; i++) {
21+
if (data[i].id === state.canvasFocus.componentId) root = data[i].name;
22+
}
23+
} else if (state.projectType === 'Classic React') {
2524
// else default to the main root component (aka app or index depending on react vs next/gatsby)
2625
root = 'App';
27-
} else {
26+
} else {
2827
root = 'index';
29-
}
28+
}
3029

3130
// root becomes default value of clickedComp
3231
const [clickedComp, setClickedComp] = useState(root);
33-
32+
3433
return (
35-
<div style={{display: 'flex'}}>
36-
{<Tree data = {data} currComponentState={currComponentState} setCurrComponentState ={setCurrComponentState} parentProps={parentProps} setParentProps={setParentProps} setClickedComp={setClickedComp}/>}
34+
<div style={{ display: 'flex' }}>
35+
<Tree data={data} currComponentState={currComponentState} setCurrComponentState={setCurrComponentState} parentProps={parentProps} setParentProps={setParentProps} setClickedComp={setClickedComp} />
3736
<Divider orientation="vertical" variant="middle" flexItem />
38-
<Grid item>
37+
<Grid item>
38+
<Typography
39+
style={{ color: 'black' }}
40+
variant="subtitle2"
41+
gutterBottom
42+
align="center"
43+
>
44+
Click on a component in the graph to see its state!
45+
</Typography>
3946
<Typography
40-
style={{ color: 'black' }}
41-
variant="subtitle2"
42-
gutterBottom={true}
43-
align="center"
44-
>
45-
Click on a component in the graph to see its state!
46-
</Typography>
47-
<Typography
48-
style={{ color: 'black' }}
49-
variant="h6"
50-
gutterBottom={true}
51-
align="center"
52-
>
53-
Total State for {clickedComp}
54-
</Typography>
55-
<DataTable currComponentState={currComponentState} setCurrComponentState ={setCurrComponentState} parentProps={parentProps} setParentProps={setParentProps} props={props} clickedComp={clickedComp} data = {data} />
56-
</Grid>
47+
style={{ color: 'black' }}
48+
variant="h6"
49+
gutterBottom
50+
align="center"
51+
>
52+
Total State for
53+
{' '}
54+
{clickedComp}
55+
</Typography>
56+
<DataTable currComponentState={currComponentState} setCurrComponentState={setCurrComponentState} parentProps={parentProps} setParentProps={setParentProps} props={props} clickedComp={clickedComp} data={data} />
57+
</Grid>
5758
</div>
5859
);
5960
}

0 commit comments

Comments
 (0)