fixes snapshotfunc in canvas

Author: GarrettHutson

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 } from '../../redux/reducers/slice/appStateSlice';
+import { changeFocus, addChild,snapShotAction } from '../../redux/reducers/slice/appStateSlice';
 
 function Canvas(props): JSX.Element {
   // const [state, dispatch] = useContext(StateContext);
@@ -89,24 +89,34 @@ function Canvas(props): JSX.Element {
   // stores a snapshot of state into the past array for UNDO. snapShotFunc is also invoked for nestable elements in DirectChildHTMLNestable.tsx
   const snapShotFunc = () => {
     // make a deep clone of state
+
       const deepCopiedState = JSON.parse(JSON.stringify(state));
+ 
       const focusIndex = state.canvasFocus.componentId - 1;
+     console.log('about to dispatch snapshot')
       //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}))
+    console.log('left snapshot dispatch moving on ')
   };
 
   // This hook will allow the user to drag items from the left panel on to the canvas
   const [{ isOver }, drop] = useDrop({
     accept: ItemTypes.INSTANCE,
     drop: (item: DragItem, monitor: DropTargetMonitor) => {
       const didDrop = monitor.didDrop();
+    
       // takes a snapshot of state to be used in UNDO and REDO cases
+      console.log('about to snapshot')
       snapShotFunc();
+      console.log('achieved snopshopt')
       // returns false for direct drop target
+      console.log('diddrop', didDrop)
       if (didDrop) {
         return;
       }
-      console.log(currentComponent)
+  
       // if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
       if (item.newInstance && item.instanceType !== "Component") {
    dispatch(addChild({

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

@@ -398,14 +398,14 @@ const appStateSlice = createSlice({
         );
       components[canvasFocus.componentId - 1].children = addChildArray;
 
-      parentComponent.code = generateCode(
-        components,
-        parentComponentId,
-        [...state.rootComponents],
-        state.projectType,
-        state.HTMLTypes,
-        state.tailwind
-      );
+      // parentComponent.code = generateCode(
+      //   components,
+      //   parentComponentId,
+      //   [...state.rootComponents],
+      //   state.projectType,
+      //   state.HTMLTypes,
+      //   state.tailwind
+      // );
 
       return {
         ...state,
@@ -1204,13 +1204,16 @@ const appStateSlice = createSlice({
       saveTimer: !state.config.saveTimer
       };
     },
+    snapShotAction: (state,action) => {
+      state.components[action.payload.focusIndex].past.push(action.payload.deepCopiedState.components[action.payload.focusIndex].children);
+    }
   }
 });
 
 // Exports the action creator function to be used with useDispatch
 
 
-export const { addComponent, addChild, changeFocus, changeTailwind, changePosition, updateStateUsed, resetAllState, updateUseContext, updateCss, updateEvents, deleteEventAction, deletePage, deleteReusableComponent, setProjectName, changeProjectType, resetState, updateProjectName, deleteElement, updateAttributes, deleteChild, setInitialState, openProject, addElement, undo, redo, addState, addPassedInProps, deletePassedInProps, deleteState, toggleLoggedIn, configToggle } = appStateSlice.actions;
+export const { addComponent, addChild, changeFocus, changeTailwind, changePosition, updateStateUsed, resetAllState, updateUseContext, updateCss, updateEvents, deleteEventAction, deletePage, deleteReusableComponent, setProjectName, changeProjectType, resetState, updateProjectName, deleteElement, updateAttributes, deleteChild, setInitialState, openProject, addElement, undo, redo, addState, addPassedInProps, deletePassedInProps, deleteState, toggleLoggedIn, configToggle, snapShotAction } = appStateSlice.actions;
 
 
 // Exports so we can combine in rootReducer