Skip to content

Commit e11019c

Browse files
WilliamCheng12345WilliamCheng12345
committed
Fixed multiple states from context being replaced
1 parent 23b2cd1 commit e11019c

File tree

3 files changed

+105
-89
lines changed

3 files changed

+105
-89
lines changed

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,17 @@ import StateContext from '../../context/context';
44
import TableStateProps from '../right/TableStateProps';
55

66
// TODO: typescript interface or type check
7-
function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
7+
function UseStateModal({ updateAttributeWithState, attributeToChange }) {
88
const [state, dispatch] = useContext(StateContext);
99
const [open, setOpen] = useState(false);
1010
const [componentProviderId, setComponentProviderId] = useState(1) // id is initialized to App
1111

12-
// make buttons to choose which component to get state from
13-
const components = [];
12+
// make tabs to choose which component to get state from
13+
const componentTabs = [];
1414
for (let i = 0; i < state.components.length; i ++) {
15-
components.push(<button onClick={() => setComponentProviderId(i+1)}>{state.components[i].name}</button>)
15+
componentTabs.push(<button onClick={() => setComponentProviderId(i+1)}>{state.components[i].name}</button>)
1616
}
1717

18-
1918
// return the selected state's ID back so the value of it can be updated in the customizationpanel. to the assign the value of selected state to attribute tied to useState button (currently just text)
2019
// attribute to change as parameter for
2120
const body = (
@@ -31,7 +30,7 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
3130
</div>
3231
<div className="useState-window">
3332
<div className="useState-dropdown">
34-
{components}
33+
{componentTabs}
3534
</div>
3635
<div className="useState-stateDisplay">
3736
<TableStateProps

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

Lines changed: 70 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -18,31 +18,87 @@ const TableStateProps = (props) => {
1818
const [gridColumns, setGridColumns] = useState([]);
1919
const [rows, setRows] = useState([]);
2020

21+
const columnTabs = [
22+
{
23+
field: 'id',
24+
headerName: 'ID',
25+
width: 70,
26+
editable: false,
27+
},
28+
{
29+
field: 'key',
30+
headerName: 'Key',
31+
width: 90,
32+
editable: true,
33+
},
34+
{
35+
field: 'value',
36+
headerName: 'Value',
37+
width: 90,
38+
editable: true,
39+
},
40+
{
41+
field: 'type',
42+
headerName: 'Type',
43+
width: 90,
44+
editable: false,
45+
},
46+
{
47+
field: 'delete',
48+
headerName: 'X',
49+
width: 70,
50+
editable: false,
51+
renderCell: function renderCell(params:any) {
52+
return (
53+
<Button style={{width:`${3}px`}} onClick={() => {
54+
deleteState(params.id)
55+
}}>
56+
<ClearIcon style={{width:`${15}px`}}/>
57+
</Button>
58+
);
59+
},
60+
},
61+
];
62+
63+
64+
const deleteState = (selectedId) => {
65+
// get the current focused component
66+
// remove the state that the button is clicked
67+
// send a dispatch to rerender the table
68+
const currentId = state.canvasFocus.componentId;
69+
const currentComponent = state.components[currentId - 1];
70+
71+
const filtered = currentComponent.stateProps.filter(element => element.id !== selectedId);
72+
dispatch({
73+
type: 'DELETE STATE',
74+
payload: {stateProps: filtered}
75+
});
76+
}
77+
2178

2279
useEffect(() => {
23-
setGridColumns(getColumns(props, state, dispatch));
80+
setGridColumns(columnTabs);
2481
}, [props.isThemeLight])
25-
// get currentComponent by using currently focused component's id
26-
27-
// rows to show are either from current component or from a given provider
82+
2883

2984
const { selectHandler } : StatePropsPanelProps = props;
3085

31-
// when component gets mounted, sets the gridColumn
86+
// the delete button needs to be updated to remove
87+
// the states from the current focused component
3288
useEffect(() => {
33-
34-
35-
// get the columns and remove delete buttons
36-
// only if table is displayed as modal
37-
const columns = getColumns(props, state, dispatch);
3889
if(props.canDeleteState) {
39-
setGridColumns(columns);
90+
setGridColumns(columnTabs);
4091
}
4192
else {
42-
setGridColumns(columns.slice(0, columns.length - 1));
93+
setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
4394
}
44-
95+
}, [state.canvasFocus.componentId]);
4596

97+
// when we switch between tabs in our modal or focus of our current
98+
// component, we need to update the states displayed in our table
99+
// we also need to update the table when the state is changed by
100+
// deleting and adding component state
101+
useEffect(() => {
46102
if (!props.providerId) {
47103
const currentId = state.canvasFocus.componentId;
48104
const currentComponent = state.components[currentId - 1];
@@ -51,9 +107,9 @@ const TableStateProps = (props) => {
51107
const providerComponent = state.components[props.providerId - 1];
52108
setRows(providerComponent.stateProps.slice());
53109
}
54-
55110
}, [props.providerId, state]);
56111

112+
57113
return (
58114
<div className={'state-prop-grid'}>
59115
<DataGrid
@@ -69,60 +125,6 @@ const TableStateProps = (props) => {
69125
};
70126

71127

72-
const getColumns = (props, state, dispatch) => {
73-
return [
74-
{
75-
field: 'id',
76-
headerName: 'ID',
77-
width: 70,
78-
editable: false,
79-
},
80-
{
81-
field: 'key',
82-
headerName: 'Key',
83-
width: 90,
84-
editable: true,
85-
},
86-
{
87-
field: 'value',
88-
headerName: 'Value',
89-
width: 90,
90-
editable: true,
91-
},
92-
{
93-
field: 'type',
94-
headerName: 'Type',
95-
width: 90,
96-
editable: false,
97-
},
98-
{
99-
field: 'delete',
100-
headerName: 'X',
101-
width: 70,
102-
editable: false,
103-
renderCell: function renderCell(params:any) {
104-
return (
105-
<Button style={{width:`${3}px`}} onClick={() => {
106-
// get the current focused component
107-
// remove the state that the button is clicked
108-
// send a dispatch to rerender the table
109-
const currentId = state.canvasFocus.componentId;
110-
const currentComponent = state.components[currentId - 1];
111-
112-
const filtered = currentComponent.stateProps.filter(element => element.id !== params.id);
113-
dispatch({
114-
type: 'DELETE STATE',
115-
payload: {stateProps: filtered}
116-
});
117-
118-
}}>
119-
<ClearIcon style={{width:`${15}px`}}/>
120-
</Button>
121-
);
122-
},
123-
},
124-
];
125-
};
126128

127129
const useStyles = makeStyles({
128130
themeLight: {

‎app/src/containers/CustomizationPanel.tsx

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -207,23 +207,37 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
207207

208208
// function to pass into UseStateModal to use state to update attribute
209209
const updateAttributeWithState = (attributeName, componentProviderId, statePropsId) => {
210-
// get the stateProps of the componentProvider
211-
const currentComponent = state.components[componentProviderId - 1];
212-
const currentComponentProps = currentComponent.stateProps;
213-
const newInput = currentComponentProps[statePropsId - 1].value;
214-
console.log("useContext of current component = ", currentComponent);
215-
210+
// get the stateProps of the componentProvider
211+
const currentComponent = state.components[state.canvasFocus.componentId - 1];
212+
const providerComponent = state.components[componentProviderId - 1];
213+
const providerStates = providerComponent.stateProps;
214+
const newInput = providerStates[statePropsId - 1].value;
215+
216+
console.log("state-components", JSON.parse(JSON.stringify(state.components)));
217+
console.log("current-component", JSON.parse(JSON.stringify(currentComponent)));
216218

217219
if (attributeName === 'compText') {
218-
const newContextObj = useContextObj;
220+
let newContextObj = {...currentComponent.useContext};
221+
if(!newContextObj) {
222+
console.log("New Context Obj created");
223+
newContextObj = {};
224+
}
225+
219226
if (!newContextObj[componentProviderId]) {
227+
console.log("Provider Id added to our new context obj ", componentProviderId);
220228
newContextObj[componentProviderId] = {statesFromProvider : new Set()};
221229
}
222230

223231
newContextObj[componentProviderId].compText = statePropsId;
224232
newContextObj[componentProviderId].statesFromProvider.add(statePropsId);
225233
setCompText(newInput);
226-
setUseContextObj(newContextObj);
234+
// setUseContextObj(newContextObj);
235+
console.log("newContextObj to be dispatched ", newContextObj);
236+
237+
dispatch({
238+
type: 'UPDATE USE CONTEXT',
239+
payload: { useContextObj: newContextObj}
240+
})
227241
}
228242
if (attributeName === 'compLink') {
229243
const newContextObj = useContextObj;
@@ -245,9 +259,9 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
245259

246260
}
247261

248-
useEffect(() => {
249-
console.log(state.components);
250-
}, state);
262+
// useEffect(() => {
263+
// console.log(useContextObj);
264+
// }, [useContextObj]);
251265

252266
// dispatch to 'UPDATE CSS' called when save button is clicked,
253267
// passing in style object constructed from all changed input values
@@ -270,10 +284,11 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
270284
// type: 'UPDATE USE CONTEXT'
271285
// payload: useContext object
272286

273-
dispatch({
274-
type: 'UPDATE USE CONTEXT',
275-
payload: { useContextObj: useContextObj}
276-
})
287+
// console.log("useContextObj to be dispatched", useContextObj);
288+
// dispatch({
289+
// type: 'UPDATE USE CONTEXT',
290+
// payload: { useContextObj: useContextObj}
291+
// })
277292

278293
dispatch({
279294
type: 'UPDATE CSS',

0 commit comments

Comments
 (0)