nested undo not working

Author: eddypjr

app/src/components/bottom/CodePreview.tsx

@@ -27,7 +27,7 @@ const CodePreview: React.FC<{
   const currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
-console.log('currentComp in CodePreview', currentComponent)
+// console.log('currentComp in CodePreview', currentComponent)
   const handleCodeSnipChange = val => {
     currentComponent.code = val;
   };

app/src/components/main/Canvas.tsx

@@ -1,38 +1,81 @@
-import React, { useContext } from 'react';
+import React, { useState, useContext } from 'react';
 import { useDrop, DropTargetMonitor } from 'react-dnd';
+import customHooks from '../helperFunctions/customHook';
+import _ from 'lodash';
 import { ItemTypes } from '../../constants/ItemTypes';
 import StateContext from '../../context/context';
 import { Component, DragItem } from '../../interfaces/Interfaces';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
 
+// const snapStateArr = [];
 function Canvas() {
   const [state, dispatch] = useContext(StateContext);
+  // const [ prevState, setPrevState ] = useState<Array<object>>([]); // NOT USING
   // find the current component to render on the canvas
   const currentComponent: Component = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
-  );
+    );
+
   // console.log('currentComponent', currentComponent)
 
   // changes focus of the canvas to a new component / child
   const changeFocus = (componentId: number, childId: number | null) => {
     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
     changeFocus(state.canvasFocus.componentId, null);
   }
+  function onChangeHandler(event) {
+    // console.log('working', event.target)
+  }
+
+  // stores a limited snapshot of previous state to use in the useDrop function, for UNDO functionality
+  // const snapStateArr = [];
+  const snapShotFunc = () => {
+  // make a deep clone of state ( JSON.parse(JSON.stringify(<object>)) ? )
+  // function inner() {
+      const deepCopiedState = JSON.parse(JSON.stringify(state));
+      // console.log('deepCopiedState', deepCopiedState);
+      // stateSnapArr.push(deepCopiedState);
+      state.past.push(deepCopiedState.components[0].children);
+      // state.past.push(deepCopiedState);
+      // console.log('state after push', state)
+      console.log('state in canvas', state.past)
+      // return;
+      // snapStateArr.push(5);
+      // return snapStateArr;
+    // }
+    // inner();
+
+    // return;
+  // const prevCount = customHooks(state);
+  // console.log('prevCount', prevCount);
+  // console.log('state', state);
+
+  // setPrevState( previousState => {
+  //   return [...previousState].push(deepCopiedState);
+  // })
+  // console.log('prevState: ', prevState)
+}
+
   // 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(); // returns false for direct drop target
+      const didDrop = monitor.didDrop();
+      // returns false for direct drop target
+      //code here
+      // 6.0 didDrop is firing when HTML tags are moved up
+      snapShotFunc();                         // < ------ snapShotFunc here
       if (didDrop) {
         return;
       }
-      console.log('item', item)
+      // console.log('item', item)
       // 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) {
         dispatch({
@@ -75,10 +118,12 @@ function Canvas() {
   // Direct children are draggable/clickable
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   return (
-    <div ref={drop} style={canvasStyle} onClick={onClickHandler}>
+    <div ref={drop} style={canvasStyle} onClick={onClickHandler} onChange={onChangeHandler}>
       {/* currentComponent is the selected component on Left Panel (eg: App or Index with green dot to the left)  */}
       {renderChildren(currentComponent.children)}
     </div>
   );
 }
+// export { snapStateArr };
 export default Canvas;
+

app/src/components/main/CanvasContainer.tsx

@@ -9,6 +9,10 @@ function CanvasContainer() {
     border: '2px Solid grey',
   };
 
+   function onChangeHandler(event) {
+     console.log('working', event.target);
+   }
+
   return (
     <div style={canvasContainerStyle}>
       <Canvas />

app/src/containers/RightContainer.tsx

@@ -3,7 +3,10 @@ import React, {
   useContext,
   useEffect,
   useMemo,
+  useRef,
 } from 'react';
+import customHooks from '../helperFunctions/customHook';
+import initialState from '../context/initialState';
 import { makeStyles } from '@material-ui/core/styles';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
@@ -41,6 +44,31 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
   const [deleteComponentError, setDeleteComponentError] = useState(false);
   const { style } = useContext(styleContext);
   const [modal, setModal] = useState(null);
+  const [prevState, setPrevState] = useState(state);
+  // const [ref, setRef] = useRef();
+
+  // const prevCountRef = useRef();
+  // useEffect(() => {
+  //   prevCountRef.current = prevState;
+  // });
+  // const prevCount = prevCountRef.current;
+  // console.log('prevCount <-- before', prevCount);
+  // console.log('prevState <-- now', prevState);
+  // console.log('prevState', prevState);
+//state.components[0].children
+// function usePrevious(value) {
+//   const ref = useRef();
+//   useEffect(() => {
+//     ref.current = value;
+//   });
+//   return ref.current;
+// }
+// const prevCount = customHooks(state);
+// console.log('prevCount <-- before', prevCount);
+// console.log('prevState <-- now', prevState)
+// console.log('state in rightContainer', state);
+
+
 
   const resetFields = () => {
     const style = configTarget.child
@@ -193,6 +221,45 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
     return styleObj;
   };
 
+/****************************** UNDO AND REDO ****************************************** */
+// undo functionality
+// onClick this function will be invoked.
+// set current state components.children to previous state and store current state children array in another place holder to not lose current state before reassigning to previous position.
+const undoAction = () => {
+  dispatch({ type: 'UNDO', payload: {} });
+// const undoAction = () => {
+  // dispatch({ type: 'UNDO', payload: {value} })
+  // const ref = useRef();
+  // useEffect(() => {
+  //   ref.current = value;
+  // });
+  // console.log('ref.curr', ref.current)
+  // return ref.current;
+  // dispatch({ type: 'UNDO', payload: {} });
+  // const childrenArr = state.components[0].children;
+  // const result = [];
+  // // console.log('state.components', state.components[0].children)
+  // for(let i = 0; i < prevState.children.length - 3; i++) {
+  //   result.push(prevState.children[i]);
+  // }
+  // setPrevState(result);
+};
+// };
+
+// const prevCount = undoAction(prevState);
+// console.log('prevCount', prevCount);
+
+const handleClick = (e, data) => {
+  console.log(data);
+}
+
+const redoAction = () => {
+  dispatch({ type: 'REDO', payload: {} });
+}
+
+
+
+
   // placeholder for handling deleting instance
   const handleDelete = () => {
     dispatch({ type: 'DELETE CHILD', payload: {} });
@@ -502,6 +569,28 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
               </Button>
             </div>
           )}
+          <div className = {classes.buttonRow}>
+            <Button
+            color="primary"
+            className={classes.button}
+            onClick={undoAction}
+            // onClick={((e) => handleClick(e, prevCount))}
+            >
+
+              {/* <i className="fas fa-backward"/> */}
+              <i className="fas fa-undo"></i>
+            </Button>
+            <Button
+            color="primary"
+            className={classes.button}
+            // onClick={clearComps}
+            // onClick={redoAction}
+            // onClick = {handleClick}
+            >
+              <i className="fas fa-redo"></i>
+              {/* <i className="fas fa-forward"/> */}
+            </Button>
+        </div>
         </div>
 
       </div>

app/src/context/initialState.ts

@@ -21,7 +21,8 @@ const initialState: State = {
   nextComponentId: 2,
   nextChildId: 1,
   nextTopSeparatorId: 1000,
-  HTMLTypes
+  HTMLTypes,
+  past: []
 };
 
 export default initialState;

app/src/helperFunctions/customHook.ts

@@ -0,0 +1,16 @@
+import React, {useRef, useEffect} from 'react';
+
+
+function usePrevious(value) {
+  const ref = useRef();
+  // console.log('ref', ref)
+  useEffect(() => {
+    ref.current = value;
+    // console.log('useEffect', ref.current);
+    // return ref.current;
+  });
+  // console.log('ref.current', ref.current)
+  return ref.current;
+}
+
+export default usePrevious;

app/src/interfaces/Interfaces.ts

@@ -13,6 +13,16 @@ export interface State {
   nextBottomSeparatorId: number;
   nextChildId: number;
   HTMLTypes: HTMLType[];
+  past: any[];
+}
+export interface PastElement {
+  type: string;
+  typeId: number;
+  name: string;
+  childId: number;
+  style: object;
+  attributes?: object;
+  children?: PastElement[];
 }
 
 export interface ChildElement {

app/src/public/index-prod.ejs

@@ -2,6 +2,8 @@
 <html lang="en-US">
   <head>
     <meta charset="UTF-8" />
+    <!-- <script src = "lodash.js"></script> -->
+    <script src="https://kit.fontawesome.com/7e1cebd082.js" crossorigin="anonymous"></script>
     <!-- This file is .ejs rather than .html so that we can dynamically add a nonce into the header -->
     <!-- the nonce is used in the Content security policy webpack plugin so that Material UI styles can be injected into the DOM -->
     <!-- https://github.com/reZach/secure-electron-template/issues/14 -->

app/src/public/index.ejs

@@ -2,6 +2,8 @@
 <html lang="en-US">
   <head>
     <meta charset="UTF-8" />
+    <!-- <script src = "lodash.js"></script> -->
+    <script src="https://kit.fontawesome.com/7e1cebd082.js" crossorigin="anonymous"></script>
     <!-- This file is .ejs rather than .html so that we can dynamically add a nonce into the header -->
     <!-- the nonce is used in the Content security policy webpack plugin so that Material UI styles can be injected into the DOM -->
     <!-- https://github.com/reZach/secure-electron-template/issues/14 -->