Skip to content

Commit f7e5c46

Browse files
GarrettHutsonGarrettHutson
authored
Merge pull request #12 from oslabs-beta/garrett/allstate
fixes the focus issue
2 parents c84efb5 + ce2eba0 commit f7e5c46

File tree

12 files changed

+68
-46
lines changed

12 files changed

+68
-46
lines changed

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,15 +82,16 @@ function Canvas(props): JSX.Element {
8282
);
8383

8484
// changes focus of the canvas to a new component / child
85-
// const changeFocus = (componentId?: number, childId?: number | null) => {
86-
// dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
87-
// };
85+
const changeFocusFunction = (componentId?: number, childId?: number | null) => {
86+
dispatch(changeFocus({ componentId, childId}));
87+
88+
// dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
89+
};
8890
// onClickHandler is responsible for changing the focused component and child component
8991
function onClickHandler(event) {
9092
event.stopPropagation();
91-
// note: a null value for the child id means that we are focusing on the top-level component rather than any child
92-
dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
93-
};
93+
changeFocusFunction(state.canvasFocus.componentId,null);
94+
}
9495

9596
// stores a snapshot of state into the past array for UNDO. snapShotFunc is also invoked for nestable elements in DirectChildHTMLNestable.tsx
9697
const snapShotFunc = () => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const DemoRender = (): JSX.Element => {
6868
return el.name.toLowerCase() === component.toLowerCase();
6969
}).id;
7070
componentId &&
71-
dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
71+
dispatch(changeFocus({ componentId, childId: null}));
7272
// dispatch({
7373
// type: 'CHANGE FOCUS',
7474
// payload: { componentId, childId: null }

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,18 @@ function DirectChildComponent({
3939
isDragging: !!monitor.isDragging()
4040
})
4141
});
42-
// const changeFocus = (componentId: number, childId: number | null) => {
42+
const changeFocusFunction = (componentId: number, childId: number | null) => {
43+
dispatch(changeFocus({ componentId, childId}));
44+
4345
// dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
44-
// };
46+
};
4547

4648
// onClickHandler is responsible for changing the focused component and child component
4749
function onClickHandler(event) {
4850
event.stopPropagation();
49-
// changeFocus(state.canvasFocus.componentId, childId);
50-
dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
51+
changeFocusFunction(state.canvasFocus.componentId, childId);
5152
}
53+
// dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
5254
// combine all styles so that higher priority style specifications overrule lower priority style specifications
5355
// priority order is 1) style directly set for this child (style), 2) style of the referenced component, and 3) default styling
5456
const interactiveStyle = {

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,16 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
3737
})
3838
});
3939

40-
// const changeFocus = (componentId: number, childId: number | null) => {
41-
// dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
42-
// };
40+
const changeFocusFunction = (componentId: number, childId: number | null) => {
41+
// dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
42+
dispatch(changeFocus({ componentId, childId}));
43+
44+
};
4345

4446
// onClickHandler is responsible for changing the focused component and child component
4547
function onClickHandler(event) {
4648
event.stopPropagation();
47-
dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
49+
changeFocusFunction(state.canvasFocus.componentId, childId)
4850
}
4951

5052
// combine all styles so that higher priority style specifications overrule lower priority style specifications

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -131,15 +131,17 @@ function DirectChildHTMLNestable({
131131
}
132132
});
133133

134-
// const changeFocus = (componentId: number, childId: number | null) => {
135-
// dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
136-
// };
134+
const changeFocusFunction = (componentId: number, childId: number | null) => {
135+
// dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
136+
dispatch(changeFocus({ componentId, childId}));
137+
138+
};
137139

138140
// onClickHandler is responsible for changing the focused component and child component
139141
function onClickHandler(event) {
140142
event.stopPropagation();
141-
// changeFocus(state.canvasFocus.componentId, childId);
142-
dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
143+
changeFocusFunction(state.canvasFocus.componentId, childId);
144+
// dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
143145
}
144146

145147
// combine all styles so that higher priority style specifications overrule lower priority style specifications

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function IndirectChild({
2727
// type: 'CHANGE FOCUS',
2828
// payload: { componentId: linkId, childId: null }
2929
// });
30-
dispatch(changeFocus({ componentId: linkId, childId: state.canvasFocus.childId}));
30+
dispatch(changeFocus({ componentId: linkId, childId: null}));
3131
}
3232
let linkName: string;
3333
// if there's a link in this component, then include a link

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,20 +32,22 @@ function RouteLink({ childId, type, typeId, style }: ChildElement) {
3232
isDragging: !!monitor.isDragging()
3333
})
3434
});
35-
// const changeFocus = (componentId: number, childId: number | null) => {
36-
// dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
37-
// };
35+
const changeFocusFunction = (componentId: number, childId: number | null) => {
36+
// dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
37+
dispatch(changeFocus({ componentId, childId}));
38+
39+
};
3840
// onClickHandler is responsible for changing the focused component and child component
3941
function onClickHandlerFocus(event) {
4042
event.stopPropagation();
41-
// changeFocus(state.canvasFocus.componentId, childId);
42-
dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
43+
changeFocusFunction(state.canvasFocus.componentId, childId);
44+
// dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
4345
}
4446
// the route handler will change the focus of the canvas to the component referenced in the route link when the text is selected
4547
function onClickHandlerRoute(event) {
4648
event.stopPropagation();
47-
// changeFocus(typeId, null);
48-
dispatch(changeFocus({ componentId:typeId, childId: null}));
49+
changeFocusFunction(typeId, null);
50+
// dispatch(changeFocus({ componentId:typeId, childId: null}));
4951
}
5052
// combine all styles so that higher priority style specifications overrule lower priority style specifications
5153
// priority order is 1) style directly set for this child (style), 2) style for the routeLink component, and 3) default styling

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -101,15 +101,17 @@ function DirectChildHTMLNestable({
101101
}
102102
});
103103

104-
// const changeFocus = (componentId: number, childId: number | null) => {
105-
// dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
106-
// };
104+
const changeFocusFunction = (componentId: number, childId: number | null) => {
105+
// dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
106+
dispatch(changeFocus({ componentId, childId}));
107+
108+
};
107109

108110
// onClickHandler is responsible for changing the focused component and child component
109111
function onClickHandler(event) {
110112
event.stopPropagation();
111-
// changeFocus(state.canvasFocus.componentId, childId);
112-
dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
113+
changeFocusFunction(state.canvasFocus.componentId, childId);
114+
// dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
113115
}
114116

115117
// combine all styles so that higher priority style specifications overrule lower priority style specifications

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
2323
const classes = useStyles();
2424
// const [state, dispatch] = useContext(StateContext);
2525

26-
const state = useSelector(store => store.appState);
26+
const { state, contextParam } = useSelector((store) => ({
27+
state: store.appState,
28+
contextParam: store.contextSlice,
29+
}));
2730
const dispatch = useDispatch();
2831

2932

@@ -104,7 +107,7 @@ const dispatch = useDispatch();
104107
// type: 'ADD COMPONENT',
105108
// payload: { componentName: formattedName, root: isRoot }
106109
// });
107-
dispatch(addComponent({ componentName: formattedName, root: isRoot }));
110+
dispatch(addComponent({ componentName: formattedName, root: isRoot, contextParam: contextParam }));
108111
// reset root toggle back to default position
109112
setIsRoot(false);
110113
// reset name field

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const ComponentPanelItem: React.FC<{
4343
// when a component is clicked in the left panel, change canvas focus to that component
4444
const handleClick = () => {
4545
//LEGACY PD
46-
dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: null}));
46+
dispatch(changeFocus({ componentId: id, childId: null}));
4747

4848
};
4949
return (

‎app/src/helperFunctions/generateCode.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -380,7 +380,10 @@ const generateUnformattedCode = (
380380
//string to store all imports string for context
381381
let contextImports = '';
382382
// const { allContext } = store.getState().contextSlice;
383-
const { allContext } = contextParam;
383+
384+
const { allContext } = contextParam;
385+
386+
384387

385388
for (const context of allContext) {
386389
contextImports += `import ${context.name}Provider from '../contexts/${context.name}.js'\n`;

‎app/src/redux/reducers/slice/appStateSlice.ts

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -271,14 +271,16 @@ const appStateSlice = createSlice({
271271
// childId: null
272272
// };
273273
const nextComponentId = state.nextComponentId + 1;
274-
// newComponent.code = generateCode(
275-
// state.components,
276-
// newComponent.id,
277-
// [...state.rootComponents],
278-
// state.projectType,
279-
// state.HTMLTypes,
280-
// state.tailwind
281-
// );
274+
newComponent.code = generateCode(
275+
state.components,
276+
newComponent.id,
277+
[...state.rootComponents],
278+
state.projectType,
279+
state.HTMLTypes,
280+
state.tailwind,
281+
action.payload.contextParam
282+
283+
);
282284

283285
// return {
284286
// ...state,
@@ -424,6 +426,8 @@ const appStateSlice = createSlice({
424426
},
425427
changeFocus: (state, action) => {
426428
const { componentId, childId } = action.payload;
429+
console.log('componentId:', componentId)
430+
console.log('childId:', childId)
427431
if (childId < 1000) {
428432
// makes separators not selectable
429433
state.canvasFocus = { ...state.canvasFocus, componentId, childId };
@@ -448,7 +452,8 @@ const appStateSlice = createSlice({
448452
[...state.rootComponents],
449453
state.projectType,
450454
state.HTMLTypes,
451-
state.tailwind
455+
state.tailwind,
456+
action.payload.contextParam
452457
);
453458
return { ...state, components };
454459
},

0 commit comments

Comments
 (0)