Skip to content

Commit da08b52

Browse files
buddhajjigaebuddhajjigae
authored
Merge pull request #22 from xkevinpark/bug/fix-state
Fixed bug, modularized, and added comments for StatePropsPanel & TableStateProps
2 parents d3dcd27 + 88841e1 commit da08b52

File tree

5 files changed

+94
-175
lines changed

5 files changed

+94
-175
lines changed

‎.eslintrc.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"extends": ["plugin:react/recommended", "airbnb-base"],
2+
"extends": ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "airbnb-base"],
33
"parserOptions": {
44
"ecmaFeatures": {
55
"jsx": true

‎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 & 91 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,37 +22,31 @@ 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();
33-
const [state, dispatch] = useContext(StateContext);
29+
const [state] = useContext(StateContext);
3430

3531
const [inputKey, setInputKey] = useState("");
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+
// get currentComponent by using currently focused component's id
38+
const currentId = state.canvasFocus.componentId;
39+
const currentComponent = state.components[currentId - 1];
40+
41+
// debug console button for development purposes
4342
const debug = () => {
44-
const currentId = state.canvasFocus.componentId;
45-
const currentComponent = state.components[currentId - 1];
4643
console.log("currentComponent:", currentComponent);
4744
console.log("currentComponent.stateProps:", currentComponent.stateProps);
48-
console.log(
49-
"currentComponent.useStateCodes:",
50-
currentComponent.useStateCodes
51-
);
45+
console.log("currentComponent.useStateCodes:", currentComponent.useStateCodes);
5246
};
5347

48+
// convert value to correct type based on user input
5449
const typeConversion = (value, type) => {
55-
// based on user input for value, convert value to correct type
5650
switch (type) {
5751
case "String":
5852
return String(value);
@@ -65,98 +59,71 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
6559
}
6660
};
6761

62+
// clears the input key, value, and type on Form
63+
const clearForm = () => {
64+
setInputKey("");
65+
setInputValue("");
66+
setInputType("");
67+
};
68+
69+
// submit new stateProps entries to state context
6870
const submitNewState = (e) => {
6971
e.preventDefault();
70-
// currently focused component's id
71-
const currentId = state.canvasFocus.componentId;
72-
// current component
73-
const currentComponent = state.components[currentId - 1];
7472
const statesArray = currentComponent.stateProps;
7573
const newState = {
74+
// check if array is not empty => true find last elem in array. get id and increment by 1 || else 1
7675
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
7876
key: inputKey,
7977
value: typeConversion(inputValue, inputType),
8078
type: inputType,
8179
};
82-
console.log('newState {}:', newState)
8380
// store this newStateProp obj to our Component's stateProps array
8481
currentComponent.stateProps.push(newState);
85-
console.log('currentComponent.stateProps []:', currentComponent.stateProps)
8682
// reset newStateProp to empty for future new state prop entries
8783
updateUseStateCodes();
88-
setInputKey("");
89-
setInputValue("");
90-
setInputType("");
84+
clearForm();
9185
};
92-
86+
87+
// generates React Hook code snippets for each new stateProp entry
9388
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-
89+
// array of snippets of state prop codes
9990
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)})`;
91+
92+
currentComponent.stateProps.forEach((stateProp) => {
93+
const useStateCode = `const [${stateProp.key}, set${
94+
stateProp.key.charAt(0).toUpperCase() + stateProp.key.slice(1)
95+
}] = useState<${stateProp.type} | undefined>(${JSON.stringify(stateProp.value)})`;
10596
localStateCode.push(useStateCode);
10697
});
98+
// store localStateCodes in global state context
10799
currentComponent.useStateCodes = localStateCode;
108100
};
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
101+
102+
// find table row using its id and if it exists, populate form with its details
103+
const handlerRowSelect = (table) => {
116104
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();
141-
}
142-
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-
105+
currentComponent.stateProps.forEach((stateProp) => {
106+
// if stateProp id matches current row's id (table.row.id), flip exists to true
107+
if (stateProp.id === table.row.id) exists = true;
108+
});
109+
// if row id exists, populate form with corresponding inputs (key, value, type) from table row
110+
if (exists) {
111+
setInputKey(table.row.key);
112+
setInputType(table.row.type);
113+
setInputValue(table.row.value);
114+
} else clearForm();
115+
};
116+
117+
// find & delete table row using its id
118+
const handlerRowDelete = (id:any) => {
119+
// iterate and filter out stateProps with matching row id
120+
currentComponent.stateProps = currentComponent.stateProps.filter(element => element.id !== id);
151121
updateUseStateCodes();
152-
setInputKey('');
153-
setInputValue('');
154-
setInputType('');
155-
156-
}
157-
122+
setStateProps(currentComponent.stateProps.slice());
123+
};
124+
158125
return (
159-
<div style={{ border: `${3}px solid red` }}>
126+
<div style={{'background-color':`#ececea`}}>
160127
<div>
161128
<FormControl>
162129
<label>Create New State</label>
@@ -213,12 +180,10 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
213180
debug
214181
</MyButton>
215182
<br></br>
216-
<br></br>
217183
<MyButton type="submit" onClick={submitNewState}>
218184
Save
219185
</MyButton>
220186
<br></br>
221-
<br></br>
222187
</FormControl>
223188
</div>
224189
<hr></hr>
@@ -230,9 +195,8 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
230195
<label>
231196
Name: {state.components[state.canvasFocus.componentId - 1].name}
232197
</label>
233-
{/* CARET - HANGING TABLE STATE PROPS */}
234-
<div style={{ border: `${3}px solid green` }}>
235-
<TableStateProps selectHandler={handlerTableSelect} deleteHandler={handlerDeleteState} />
198+
<div style={{'background-color':`#ececea`}}>
199+
<TableStateProps selectHandler={handlerRowSelect} deleteHandler={handlerRowDelete} />
236200
</div>
237201
</div>
238202
</div>

0 commit comments

Comments
 (0)