Skip to content

Commit 61c34b6

Browse files
chrisjtangchrisjtang
committed
fixed some bugs after the merge
co-authored-by: Crys Lim [email protected] co-authored-by: William Cheng
1 parent d66a08d commit 61c34b6

File tree

4 files changed

+149
-111
lines changed

4 files changed

+149
-111
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
1414
// make tabs to choose which component to get state from
1515
const componentTabs = [];
1616
for (let i = 0; i < state.components.length; i ++) {
17-
components.push(<button
17+
componentTabs.push(<button
1818
onClick={() => {
1919
setComponentProviderId(i+1);
2020
setDisplayObject(null);
@@ -67,6 +67,7 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
6767
setOpen(false);
6868
}
6969
}}
70+
deleteHandler={() => func()}
7071
isThemeLight={true}
7172
/>
7273
</div>

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

Lines changed: 114 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -10,67 +10,129 @@ import StateContext from '../../context/context';
1010
import { makeStyles } from '@material-ui/core/styles';
1111
import { StatePropsPanelProps } from '../../interfaces/Interfaces';
1212

13-
const TableStateProps = (props) => {
13+
const TableStateProps = props => {
1414
const [state, dispatch] = useContext(StateContext);
1515
const classes = useStyles();
16-
const [editRowsModel] = useState <GridEditRowsModel> ({});
16+
const [editRowsModel] = useState<GridEditRowsModel>({});
1717
const [gridColumns, setGridColumns] = useState([]);
1818

19-
const [rows, setRows] = useState([]);
20-
19+
// const [rows, setRows] = useState([]);
20+
2121
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-
},
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
54+
style={{ width: `${3}px` }}
55+
onClick={() => {
56+
deleteState(params.id);
57+
}}
58+
>
59+
<ClearIcon style={{ width: `${15}px` }} />
60+
</Button>
61+
);
62+
}
63+
}
6164
];
6265

66+
const deleteState = selectedId => {
67+
// get the current focused component
68+
// remove the state that the button is clicked
69+
// send a dispatch to rerender the table
70+
const currentId = state.canvasFocus.componentId;
71+
const currentComponent = state.components[currentId - 1];
72+
73+
const filtered = currentComponent.stateProps.filter(
74+
element => element.id !== selectedId
75+
);
76+
dispatch({
77+
type: 'DELETE STATE',
78+
payload: { stateProps: filtered, rowId: selectedId }
79+
});
80+
};
81+
82+
useEffect(() => {
83+
setGridColumns(columnTabs);
84+
}, [props.isThemeLight]);
85+
86+
const { selectHandler }: StatePropsPanelProps = props;
87+
88+
// the delete button needs to be updated to remove
89+
// the states from the current focused component
90+
useEffect(() => {
91+
if (props.canDeleteState) {
92+
setGridColumns(columnTabs);
93+
} else {
94+
setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
95+
}
96+
}, [state.canvasFocus.componentId]);
6397

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];
98+
// when we switch between tabs in our modal or focus of our current
99+
// component, we need to update the states displayed in our table
100+
// we also need to update the table when the state is changed by
101+
// deleting and adding component state
102+
// useEffect(() => {
103+
// // rows to show are either from current component or from a given provider
104+
// let rows = [];
105+
// if (!props.providerId) {
106+
// const currentId = state.canvasFocus.componentId;
107+
// const currentComponent = state.components[currentId - 1];
108+
// rows = currentComponent.stateProps.slice();
109+
// } else {
110+
// const providerComponent = state.components[props.providerId - 1];
111+
// // changed to get whole object
112+
// if (props.displayObject) {
113+
// const displayObject = props.displayObject;
114+
// // format for DataGrid
115+
// let id = 1;
116+
// for (const key in displayObject) {
117+
// // if key is a number make it a string with brackets aroung number
118+
// rows.push({
119+
// id: id++,
120+
// key: isNaN(key) ? key : '[' + key + ']',
121+
// value: displayObject[key],
122+
// type: typeof displayObject[key]
123+
// });
124+
// }
125+
// } else {
126+
// rows = providerComponent.stateProps.slice();
127+
// }
128+
// }
129+
// }, [props.providerId, state]);
70130

71131
// rows to show are either from current component or from a given provider
72132
let rows = [];
73133
if (!props.providerId) {
134+
const currentId = state.canvasFocus.componentId;
135+
const currentComponent = state.components[currentId - 1];
74136
rows = currentComponent.stateProps.slice();
75137
} else {
76138
const providerComponent = state.components[props.providerId - 1];
@@ -84,74 +146,32 @@ const deleteState = (selectedId) => {
84146
rows.push({ id: id++, key: ( isNaN(key) ? key : '[' + key + ']' ), value: displayObject[key], type: typeof(displayObject[key])});
85147
}
86148
} else {
87-
rows = providerComponent.stateProps.slice();
149+
rows = providerComponent.stateProps.slice();
88150
}
89151
}
90152

91-
const filtered = currentComponent.stateProps.filter(element => element.id !== selectedId);
92-
dispatch({
93-
type: 'DELETE STATE',
94-
payload: {stateProps: filtered, rowId: selectedId}
95-
});
96-
}
97153

98154

99-
useEffect(() => {
100-
setGridColumns(columnTabs);
101-
}, [props.isThemeLight])
102-
103-
104-
const { selectHandler } : StatePropsPanelProps = props;
105-
106-
107-
// the delete button needs to be updated to remove
108-
// the states from the current focused component
109-
useEffect(() => {
110-
if(props.canDeleteState) {
111-
setGridColumns(columnTabs);
112-
}
113-
else {
114-
setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
115-
}
116-
}, [state.canvasFocus.componentId]);
117-
118-
// when we switch between tabs in our modal or focus of our current
119-
// component, we need to update the states displayed in our table
120-
// we also need to update the table when the state is changed by
121-
// deleting and adding component state
122-
useEffect(() => {
123-
if (!props.providerId) {
124-
const currentId = state.canvasFocus.componentId;
125-
const currentComponent = state.components[currentId - 1];
126-
setRows(currentComponent.stateProps.slice());
127-
} else {
128-
const providerComponent = state.components[props.providerId - 1];
129-
setRows(providerComponent.stateProps.slice());
130-
}
131-
}, [props.providerId, state]);
132-
133155
return (
134156
<div className={'state-prop-grid'}>
135157
<DataGrid
136158
rows={rows}
137159
columns={gridColumns}
138160
pageSize={5}
139161
editRowsModel={editRowsModel}
140-
onRowClick = {selectHandler}
162+
onRowClick={selectHandler}
141163
className={props.isThemeLight ? classes.themeLight : classes.themeDark}
142164
/>
143165
</div>
144166
);
145167
};
146168

147-
148-
149169
const useStyles = makeStyles({
150170
themeLight: {
151171
color: 'rgba(0,0,0,0.54)',
152172
'& .MuiTablePagination-root': {
153173
color: 'rbga(0,0,0,0.54)'
154-
},
174+
}
155175
},
156176
themeDark: {
157177
color: 'white',

‎app/src/containers/CustomizationPanel.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,24 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
228228

229229
const updateAttributeWithState = (attributeName, componentProviderId, statePropsId, statePropsRow, stateKey='') => {
230230
const newInput = statePropsRow.value;
231+
232+
// get the stateProps of the componentProvider
233+
const currentComponent = state.components[state.canvasFocus.componentId - 1];
234+
const providerComponent = state.components[componentProviderId - 1];
235+
const providerStates = providerComponent.stateProps;
236+
let newContextObj = {...currentComponent.useContext};
237+
238+
if(!newContextObj) {
239+
newContextObj = {};
240+
}
241+
242+
if (!newContextObj[componentProviderId]) {
243+
newContextObj[componentProviderId] = {statesFromProvider : new Set()};
244+
}
245+
246+
newContextObj[componentProviderId].statesFromProvider.add(statePropsId);
247+
248+
231249

232250
if (attributeName === 'compText') {
233251
newContextObj[componentProviderId].compText = statePropsId;

‎app/src/helperFunctions/generateCode.ts‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -262,25 +262,25 @@ const generateUnformattedCode = (
262262
}
263263
}
264264

265-
// if (currComponent.useContext) {
266-
// for (const providerId of Object.keys(currComponent.useContext)) {
267-
// const statesFromProvider = currComponent.useContext[parseInt(providerId)].statesFromProvider; //{1: {Set, compLink, compText}, 2 : {}...}
268-
// const providerComponent = components[parseInt(providerId) - 1];
269-
// providers += 'const ' + providerComponent.name.toLowerCase() + 'Context = useContext(' + providerComponent.name + 'Context);\n \t\t' ;
265+
if (currComponent.useContext) {
266+
for (const providerId of Object.keys(currComponent.useContext)) {
267+
const statesFromProvider = currComponent.useContext[parseInt(providerId)].statesFromProvider; //{1: {Set, compLink, compText}, 2 : {}...}
268+
const providerComponent = components[parseInt(providerId) - 1];
269+
providers += 'const ' + providerComponent.name.toLowerCase() + 'Context = useContext(' + providerComponent.name + 'Context);\n \t\t' ;
270270

271-
// for (let i = 0; i < providerComponent.stateProps.length; i++) {
272-
// if(statesFromProvider.has(providerComponent.stateProps[i].id)) {
273-
// context +=
271+
for (let i = 0; i < providerComponent.stateProps.length; i++) {
272+
if(statesFromProvider.has(providerComponent.stateProps[i].id)) {
273+
context +=
274274

275-
if (currentComponent.useContext) {
275+
// if (currComponent.useContext) {
276276

277-
for (const providerId of Object.keys(currentComponent.useContext)) {
278-
const attributesAndStateIds = currentComponent.useContext[String(providerId)]; //currently just from App
279-
const providerComponent = components[providerId - 1];
280-
providers += 'const ' + providerComponent.name.toLowerCase() + 'Context = useContext(' + providerComponent.name + 'Context);\n';
277+
// for (const providerId of Object.keys(currComponent.useContext)) {
278+
// const attributesAndStateIds = currComponent.useContext[String(providerId)]; //currently just from App
279+
// const providerComponent = components[providerId - 1];
280+
// providers += 'const ' + providerComponent.name.toLowerCase() + 'Context = useContext(' + providerComponent.name + 'Context);\n';
281281

282-
for (const stateId of Object.values(attributesAndStateIds)) {
283-
context +=
282+
// for (const stateId of Object.values(attributesAndStateIds)) {
283+
// context +=
284284

285285
'const ' +
286286
providerComponent.stateProps[i].key +
@@ -293,7 +293,6 @@ const generateUnformattedCode = (
293293
}
294294
}
295295
}
296-
297296
// create final component code. component code differs between classic react, next.js, gatsby.js
298297
// classic react code
299298
if (projectType === 'Classic React') {

0 commit comments

Comments
 (0)