Skip to content

Commit 645b65c

Browse files
carlyjacksoncarlyjackson
committed
trying to fix chart on tableStateProps
1 parent 43f8883 commit 645b65c

File tree

6 files changed

+89
-62
lines changed

6 files changed

+89
-62
lines changed

‎app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
4040
const [parentProps, setParentProps] = useState([]);
4141
const [parentName, setParentName] = useState('No Parents');
4242
const [parentComponent, setParentComponent] = useState({});
43-
console.log({currentComponent});
43+
const [rows1, setRows1] = useState(currentComponent.stateProps);
4444
// convert value to correct type based on user input
4545
const typeConversion = (value, type) => {
4646
switch (type) {
@@ -93,6 +93,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
9393
type: 'ADD STATE',
9494
payload: {newState: newState}
9595
});
96+
setRows1([...rows1, newState])
9697
resetError();
9798
clearForm();
9899
};
@@ -129,10 +130,14 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
129130
if (currChild.typeId === childId) {
130131
console.log('the parent is component:', currComponent);
131132
console.log('the parents state props are:', currComponent.stateProps);
132-
133-
return {parentProps: currComponent.stateProps,
134-
parentName: currComponent.name,
135-
parentComponent: currComponent
133+
const currComponentCopy = JSON.parse(JSON.stringify(currComponent));
134+
// currComponentCopy.stateProps.map((el) => {
135+
// console.log(el)
136+
// el['id'] = el['id'] + 0.01;
137+
// })
138+
return {parentProps: currComponentCopy.stateProps,
139+
parentName: currComponentCopy.name,
140+
parentComponent: currComponentCopy
136141
}
137142
}
138143
}
@@ -226,7 +231,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
226231
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
227232
Current Component State: {state.components[state.canvasFocus.componentId - 1].name}
228233
</h4>
229-
<TableStateProps canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
234+
<TableStateProps rows1={rows1} setRows1={setRows1} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
230235

231236

232237
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>

‎app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,6 @@ const TableParentProps = props => {
1818
const [gridColumns, setGridColumns] = useState([]);
1919
const parentProps = props.parentProps;
2020
const parentComponent = props.parentComponent;
21-
console.log('this is the hook from parentComponent', {parentComponent});
22-
console.log('this is the hook from parentProps', {parentProps});
2321
const columnTabs = [
2422
{
2523
field: 'id',
@@ -55,7 +53,6 @@ const TableParentProps = props => {
5553
<Button
5654
style={{ width: `${3}px`, color: 'black'}}
5755
onClick={() => {
58-
console.log('props.props inside button', props)
5956
console.log('params inside button', params)
6057
addParentProps(params.row, params.id);
6158
}}

‎app/src/components/StateManagement/CreateTab/components/TableStateProps.tsx

Lines changed: 59 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,13 @@ const TableStateProps = props => {
1515
const classes = useStyles();
1616
const [editRowsModel] = useState<GridEditRowsModel>({});
1717
const [gridColumns, setGridColumns] = useState([]);
18+
const currentId = state.canvasFocus.componentId;
19+
const currentComponent = state.components[currentId - 1];
20+
const rows1 = props.rows1;
21+
const setRows1 = props.setRows1;
22+
console.log({currentComponent})
23+
24+
console.log({rows1})
1825
const columnTabs = [
1926
{
2027
field: 'id',
@@ -90,56 +97,66 @@ const TableStateProps = props => {
9097
} else {
9198
setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
9299
}
100+
93101
}, [state.canvasFocus.componentId]);
94102
// rows to show are either from current component or from a given provider
103+
95104
let rows = [];
96-
console.log('passedInProps after rows declaration', state.components[state.canvasFocus.componentId - 1].passedInProps?.slice()[0]);
97-
console.log('type of passedInProps', Array.isArray(state.components[state.canvasFocus.componentId - 1].passedInProps?.slice()));
98-
const passedInProps = state.components[state.canvasFocus.componentId - 1].passedInProps?.slice();
99-
passedInProps?.forEach(propObj => {
100-
rows.push(propObj)
101-
})
102-
console.log('rows after for loop', rows)
103-
// let passedInPropsArray = state.components[state.canvasFocus.componentId - 1].passedInProps?.slice();
104-
// console.log({passedInPropsArray})
105-
// if (passedInPropsArray[0]) rows.push(passedInPropsArray[0]);
106-
console.log('rows in line 98', rows);
107-
console.log('props.providerId',props.providerId);
108-
if (!props.providerId) {
109-
const currentId = state.canvasFocus.componentId;
110-
const currentComponent = state.components[currentId - 1];
111-
rows = currentComponent.stateProps.slice();
112-
//add parentProps to the rows array
113-
rows.concat(currentComponent.passedInProps?.slice());
114-
} else {
115-
const providerComponent = state.components[props.providerId - 1];
116-
// changed to get whole object
117-
if (props.displayObject){
118-
const displayObject = props.displayObject;
119-
// format for DataGrid
120-
let id=1;
121-
const currentId = state.canvasFocus.componentId;
122-
const currentComponent = state.components[currentId - 1];
123-
for (const key in displayObject) {
124-
// if key is a number make it a string with brackets aroung number
125-
const newKey = isNaN(key) ? key : '[' + key + ']';
126-
const type = Array.isArray(displayObject[key]) ? 'array' : typeof (displayObject[key]);
127-
rows.push({ id: id++, key: newKey, value: displayObject[key], type: type});
128-
}
129-
} else {
130-
const currentId = state.canvasFocus.componentId;
131-
const currentComponent = state.components[currentId - 1];
132-
rows = providerComponent.stateProps.slice();
133-
rows.concat(currentComponent.passedInProps?.slice());
134-
console.log({rows})
135-
}
136-
}
105+
106+
107+
const passedInProps = currentComponent.passedInProps?.slice();
108+
console.log({passedInProps});
109+
110+
passedInProps?.forEach(propObj => {
111+
rows.push(propObj)
112+
})
113+
114+
console.log("rows before pushing stateProps", rows);
115+
116+
currentComponent.stateProps?.forEach((prop) => rows.push(prop));
117+
118+
console.log("rows after pushing stateProps", rows);
119+
120+
// if (!props.providerId) {
121+
122+
// if (rows.length < 1) {
123+
//currentComponent.stateProps?.forEach((prop) => rows.push(prop))
124+
// } else rows.concat(currentComponent.stateProps.slice());
125+
126+
//[1,1.01,2,2.02]
127+
//[1,3,2,4]
128+
//add current props to the rows array
129+
//}
130+
// else {
131+
132+
// /// LegacyPD: we want to delete this because state management tab shouldn't be using context
133+
134+
// const providerComponent = state.components[props.providerId - 1];
135+
// // changed to get whole object
136+
// if (props.displayObject){
137+
// const displayObject = props.displayObject;
138+
// // format for DataGrid
139+
// let id=1;
140+
// const currentId = state.canvasFocus.componentId;
141+
// const currentComponent = state.components[currentId - 1];
142+
// for (const key in displayObject) {
143+
// // if key is a number make it a string with brackets aroung number
144+
// const newKey = isNaN(key) ? key : '[' + key + ']';
145+
// const type = Array.isArray(displayObject[key]) ? 'array' : typeof (displayObject[key]);
146+
// rows.push({ id: id++, key: newKey, value: displayObject[key], type: type});
147+
// }
148+
// } else {
149+
// const currentId = state.canvasFocus.componentId;
150+
// const currentComponent = state.components[currentId - 1];
151+
// rows.concat(currentComponent.stateProps.slice());
152+
// }
153+
// }
137154

138155

139156
return (
140157
<div className={'state-prop-grid'} style={{display: 'flex', gap: "20px"}}>
141158
<DataGrid
142-
rows={rows}
159+
rows={rows1}
143160
columns={gridColumns}
144161
pageSize={5}
145162
editRowsModel={editRowsModel}

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React from 'react';
1+
import React, {useContext} from 'react';
2+
import StateContext from "../../../context/context";
23
import Table from '@mui/material/Table';
34
import TableBody from '@mui/material/TableBody';
45
import TableContainer from '@mui/material/TableContainer';
@@ -30,10 +31,14 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
3031
}));
3132

3233
export default function DataTable(props) {
34+
// const [state, dispatch] = useContext(StateContext);
35+
// console.log('passedInProps from context', state.component.passedInProps)
3336
const { currComponentState, setCurrComponentState, parentProps, setParentProps, clickedComp } = props;
34-
console.log(props);
37+
console.log('props inside data table', props);
3538
console.log({currComponentState});
3639
console.log({parentProps});
40+
console.log({clickedComp});
41+
3742
return (
3843
<>
3944
<TableContainer component={Paper} sx={{ maxHeight: '350px' }}>
@@ -51,7 +56,7 @@ export default function DataTable(props) {
5156
{/* <StyledTableCell>Key</StyledTableCell> */}
5257
<StyledTableCell align="center" colSpan={3}>
5358
{/* contextInput to be replaced by new state hook by other LegacyPD. Want to use component name and parent name instead */}
54-
{ 'Props from Parent:'}
59+
{ 'Props Passed in from Parent:'}
5560
</StyledTableCell>
5661
</TableRow>
5762
</TableHead>

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -119,23 +119,25 @@ function Tree({ data, currComponentState, setCurrComponentState, parentProps, se
119119
const nameOfClicked = element.srcElement.__data__.data.name;
120120

121121
// App doesn't have a parent element so want to only console log if click on non-App element
122-
let nameOfClickedParent = null;
123-
if (nameOfClicked !== "App") nameOfClickedParent = element.srcElement.__data__.parent.data.name;
122+
// let nameOfClickedParent = null;
123+
// if (nameOfClicked !== "App") nameOfClickedParent = element.srcElement.__data__.parent.data.name;
124124

125-
let parentStateProps;
125+
let passedInProps;
126126
let componentStateProps;
127127

128128
// iterate through data array to find stateProps for parent and clicked element
129129
for (let i = 0; i < data.length; i++) {
130-
if (data[i]["name"] === nameOfClicked) componentStateProps = data[i]["stateProps"];
131-
if (data[i]["name"] === nameOfClickedParent) parentStateProps = data[i]["stateProps"];
130+
if (data[i]["name"] === nameOfClicked) {
131+
componentStateProps = data[i]["stateProps"];
132+
passedInProps = data[i]["passedInProps"];
132133
}
134+
}
133135
console.log(nameOfClicked);
134-
console.log(nameOfClickedParent);
136+
console.log(passedInProps);
135137
console.log("componentStateProps outside for loop", componentStateProps);
136-
console.log("parentStateProps outside for loop", parentStateProps);
138+
console.log("passedInProps outside for loop", passedInProps);
137139
setCurrComponentState(componentStateProps);
138-
setParentProps(parentStateProps);
140+
setParentProps(passedInProps);
139141
setClickedComp(nameOfClicked);
140142

141143
});

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@
146146
"esbuild-wasm": "^0.14.51",
147147
"eslint-plugin-react-hooks": "^4.6.0",
148148
"express-graphql": "^0.12.0",
149+
"fs": "^0.0.1-security",
149150
"graphql": "^15.8.0",
150151
"identity-obj-proxy": "^3.0.0",
151152
"immutable": "^4.1.0",

0 commit comments

Comments
 (0)