Merge branch 'allstate' into mike/allstate

Author: mdunnmon

app/src/Dashboard/NavbarDash.tsx

@@ -50,7 +50,7 @@ const StyledMenu = withStyles({
 })(props => (
   <Menu
     elevation={0}
-    getContentAnchorEl={null}
+    // getContentAnchorEl={null}
     anchorOrigin={{
       vertical: 'bottom',
       horizontal: 'center'

app/src/components/App.tsx

@@ -18,7 +18,6 @@ export const App = (): JSX.Element => {
   // const [state, dispatch] = useReducer(reducer, initialState);
   const state = useSelector(store => store.appState);
   const dispatch = useDispatch();
-  console.log("loaded right away")
   // checks if user is signed in as guest or actual user and changes loggedIn boolean accordingly
   useEffect(()=>{
     if (window.localStorage.getItem('ssid') !== 'guest') {
@@ -42,7 +41,7 @@ export const App = (): JSX.Element => {
           //   type: 'SET INITIAL STATE',
           //   payload: project
           // });
-          dispatch(setInitialState({project}))
+          dispatch(setInitialState(project))
         }
       });
     } else {
@@ -60,7 +59,7 @@ export const App = (): JSX.Element => {
           //   type: 'SET INITIAL STATE',
           //   payload: project
           // });
-          dispatch(setInitialState({project}))
+          dispatch(setInitialState(project))
         } else {
           console.log(
             'No user project found in localforage, setting initial state blank'

app/src/components/left/HTMLPanel.tsx

@@ -111,7 +111,7 @@ const HTMLPanel = (props): JSX.Element => {
     //   type: 'ADD ELEMENT',
     //   payload: newElement
     // });
-    dispatch(addElement({newElement}))
+    dispatch(addElement(newElement))
     setCurrentID(currentID + 1);
     setTag('');
     setName('');

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/components/main/DeleteButton.tsx

@@ -3,7 +3,7 @@ import { DeleteButtons } from '../../interfaces/Interfaces';
 import Modal from '@mui/material/Modal';
 import StateContext from '../../context/context';
 import { useDispatch } from 'react-redux';
-import { changeFocus, addChild, deleteChild } from '../../redux/reducers/slice/appStateSlice';
+import { deleteChild } from '../../redux/reducers/slice/appStateSlice';
 
 function DeleteButton({ id, name }: DeleteButtons) {
   // const [state, dispatch] = useContext(StateContext);

app/src/components/top/NavBar.tsx

@@ -62,7 +62,7 @@ const StyledMenu = withStyles({
 })(props => (
   <Menu
     elevation={0}
-    getContentAnchorEl={null}
+    // getContentAnchorEl={null}
     anchorOrigin={{
       vertical: 'bottom',
       horizontal: 'center'

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

app/src/redux/store.js

@@ -4,7 +4,32 @@ import { configureStore } from '@reduxjs/toolkit';
 import rootReducer from './reducers/rootReducer';
 
 const store = configureStore({
-  reducer: rootReducer
+  reducer: rootReducer,
+  middleware: getDefaultMiddleware => {
+    const ignoredPaths = [];
+
+    for (let i = 0; i < 21; i++) {
+      ignoredPaths.push(`appState.HTMLTypes.${i}.icon`);
+      ignoredPaths.push(`appState.HTMLTypes.${i}.icon.$$typeof`);
+    }
+
+    return getDefaultMiddleware({
+      serializableCheck: {
+        // Ignore the `configToggle` action type
+        // ignoredActions: ['configToggle'],
+        // Ignore these field paths in all actions
+        // ignoredActionPaths: ['meta.arg', 'payload.timestamp'],
+        // Ignore these paths in the state
+        ignoredPaths: ignoredPaths,
+      },
+    });
+  },
 });
 
+
+  
+  
+
+
+
 export default store;