Merge pull request #12 from oslabs-beta/garrett/allstate

fixes the focus issue
open-source-labs · Mar 15, 2023 · f7e5c46 · f7e5c46
2 parents c84efb5 + ce2eba0
commit f7e5c46
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 46 deletions.
diff --git a/app/src/components/main/Canvas.tsx b/app/src/components/main/Canvas.tsx
@@ -82,15 +82,16 @@ function Canvas(props): JSX.Element {
   );
 
   // changes focus of the canvas to a new component / child
-  // const changeFocus = (componentId?: number, childId?: number | null) => {
-  //   dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
-  // };
+  const changeFocusFunction = (componentId?: number, childId?: number | null) => {
+    dispatch(changeFocus({ componentId, childId}));
+
+    // dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
+  };
   // onClickHandler is responsible for changing the focused component and child component
   function onClickHandler(event) {
     event.stopPropagation();
-    // note: a null value for the child id means that we are focusing on the top-level component rather than any child
-    dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
-  };
+    changeFocusFunction(state.canvasFocus.componentId,null);
+  }
 
   // stores a snapshot of state into the past array for UNDO. snapShotFunc is also invoked for nestable elements in DirectChildHTMLNestable.tsx
   const snapShotFunc = () => {

diff --git a/app/src/components/main/DemoRender.tsx b/app/src/components/main/DemoRender.tsx
@@ -68,7 +68,7 @@ const DemoRender = (): JSX.Element => {
         return el.name.toLowerCase() === component.toLowerCase();
       }).id;
     componentId &&
-    dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
+    dispatch(changeFocus({ componentId, childId: null}));
       // dispatch({
       //   type: 'CHANGE FOCUS',
       //   payload: { componentId, childId: null }

diff --git a/app/src/components/main/DirectChildComponent.tsx b/app/src/components/main/DirectChildComponent.tsx
@@ -39,16 +39,18 @@ function DirectChildComponent({
       isDragging: !!monitor.isDragging()
     })
   });
-  // const changeFocus = (componentId: number, childId: number | null) => {
+  const changeFocusFunction = (componentId: number, childId: number | null) => {
+    dispatch(changeFocus({ componentId, childId}));
+
     // dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
-  // };
+  };
 
   // onClickHandler is responsible for changing the focused component and child component
   function onClickHandler(event) {
     event.stopPropagation();
-    // changeFocus(state.canvasFocus.componentId, childId);
-    dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
+    changeFocusFunction(state.canvasFocus.componentId, childId);
   }
+   // dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
   // combine all styles so that higher priority style specifications overrule lower priority style specifications
   // priority order is 1) style directly set for this child (style), 2) style of the referenced component, and 3) default styling
   const interactiveStyle = {

diff --git a/app/src/components/main/DirectChildHTML.tsx b/app/src/components/main/DirectChildHTML.tsx
@@ -37,14 +37,16 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
     })
   });
 
-  // const changeFocus = (componentId: number, childId: number | null) => {
-  //   dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
-  // };
+  const changeFocusFunction = (componentId: number, childId: number | null) => {
+    // dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
+    dispatch(changeFocus({ componentId, childId}));
+
+  };
 
   // onClickHandler is responsible for changing the focused component and child component
   function onClickHandler(event) {
     event.stopPropagation();
-    dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
+    changeFocusFunction(state.canvasFocus.componentId, childId)
   }
 
   // combine all styles so that higher priority style specifications overrule lower priority style specifications

diff --git a/app/src/components/main/DirectChildHTMLNestable.tsx b/app/src/components/main/DirectChildHTMLNestable.tsx
@@ -131,15 +131,17 @@ function DirectChildHTMLNestable({
     }
   });
 
-  // const changeFocus = (componentId: number, childId: number | null) => {
-  //   dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
-  // };
+  const changeFocusFunction = (componentId: number, childId: number | null) => {
+    // dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
+    dispatch(changeFocus({ componentId, childId}));
+
+  };
 
   // onClickHandler is responsible for changing the focused component and child component
   function onClickHandler(event) {
     event.stopPropagation();
-    // changeFocus(state.canvasFocus.componentId, childId);
-    dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
+    changeFocusFunction(state.canvasFocus.componentId, childId);
+    // dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
   }
 
   // combine all styles so that higher priority style specifications overrule lower priority style specifications

diff --git a/app/src/components/main/IndirectChild.tsx b/app/src/components/main/IndirectChild.tsx
@@ -27,7 +27,7 @@ function IndirectChild({
     //   type: 'CHANGE FOCUS',
     //   payload: { componentId: linkId, childId: null }
     // });
-    dispatch(changeFocus({ componentId: linkId, childId: state.canvasFocus.childId}));
+    dispatch(changeFocus({ componentId: linkId, childId: null}));
   }
   let linkName: string;
   // if there's a link in this component, then include a link

diff --git a/app/src/components/main/RouteLink.tsx b/app/src/components/main/RouteLink.tsx
@@ -32,20 +32,22 @@ function RouteLink({ childId, type, typeId, style }: ChildElement) {
       isDragging: !!monitor.isDragging()
     })
   });
-  // const changeFocus = (componentId: number, childId: number | null) => {
-  //   dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
-  // };
+  const changeFocusFunction = (componentId: number, childId: number | null) => {
+    // dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
+    dispatch(changeFocus({ componentId, childId}));
+
+  };
   // onClickHandler is responsible for changing the focused component and child component
   function onClickHandlerFocus(event) {
     event.stopPropagation();
-    // changeFocus(state.canvasFocus.componentId, childId);
-    dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
+    changeFocusFunction(state.canvasFocus.componentId, childId);
+    // dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
   }
   //   the route handler will change the focus of the canvas to the component referenced in the route link when the text is selected
   function onClickHandlerRoute(event) {
     event.stopPropagation();
-    // changeFocus(typeId, null);
-    dispatch(changeFocus({ componentId:typeId, childId: null}));
+    changeFocusFunction(typeId, null);
+    // dispatch(changeFocus({ componentId:typeId, childId: null}));
   }
   // combine all styles so that higher priority style specifications overrule lower priority style specifications
   // priority order is 1) style directly set for this child (style), 2) style for the routeLink component, and 3) default styling

diff --git a/app/src/components/main/SeparatorChild.tsx b/app/src/components/main/SeparatorChild.tsx
@@ -101,15 +101,17 @@ function DirectChildHTMLNestable({
     }
   });
 
-  // const changeFocus = (componentId: number, childId: number | null) => {
-  //   dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
-  // };
+  const changeFocusFunction = (componentId: number, childId: number | null) => {
+    // dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
+    dispatch(changeFocus({ componentId, childId}));
+
+  };
 
   // onClickHandler is responsible for changing the focused component and child component
   function onClickHandler(event) {
     event.stopPropagation();
-    // changeFocus(state.canvasFocus.componentId, childId);
-    dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
+    changeFocusFunction(state.canvasFocus.componentId, childId);
+    // dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
   }
 
   // combine all styles so that higher priority style specifications overrule lower priority style specifications

diff --git a/app/src/components/right/ComponentPanel.tsx b/app/src/components/right/ComponentPanel.tsx
@@ -23,7 +23,10 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
   const classes = useStyles();
   // const [state, dispatch] = useContext(StateContext);
 
-const state = useSelector(store => store.appState);
+  const { state, contextParam } = useSelector((store) => ({
+    state: store.appState,
+    contextParam: store.contextSlice,
+  }));
 const dispatch = useDispatch();
 
 
@@ -104,7 +107,7 @@ const dispatch = useDispatch();
     //   type: 'ADD COMPONENT',
     //   payload: { componentName: formattedName, root: isRoot }
     // });
-    dispatch(addComponent({ componentName: formattedName, root: isRoot }));
+    dispatch(addComponent({ componentName: formattedName, root: isRoot, contextParam: contextParam }));
     // reset root toggle back to default position
     setIsRoot(false);
     // reset name field

diff --git a/app/src/components/right/ComponentPanelItem.tsx b/app/src/components/right/ComponentPanelItem.tsx
@@ -43,7 +43,7 @@ const ComponentPanelItem: React.FC<{
   // when a component is clicked in the left panel, change canvas focus to that component
   const handleClick = () => {
     //LEGACY PD
-    dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: null}));
+    dispatch(changeFocus({ componentId: id, childId: null}));
 
   };
   return (

diff --git a/app/src/helperFunctions/generateCode.ts b/app/src/helperFunctions/generateCode.ts
@@ -380,7 +380,10 @@ const generateUnformattedCode = (
     //string to store all imports string for context
     let contextImports = '';
     // const { allContext } = store.getState().contextSlice;
-    const { allContext } = contextParam;
+
+  const { allContext } = contextParam;
+
+
 
     for (const context of allContext) {
       contextImports += `import ${context.name}Provider from '../contexts/${context.name}.js'\n`;

diff --git a/app/src/redux/reducers/slice/appStateSlice.ts b/app/src/redux/reducers/slice/appStateSlice.ts
@@ -271,14 +271,16 @@ const appStateSlice = createSlice({
       //   childId: null
       // };
       const nextComponentId = state.nextComponentId + 1;
-      // newComponent.code = generateCode(
-      //   state.components,
-      //   newComponent.id,
-      //   [...state.rootComponents],
-      //   state.projectType,
-      //   state.HTMLTypes,
-      //   state.tailwind
-      // );
+      newComponent.code = generateCode(
+        state.components,
+        newComponent.id,
+        [...state.rootComponents],
+        state.projectType,
+        state.HTMLTypes,
+        state.tailwind,
+        action.payload.contextParam
+
+      );
 
       // return {
       //   ...state,
@@ -424,6 +426,8 @@ const appStateSlice = createSlice({
     },
     changeFocus: (state, action) => {
       const { componentId, childId } = action.payload;
+      console.log('componentId:', componentId)
+      console.log('childId:', childId)
       if (childId < 1000) {
         // makes separators not selectable
         state.canvasFocus = { ...state.canvasFocus, componentId, childId };
@@ -448,7 +452,8 @@ const appStateSlice = createSlice({
         [...state.rootComponents],
         state.projectType,
         state.HTMLTypes,
-        state.tailwind
+        state.tailwind,
+        action.payload.contextParam
       );
       return { ...state, components };
     },