can now nest functions. still working on full functionality

Author: mdunnmon

app/src/components/main/AddRoute.tsx

@@ -9,12 +9,13 @@ function AddRoute({
 }: AddRoutes) {
   // const [, dispatch] = useContext(StateContext);
 const dispatch = useDispatch();
-
+const contextParam = useSelector(store => store.contextSlice)
   const handleClick = (id) => {
     dispatch(addChild({
       type: 'HTML Element',
       typeId: -1,
-      childId: id // this is the id of the parent to attach it to
+      childId: id, // this is the id of the parent to attach it to
+      contextParam: store.contextSlice
     }))
     // dispatch({
     //   type: 'ADD CHILD',

app/src/components/main/Canvas.tsx

@@ -10,7 +10,7 @@ import Arrow from './Arrow';
 import { getRowsStateFromCache } from '@mui/x-data-grid/hooks/features/rows/gridRowsUtils';
 // Redux Toolkit test
 import { useDispatch, useSelector } from 'react-redux';
-import { changeFocus, addChild,snapShotAction } from '../../redux/reducers/slice/appStateSlice';
+import { changeFocus, addChild, snapShotAction } from '../../redux/reducers/slice/appStateSlice';
 
 function Canvas(props): JSX.Element {
   // const [state, dispatch] = useContext(StateContext);

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -14,7 +14,7 @@ import AddRoute from './AddRoute';
 import AddLink from './AddLink';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { changeFocus, changePosition,addChild } from '../../redux/reducers/slice/appStateSlice';
+import { changeFocus, changePosition, addChild, snapShotAction } from '../../redux/reducers/slice/appStateSlice';
 
 import { styleContext } from '../../containers/AppContainer';
 
@@ -30,7 +30,11 @@ function DirectChildHTMLNestable({
   // const [state, dispatch] = useContext(StateContext);
   const { isThemeLight } = useContext(styleContext);
   const isDarkMode = useSelector(store => store.darkMode.isDarkMode);
-  const state = useSelector(store => store.appState);
+  // const state = useSelector(store => store.appState);
+  const { state, contextParam } = useSelector((store) => ({
+    state: store.appState,
+    contextParam: store.contextSlice,
+  }));
   const dispatch = useDispatch();
   const ref = useRef(null);
   // const [linkDisplayed, setLinkDisplayed] = useState('');
@@ -41,9 +45,9 @@ function DirectChildHTMLNestable({
     const deepCopiedState = JSON.parse(JSON.stringify(state));
     const focusIndex = state.canvasFocus.componentId - 1;
     //pushes the last user action on the canvas into the past array of Component
-    state.components[focusIndex].past.push(
-      deepCopiedState.components[focusIndex].children
-    );
+    // state.components[focusIndex].past.push(
+    //   deepCopiedState.components[focusIndex].children
+    dispatch(snapShotAction({focusIndex: focusIndex, deepCopiedState: deepCopiedState}))
   };
 
   // find the HTML element corresponding with this instance of an HTML element
@@ -96,7 +100,8 @@ function DirectChildHTMLNestable({
           dispatch(addChild({
             type: item.instanceType,
             typeId: item.instanceTypeId,
-            childId: childId
+            childId: childId,
+            contextParam: contextParam
           }))
           // dispatch({
           //   type: 'ADD CHILD',

app/src/components/main/RouteLink.tsx

@@ -46,14 +46,8 @@ function RouteLink({ childId, type, typeId, style }: ChildElement) {
   //   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();
-<<<<<<< HEAD
-    // changeFocus(typeId, null);
-    // dispatch(changeFocus({ componentId:typeId, childId: null}));
-    dispatch(changeFocus(typeId));
-=======
     changeFocusFunction(typeId, null);
     // dispatch(changeFocus({ componentId:typeId, childId: null}));
->>>>>>> allstate
   }
   // 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

app/src/components/main/SeparatorChild.tsx

@@ -10,7 +10,7 @@ import validateNewParent from '../../helperFunctions/changePositionValidation'
 import componentNest from '../../helperFunctions/componentNestValidation'
 import { useDispatch, useSelector } from 'react-redux';
 
-import { changeFocus, changePosition,addChild } from '../../redux/reducers/slice/appStateSlice';
+import { changeFocus, changePosition, addChild } from '../../redux/reducers/slice/appStateSlice';
 
 
 
@@ -22,7 +22,11 @@ function DirectChildHTMLNestable({
   children
 }: ChildElement) {
   // const [state, dispatch] = useContext(StateContext);
-  const state = useSelector(store => store.appState);
+  // const state = useSelector(store => store.appState);
+  const { state, contextParam } = useSelector((store) => ({
+    state: store.appState,
+    contextParam: store.contextSlice,
+  }));
   const dispatch = useDispatch();
   const ref = useRef(null);
 
@@ -67,6 +71,7 @@ function DirectChildHTMLNestable({
           type: item.instanceType,
           typeId: item.instanceTypeId,
           childId: childId,
+          contextParam: contextParam
         }))
           // dispatch({
           //   type: 'ADD CHILD',
@@ -110,14 +115,8 @@ function DirectChildHTMLNestable({
   // onClickHandler is responsible for changing the focused component and child component
   function onClickHandler(event) {
     event.stopPropagation();
-<<<<<<< HEAD
-    // changeFocus(state.canvasFocus.componentId, childId);
-    // dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
-    dispatch(changeFocus(state.canvasFocus.componentId));
-=======
     changeFocusFunction(state.canvasFocus.componentId, childId);
     // dispatch(changeFocus({ componentId: state.canvasFocus.componentId, childId: state.canvasFocus.childId}));
->>>>>>> allstate
   }
 
   // combine all styles so that higher priority style specifications overrule lower priority style specifications

app/src/components/right/ComponentPanel.tsx

@@ -107,15 +107,7 @@ const dispatch = useDispatch();
     //   type: 'ADD COMPONENT',
     //   payload: { componentName: formattedName, root: isRoot }
     // });
-<<<<<<< HEAD
-    
-    // dispatch(addComponent( { componentName: formattedName, root: isRoot }));
-    const component = addComponent({ componentName: formattedName, root: isRoot });
-    dispatch(component);
-    console.log('component:', component);
-=======
     dispatch(addComponent({ componentName: formattedName, root: isRoot, contextParam: contextParam }));
->>>>>>> allstate
     // reset root toggle back to default position
     setIsRoot(false);
     // reset name field

app/src/containers/CustomizationPanel.tsx

@@ -307,11 +307,11 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
 
   const deleteEvent = selectedEvent => {
     dispatch(deleteEventAction({ event: selectedEvent }))
-  //   dispatch({
-  //     type: 'DELETE EVENT',
-  //     payload: { event: selectedEvent }
-  //   });
-  // };
+    // dispatch({
+    //   type: 'DELETE EVENT',
+    //   payload: { event: selectedEvent }
+    // });
+  };
 
 
   const handleSave = (tailwind): Object => {
@@ -1007,5 +1007,5 @@ const useStyles = makeStyles({
     color: '#fff'
   }
 });
-};
+
 export default CustomizationPanel;