Skip to content

Commit af432f2

Browse files
KPjonocrbuddhajjigaewilliamdyoonMadinventorZero
authored and
KP
committed
Fixed bug that triggers re-rendering. Refactored and modularized re-usable code. Matched styling to main app container.
Co-authored-by: jonocr <[email protected]> Co-authored-by: buddhajjigae <[email protected]> Co-authored-by: williamdyoon <[email protected]> Co-authored-by: MadinventorZero <[email protected]>
1 parent d3dcd27 commit af432f2

File tree

3 files changed

+78
-155
lines changed

3 files changed

+78
-155
lines changed

‎app/src/components/bottom/CodePreview.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ const CodePreview: React.FC<{
3434
useEffect(() => {
3535
setDivHeight(height);
3636
}, [height])
37-
console.log(currentComponent.code);
3837
return (
3938
<div
4039
ref={wrapper}

‎app/src/components/right/StatePropsPanel.tsx

Lines changed: 55 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// CARET
2-
import React, { useState, useContext, useCallback } from "react";
2+
import React, { useState, useContext, useCallback, useEffect } from "react";
33
import {
44
createStyles,
55
makeStyles,
@@ -22,11 +22,7 @@ import {
2222
} from "@material-ui/core";
2323

2424
import StateContext from "../../context/context";
25-
import ComponentPanelItem from "./ComponentPanelItem";
26-
import ComponentPanelRoutingItem from "./ComponentPanelRoutingItem";
27-
2825
import TableStateProps from "./TableStateProps";
29-
import { exists } from "node:fs";
3026

3127
const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
3228
const classes = useStyles();
@@ -36,13 +32,19 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
3632
const [inputValue, setInputValue] = useState("");
3733
const [inputType, setInputType] = useState("");
3834

39-
/*************** TEMPORARY FIX VIA FORCED RENDER ***********/
40-
// const [, updateState] = useState();
41-
// const forceUpdate = useCallback(() => updateState({}), []);
42-
/************************************************************/
35+
const [stateProps, setStateProps] = useState([]);
36+
37+
// detect changes to component.stateProps[], renders and prints its contents
38+
useEffect(() => {
39+
console.log(new Date().toLocaleDateString(), 'stateProps:', stateProps);
40+
}, [stateProps])
41+
42+
// get currentComponent by using currently focused component's id
43+
const currentId = state.canvasFocus.componentId;
44+
const currentComponent = state.components[currentId - 1];
45+
46+
// debug console button for development purposes
4347
const debug = () => {
44-
const currentId = state.canvasFocus.componentId;
45-
const currentComponent = state.components[currentId - 1];
4648
console.log("currentComponent:", currentComponent);
4749
console.log("currentComponent.stateProps:", currentComponent.stateProps);
4850
console.log(
@@ -51,8 +53,8 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
5153
);
5254
};
5355

56+
// convert value to correct type based on user input
5457
const typeConversion = (value, type) => {
55-
// based on user input for value, convert value to correct type
5658
switch (type) {
5759
case "String":
5860
return String(value);
@@ -64,99 +66,72 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
6466
return value;
6567
}
6668
};
69+
// clears the input key, value, and type on Form
70+
const clearForm = () => {
71+
setInputKey("");
72+
setInputValue("");
73+
setInputType("");
74+
};
6775

76+
// submit new stateProps entries to state context
6877
const submitNewState = (e) => {
6978
e.preventDefault();
70-
// currently focused component's id
71-
const currentId = state.canvasFocus.componentId;
72-
// current component
73-
const currentComponent = state.components[currentId - 1];
7479
const statesArray = currentComponent.stateProps;
7580
const newState = {
81+
// check if array is not empty => true find last elem in array. get id and increment by 1 || else 1
7682
id: statesArray.length > 0 ? statesArray[statesArray.length-1].id + 1 : 1,
77-
// check if array is not empty => true find last elem in array. get id and increment by 1 || else 1
7883
key: inputKey,
7984
value: typeConversion(inputValue, inputType),
8085
type: inputType,
8186
};
82-
console.log('newState {}:', newState)
8387
// store this newStateProp obj to our Component's stateProps array
8488
currentComponent.stateProps.push(newState);
85-
console.log('currentComponent.stateProps []:', currentComponent.stateProps)
8689
// reset newStateProp to empty for future new state prop entries
8790
updateUseStateCodes();
88-
setInputKey("");
89-
setInputValue("");
90-
setInputType("");
91+
clearForm();
9192
};
92-
93+
94+
// generates React Hook code snippets for each new stateProp entry
9395
const updateUseStateCodes = () => {
94-
// currently focused component's id
95-
const currentId = state.canvasFocus.componentId;
96-
// current component
97-
const currentComponent = state.components[currentId - 1];
98-
96+
// array of snippets of state prop codes
9997
const localStateCode = [];
100-
// iterate thru current component's state props to generate code expression for each new state prop entry
101-
currentComponent.stateProps.forEach((el) => {
102-
const useStateCode = `const [${el.key}, set${
103-
el.key.charAt(0).toUpperCase() + el.key.slice(1)
104-
}] = useState<${el.type} | undefined>(${JSON.stringify(el.value)})`;
98+
99+
currentComponent.stateProps.forEach((stateProp) => {
100+
const useStateCode = `const [${stateProp.key}, set${
101+
stateProp.key.charAt(0).toUpperCase() + stateProp.key.slice(1)
102+
}] = useState<${stateProp.type} | undefined>(${JSON.stringify(stateProp.value)})`;
105103
localStateCode.push(useStateCode);
106104
});
105+
// store localStateCodes in global state context
107106
currentComponent.useStateCodes = localStateCode;
108107
};
109-
////////////////////////////////////////////////////////////////////////////////////
110-
const handlerTableSelect = (data) => {
111-
// currently focused component's id
112-
const currentId = state.canvasFocus.componentId;
113-
// current component
114-
const currentComponent = state.components[currentId - 1];
115-
//iterate and delete index
108+
109+
// find table row using its id and if it exists, populate form with its details
110+
const handlerRowSelect = (table) => {
116111
let exists = false;
117-
// [ { id, key, value, type } ]
118-
119-
console.log("currentComponent.stateProps: ", currentComponent.stateProps);
120-
121-
currentComponent.stateProps.forEach((element) => {
122-
console.log('element.id:', element.id);
123-
if (element.id === data.rows.id) exists = true;
124-
});
125-
126-
// if (exists) {
127-
// setInputKey(data.row.key);
128-
// setInputType(data.row.type);
129-
// setInputValue(data.row.value);
130-
// } else {
131-
// setInputKey("");
132-
// setInputValue("");
133-
// setInputType("");
134-
135-
// }
136-
137-
// setInputKey(data.row.key);
138-
setInputType(data.row.type);
139-
// setInputValue(data.row.value);
140-
// forceUpdate();
112+
currentComponent.stateProps.forEach((stateProp) => {
113+
// if stateProp id matches current row's id (table.row.id), flip exists to true
114+
if (stateProp.id === table.row.id) exists = true;
115+
});
116+
// if row id exists, populate form with corresponding inputs (key, value, type) from table row
117+
if (exists) {
118+
setInputKey(table.row.key);
119+
setInputType(table.row.type);
120+
setInputValue(table.row.value);
121+
}
122+
else clearForm();
141123
}
142124

143-
const handlerDeleteState = (id) => {
144-
// currently focused component's id
145-
const currentId = state.canvasFocus.componentId;
146-
// current component
147-
const currentComponent = state.components[currentId - 1];
148-
//iterate and delete index
149-
currentComponent.stateProps = currentComponent.stateProps.filter(element => (element.id != id));
150-
125+
// find & delete table row using its id
126+
const handlerRowDelete = (id) => {
127+
//iterate and filter out stateProps with matching row id
128+
currentComponent.stateProps = currentComponent.stateProps.filter(element => element.id != id);
151129
updateUseStateCodes();
152-
setInputKey('');
153-
setInputValue('');
154-
setInputType('');
155-
130+
setStateProps(currentComponent.stateProps.slice());
156131
}
157-
132+
158133
return (
159-
<div style={{ border: `${3}px solid red` }}>
134+
<div style={{'background-color':`#ececea`}}>
160135
<div>
161136
<FormControl>
162137
<label>Create New State</label>
@@ -213,12 +188,10 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
213188
debug
214189
</MyButton>
215190
<br></br>
216-
<br></br>
217191
<MyButton type="submit" onClick={submitNewState}>
218192
Save
219193
</MyButton>
220194
<br></br>
221-
<br></br>
222195
</FormControl>
223196
</div>
224197
<hr></hr>
@@ -230,9 +203,8 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
230203
<label>
231204
Name: {state.components[state.canvasFocus.componentId - 1].name}
232205
</label>
233-
{/* CARET - HANGING TABLE STATE PROPS */}
234-
<div style={{ border: `${3}px solid green` }}>
235-
<TableStateProps selectHandler={handlerTableSelect} deleteHandler={handlerDeleteState} />
206+
<div style={{'background-color':`#ececea`}}>
207+
<TableStateProps selectHandler={handlerRowSelect} deleteHandler={handlerRowDelete} />
236208
</div>
237209
</div>
238210
</div>

‎app/src/components/right/TableStateProps.tsx

Lines changed: 23 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -5,45 +5,14 @@ import {
55
GridColumns,
66
GridEditRowsModel,
77
} from '@material-ui/data-grid';
8+
import {
9+
styled,
10+
} from "@material-ui/core/styles";
811
import Button from "@material-ui/core/Button";
912
import StateContext from '../../context/context';
10-
import { PinDropSharp } from '@material-ui/icons';
1113

12-
// const columns: GridColumns = [
13-
// {
14-
// field: 'id',
15-
// headerName: 'ID',
16-
// width: 70,
17-
// editable: false,
18-
// },
19-
// {
20-
// field: 'key',
21-
// headerName: 'Key',
22-
// width: 100,
23-
// editable: true,
24-
// },
25-
// {
26-
// field: 'value',
27-
// headerName: 'Value',
28-
// width: 100,
29-
// editable: true,
30-
// },
31-
// {
32-
// field: 'type',
33-
// headerName: 'Type',
34-
// width: 100,
35-
// editable: false,
36-
// },
37-
// {
38-
// field: 'delete',
39-
// headerName: 'Delete',
40-
// width: 100,
41-
// editable: false,
42-
// renderCell: () => (
43-
// <Button>Delete</Button>
44-
// ),
45-
// },
46-
// ];
14+
import ClearIcon from '@material-ui/icons/Clear';
15+
import { IconButton, SvgIcon } from '@material-ui/core';
4716

4817
const getColumns = (props) => {
4918
return [
@@ -56,25 +25,25 @@ const getColumns = (props) => {
5625
{
5726
field: 'key',
5827
headerName: 'Key',
59-
width: 100,
28+
width: 90,
6029
editable: true,
6130
},
6231
{
6332
field: 'value',
6433
headerName: 'Value',
65-
width: 100,
34+
width: 90,
6635
editable: true,
6736
},
6837
{
6938
field: 'type',
7039
headerName: 'Type',
71-
width: 100,
40+
width: 90,
7241
editable: false,
7342
},
7443
{
7544
field: 'delete',
76-
headerName: 'Delete',
77-
width: 100,
45+
headerName: 'X',
46+
width: 70,
7847
editable: false,
7948
renderCell: (params) => {
8049
const getIdRow = () => {
@@ -83,52 +52,35 @@ const getColumns = (props) => {
8352
return params.getValue(fields[0]);
8453
};
8554
return (
86-
<Button onClick={() => {
87-
// console.log("*****************1*****************");
88-
// console.log('event:', event);
89-
// console.log('event.preventDefault():', event.preventDefault())
90-
// event.preventDefault();
91-
// console.log('event.stopPropagation():', event.stopPropagation)
92-
props.deleteHandler(getIdRow());
93-
// event.stopPropagation();
94-
}}>Delete</Button>
55+
<Button style={{width:`${3}px`}}
56+
onClick={() => {
57+
props.deleteHandler(getIdRow());
58+
}}>
59+
<ClearIcon style={{width:`${15}px`}}/>
60+
</Button>
9561
);
9662
}
9763
},
9864
];
9965
};
10066

101-
// This function iterates thru current component's state props array to build rows to display in grid below
102-
const buildRows = (props) => {
103-
const [state, dispatch] = useContext(StateContext);
104-
// const [state] = useContext(StateContext);
105-
const currentId = state.canvasFocus.componentId;
106-
const currentComponent = state.components[currentId - 1];
107-
const rows = [];
108-
10967

110-
for (let i = 0; i < currentComponent.stateProps.length; i += 1) {
111-
const newObj = {};
112-
newObj.id = currentComponent.stateProps[i].id;
113-
newObj.key = currentComponent.stateProps[i].key;
114-
newObj.value = currentComponent.stateProps[i].value;
115-
newObj.type = currentComponent.stateProps[i].type;
116-
rows.push(newObj);
117-
}
118-
return rows;
119-
};
120-
12168
const TableStateProps = (props) => {
69+
const [state, dispatch] = useContext(StateContext);
12270
const [editRowsModel, setEditRowsModel] = useState < GridEditRowsModel > ({});
12371
const [gridColumns, setGridColumns] = useState([]);
12472

125-
const rows = buildRows(props);
73+
// get currentComponent by using currently focused component's id
74+
const currentId = state.canvasFocus.componentId;
75+
const currentComponent = state.components[currentId - 1];
76+
77+
const rows = currentComponent.stateProps.slice();
12678

12779
// when component gets mounted, sets the gridColumn
12880
useEffect(() => {
12981
setGridColumns(getColumns(props));
13082
}, []);
131-
83+
13284
return (
13385
<div style={{ height: 400, width: '100%' }}>
13486
<DataGrid

0 commit comments

Comments
 (0)