Skip to content

Commit a6df67b

Browse files
mdunnmonmdunnmon
authored
Merge pull request #14 from oslabs-beta/mike/allstate
Added params to all generatecode and added params to dispatches
2 parents 18f1177 + e252420 commit a6df67b

15 files changed

+86
-37
lines changed

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,11 @@ import TablePassedInProps from "./TablePassedInProps";
2020

2121
const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
2222
// const [state, dispatch] = useContext(StateContext);
23-
const state = useSelector(store => store.appState);
23+
// const state = useSelector(store => store.appState);
24+
const { state, contextParam } = useSelector((store) => ({
25+
state: store.appState,
26+
contextParam: store.contextSlice,
27+
}));
2428
const dispatch = useDispatch();
2529
const classes = useStyles();
2630
const [inputKey, setInputKey] = useState("");
@@ -117,7 +121,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
117121
// type: 'ADD STATE',
118122
// payload: {newState: newState, setNewState: setNewState}
119123
// });
120-
dispatch(addState({newState: newState, setNewState: setNewState}))
124+
dispatch(addState({newState: newState, setNewState: setNewState, contextParam: contextParam}))
121125
setRows1([...rows1, newState])
122126
resetError();
123127
clearForm();

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ import { addPassedInProps } from '../../../../redux/reducers/slice/appStateSlice
1313

1414
const TableParentProps = props => {
1515
// const [state, dispatch] = useContext(StateContext);
16-
const state = useSelector(store => store.appState);
16+
// const state = useSelector(store => store.appState);
17+
const { state, contextParam } = useSelector((store) => ({
18+
state: store.appState,
19+
contextParam: store.contextSlice,
20+
}));
1721
const dispatch = useDispatch();
1822
const classes = useStyles();
1923
const currentId = state.canvasFocus.componentId;
@@ -76,7 +80,7 @@ const TableParentProps = props => {
7680
// type: 'ADD PASSEDINPROPS',
7781
// payload: { passedInProps: parentComponentProps, rowId: rowId, parentComponent: parentComponent }
7882
// });
79-
dispatch(addPassedInProps({ passedInProps: parentComponentProps, rowId: rowId, parentComponent: parentComponent}))
83+
dispatch(addPassedInProps({ passedInProps: parentComponentProps, rowId: rowId, parentComponent: parentComponent, contextParam: contextParam}))
8084
};
8185

8286
useEffect(() => {

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ import { deletePassedInProps } from '../../../../redux/reducers/slice/appStateSl
1414

1515
const TablePassedInProps = props => {
1616
// const [state, dispatch] = useContext(StateContext);
17-
const state = useSelector(store => store.appState);
17+
// const state = useSelector(store => store.appState);
18+
const { state, contextParam } = useSelector((store) => ({
19+
state: store.appState,
20+
contextParam: store.contextSlice,
21+
}));
1822
const dispatch = useDispatch();
1923
const classes = useStyles();
2024
const [editRowsModel] = useState<GridEditRowsModel>({});
@@ -79,7 +83,7 @@ const TablePassedInProps = props => {
7983
// type: 'DELETE PASSEDINPROPS',
8084
// payload: { rowId: rowId }
8185
// });
82-
dispatch(deletePassedInProps({rowId:rowId}))
86+
dispatch(deletePassedInProps({rowId:rowId, contextParam: contextParam}))
8387
};
8488

8589
useEffect(() => {

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ import { deletePassedInProps } from '../../../../redux/reducers/slice/appStateSl
1313

1414
const TableStateProps = props => {
1515
// const [state, dispatch] = useContext(StateContext);
16-
const state = useSelector(store => store.appState);
16+
// const state = useSelector(store => store.appState);
17+
const { state, contextParam } = useSelector((store) => ({
18+
state: store.appState,
19+
contextParam: store.contextSlice,
20+
}));
1721
const dispatch = useDispatch();
1822
const classes = useStyles();
1923
const [editRowsModel] = useState<GridEditRowsModel>({});
@@ -92,7 +96,7 @@ const TableStateProps = props => {
9296
// type: 'DELETE STATE',
9397
// payload: { stateProps: filtered, rowId: selectedId, otherId: otherId.id }
9498
// });
95-
dispatch(deletePassedInProps({stateProps: filtered, rowId: selectedId, otherId: otherId.id}))
99+
dispatch(deletePassedInProps({stateProps: filtered, rowId: selectedId, otherId: otherId.id, contextParam: contextParam}))
96100
};
97101

98102
useEffect(() => {

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,11 @@ const BottomTabs = (props): JSX.Element => {
2525
// state that controls which tab the user is on
2626
// const [state, dispatch] = useContext(StateContext); //deconstructing properties from Context interface?
2727
const dispatch = useDispatch();
28-
const state = useSelector(store => store.appState)
28+
// const state = useSelector(store => store.appState)
29+
const { state, contextParam } = useSelector((store) => ({
30+
state: store.appState,
31+
contextParam: store.contextSlice,
32+
}));
2933
const [tab, setTab] = useState(0);
3034
const classes = useStyles();
3135
const [theme, setTheme] = useState('solarized_light');
@@ -39,7 +43,7 @@ const BottomTabs = (props): JSX.Element => {
3943
// When a user changes the project type, the code of all components is rerendered
4044
const handleProjectChange = event => {
4145
const projectType = event.target.value;
42-
dispatch(changeProjectType({projectType}))
46+
dispatch(changeProjectType({projectType, contextParam: contextParam}))
4347
// dispatch({ type: 'CHANGE PROJECT TYPE', payload: { projectType } });
4448
};
4549
const { components, HTMLTypes } = state;

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ import { deleteState } from '../../redux/reducers/slice/appStateSlice';
1414

1515
const TableStateProps = props => {
1616
// const [state, dispatch] = useContext(StateContext);
17-
const state = useSelector(store => store.appState);
17+
// const state = useSelector(store => store.appState);
18+
const { state, contextParam } = useSelector((store) => ({
19+
state: store.appState,
20+
contextParam: store.contextSlice,
21+
}));
1822
const dispatch = useDispatch();
1923
const classes = useStyles();
2024
const [editRowsModel] = useState<GridEditRowsModel>({});
@@ -76,7 +80,7 @@ const TableStateProps = props => {
7680
// type: 'DELETE STATE',
7781
// payload: { stateProps: filtered, rowId: selectedId }
7882
// });
79-
dispatch(deleteState({stateProps: filtered, rowId: selectedId}))
83+
dispatch(deleteState({stateProps: filtered, rowId: selectedId, contextParam: contextParam}))
8084
};
8185

8286
useEffect(() => {

‎app/src/components/left/DragDropPanel.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,13 @@ const DragDropPanel = (props): JSX.Element => {
2424
// const { isThemeLight } = props;
2525
const isDarkMode = useSelector(store => store.darkMode.isDarkMode);
2626
const dispatch = useDispatch();
27-
const state = useSelector(store => store.appState)
27+
// const state = useSelector(store => store.appState)
28+
const { state, contextParam } = useSelector((store) => ({
29+
state: store.appState,
30+
contextParam: store.contextSlice,
31+
}));
2832
const handleDelete = (id: number): void => {
29-
dispatch(deleteElement(id))
33+
dispatch(deleteElement(id, contextParam))
3034
// dispatch({
3135
// type: 'DELETE ELEMENT',
3236
// payload: id

‎app/src/components/main/AddLink.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ import { updateAttributes } from '../../redux/reducers/slice/appStateSlice';
1414
function AddLink({ id, onClickHandler, linkDisplayed }) {
1515
const { isThemeLight } = useContext(styleContext);
1616
// const [state, dispatch] = useContext(StateContext);
17-
const state = useSelector(store => store.appState);
17+
// const state = useSelector(store => store.appState);
18+
const { state, contextParam } = useSelector((store) => ({
19+
state: store.appState,
20+
contextParam: store.contextSlice,
21+
}));
1822
const dispatch = useDispatch();
1923
const [link, setLink] = useState('')
2024

@@ -39,7 +43,7 @@ function AddLink({ id, onClickHandler, linkDisplayed }) {
3943
state.childId = id;
4044
state.attributes.compLink = event.target.value;
4145
// dispatch({type: 'UPDATE ATTRIBUTES', payload: state})
42-
dispatch(updateAttributes(state))
46+
dispatch(updateAttributes(state, contextParam))
4347
return true;
4448
}
4549
});

‎app/src/components/main/DeleteButton.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@ import React, { useRef, useState, useContext, useEffect } from 'react';
22
import { DeleteButtons } from '../../interfaces/Interfaces';
33
import Modal from '@mui/material/Modal';
44
import StateContext from '../../context/context';
5-
import { useDispatch } from 'react-redux';
5+
import { useDispatch, useSelector } from 'react-redux';
66
import { deleteChild } from '../../redux/reducers/slice/appStateSlice';
77

88
function DeleteButton({ id, name }: DeleteButtons) {
99
// const [state, dispatch] = useContext(StateContext);
10+
const { state, contextParam } = useSelector((store) => ({
11+
state: store.appState,
12+
contextParam: store.contextSlice,
13+
}));
1014

1115
const dispatch = useDispatch();
1216

@@ -15,7 +19,7 @@ function DeleteButton({ id, name }: DeleteButtons) {
1519
// type: 'DELETE CHILD',
1620
// payload: { id }
1721
// });
18-
dispatch(deleteChild({ id }));
22+
dispatch(deleteChild({ id, contextParam }));
1923
};
2024

2125
return (

‎app/src/components/main/DirectChildHTMLNestable.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ function DirectChildHTMLNestable({
124124
// newParentChildId: childId
125125
// }
126126
// });
127-
dispatch(changePosition({currentChildId: item.childId, newParentChildId: childId}))
127+
dispatch(changePosition({currentChildId: item.childId, newParentChildId: childId, contextParam: contextParam}))
128128
}
129129
}
130130
},

‎app/src/components/main/SeparatorChild.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ function DirectChildHTMLNestable({
9494
// newParentChildId: childId
9595
// }
9696
// });
97-
dispatch(changePosition({currentChildId: item.childId, newParentChildId: childId}))
97+
dispatch(changePosition({currentChildId: item.childId, newParentChildId: childId, contextParam: contextParam}))
9898
}
9999
}
100100
},

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,11 @@ declare module '@mui/styles/defaultTheme' {
4040

4141
const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
4242
// const [state, dispatch] = useContext(StateContext);
43-
const state = useSelector(store => store.appState);
43+
// const state = useSelector(store => store.appState);
44+
const { state, contextParam } = useSelector((store) => ({
45+
state: store.appState,
46+
contextParam: store.contextSlice,
47+
}));
4448
const dispatch = useDispatch();
4549
const classes = useStyles();
4650
const [inputKey, setInputKey] = useState("");
@@ -102,7 +106,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
102106
// type: 'ADD STATE',
103107
// payload: {newState: newState}
104108
// });
105-
dispatch(addState({newState: newState}))
109+
dispatch(addState({newState: newState, contextParam: contextParam}))
106110
resetError();
107111
clearForm();
108112
};

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ import { deletePassedInProps } from '../../redux/reducers/slice/appStateSlice';
1414

1515
const TableStateProps = props => {
1616
// const [state, dispatch] = useContext(StateContext);
17-
const state = useSelector(store => store.appState);
17+
// const state = useSelector(store => store.appState);
18+
const { state, contextParam } = useSelector((store) => ({
19+
state: store.appState,
20+
contextParam: store.contextSlice,
21+
}));
1822
const dispatch = useDispatch();
1923
const classes = useStyles();
2024
const [editRowsModel] = useState<GridEditRowsModel>({});
@@ -76,7 +80,7 @@ const TableStateProps = props => {
7680
// type: 'DELETE STATE',
7781
// payload: { stateProps: filtered, rowId: selectedId }
7882
// });
79-
dispatch(deletePassedInProps({stateProps: filtered, rowId: selectedId}));
83+
dispatch(deletePassedInProps({stateProps: filtered, rowId: selectedId, contextParam: contextParam}));
8084
};
8185

8286
useEffect(() => {

‎app/src/containers/CustomizationPanel.tsx

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,11 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
3939
const classes = useStyles(isThemeLight);
4040
// const [state, dispatch] = useContext(StateContext);
4141
const dispatch = useDispatch();
42-
const state = useSelector(store => store.appState)
42+
// const state = useSelector(store => store.appState)
43+
const { state, contextParam } = useSelector((store) => ({
44+
state: store.appState,
45+
contextParam: store.contextSlice,
46+
}));
4347
const [displayMode, setDisplayMode] = useState('');
4448
const [flexDir, setFlexDir] = useState('');
4549
const [flexJustify, setFlexJustify] = useState('');
@@ -306,7 +310,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
306310
];
307311

308312
const deleteEvent = selectedEvent => {
309-
dispatch(deleteEventAction({ event: selectedEvent }))
313+
dispatch(deleteEventAction({ event: selectedEvent, contextParam: contextParam }))
310314
// dispatch({
311315
// type: 'DELETE EVENT',
312316
// payload: { event: selectedEvent }
@@ -322,13 +326,13 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
322326
// payload: false
323327
// })
324328
}
325-
dispatch(updateStateUsed({ stateUsedObj: stateUsedObj }))
329+
dispatch(updateStateUsed({ stateUsedObj: stateUsedObj, contextParam: contextParam }))
326330
// dispatch({
327331
// type: 'UPDATE STATE USED',
328332
// payload: { stateUsedObj: stateUsedObj }
329333
// })
330334

331-
dispatch(updateUseContext({ useContextObj: useContextObj }))
335+
dispatch(updateUseContext({ useContextObj: useContextObj, contextParam: contextParam }))
332336
// dispatch({
333337
// type: 'UPDATE USE CONTEXT',
334338
// payload: { useContextObj: useContextObj }
@@ -342,7 +346,7 @@ dispatch(updateUseContext({ useContextObj: useContextObj }))
342346
if (compWidth !== '') styleObj.width = compWidth;
343347
if (compHeight !== '') styleObj.height = compHeight;
344348
if (BGColor !== '') styleObj.backgroundColor = BGColor;
345-
dispatch(updateCss({ style: styleObj }))
349+
dispatch(updateCss({ style: styleObj, contextParam: contextParam }))
346350
// dispatch({
347351
// type: 'UPDATE CSS',
348352
// payload: { style: styleObj }
@@ -356,11 +360,11 @@ dispatch(updateUseContext({ useContextObj: useContextObj }))
356360
// type: 'UPDATE ATTRIBUTES',
357361
// payload: { attributes: attributesObj }
358362
// });
359-
dispatch(updateAttributes({attributes: attributesObj}))
363+
dispatch(updateAttributes({attributes: attributesObj, contextParam: contextParam}))
360364

361365
const eventsObj: any = {};
362366
if (eventAll[0] !== '') eventsObj[eventAll[0]] = eventAll[1];
363-
dispatch(updateEvents({ events: eventsObj }))
367+
dispatch(updateEvents({ events: eventsObj, contextParam: contextParam }))
364368

365369
// dispatch({
366370
// type: 'UPDATE EVENTS',
@@ -380,16 +384,16 @@ dispatch(updateUseContext({ useContextObj: useContextObj }))
380384
// UNDO/REDO functionality--onClick these functions will be invoked.
381385
const handleUndo = () => {
382386
// dispatch({ type: 'UNDO', payload: {} });
383-
dispatch(undo({}));
387+
dispatch(undo({contextParam}));
384388
};
385389
const handleRedo = () => {
386390
// dispatch({ type: 'REDO', payload: {} });
387-
dispatch(redo({}));
391+
dispatch(redo({contextParam}));
388392
};
389393
// placeholder for handling deleting instance
390394
const handleDelete = () => {
391395
// dispatch({ type: 'DELETE CHILD', payload: {} });
392-
dispatch(deleteChild({}));
396+
dispatch(deleteChild({contextParam}));
393397
};
394398
const handlePageDelete = id => () => {
395399
// TODO: return modal
@@ -416,7 +420,7 @@ dispatch(updateUseContext({ useContextObj: useContextObj }))
416420
// Reset state for project to initial state
417421
const handleDeleteReusableComponent = (): void => {
418422
closeModal();
419-
dispatch( deleteReusableComponent({}))
423+
dispatch( deleteReusableComponent({contextParam: contextParam}))
420424
// dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
421425
};
422426
// set modal options

‎app/src/containers/LeftContainer.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,20 @@ import ComponentDrag from '../components/right/ComponentDrag';
44
import DragDropPanel from '../components/left/DragDropPanel';
55
import StateContext from '../context/context';
66
import { styleContext } from './AppContainer';
7-
import { useDispatch } from 'react-redux';
7+
import { useDispatch, useSelector } from 'react-redux';
88
import { deleteChild } from '../redux/reducers/slice/appStateSlice';
99

1010

1111
// Left-hand portion of the app, where component options are displayed
1212
const LeftContainer = (props): JSX.Element => {
1313
const { style } = useContext(styleContext);
1414
// const [state, dispatch] = useContext(StateContext);
15+
const contextParam = useSelector(store => store.contextSlice)
1516
const dispatch = useDispatch();
1617

1718
const handleDelete = () => {
1819
// dispatch({ type: 'DELETE CHILD', payload: {} });
19-
dispatch(deleteChild({}))
20+
dispatch(deleteChild({contextParam}))
2021
};
2122
const keyBindedFunc = useCallback(e => {
2223
if (e.key === 'Backspace' && e.target.tagName !== "TEXTAREA" && e.target.tagName !== "INPUT") handleDelete();

0 commit comments

Comments
 (0)