Merge branch 'master' into feature/server/graphQL

Author: khuongdn16

app/src/components/bottom/BottomTabs.tsx

@@ -25,8 +25,6 @@ const BottomTabs = () => {
 
   // breaks if handleChange is commented out
   const handleChange = (event: React.ChangeEvent, value: number) => {
-    // console.log('value', value)
-    // console.log('setTab', setTab)
     setTab(value);
   };
  // Allows users to toggle project between "next.js" and "Classic React"
@@ -36,7 +34,6 @@ const BottomTabs = () => {
     dispatch({ type: 'CHANGE PROJECT TYPE', payload: { projectType } });
   };
   const { components, HTMLTypes } = state;
-  // console.log('components', components)
 
   const changeTheme = e => {
     setTheme(e.target.value);

app/src/components/bottom/CodePreview.tsx

@@ -16,9 +16,7 @@ const CodePreview: React.FC<{
   setTheme: any | null;
   }> = ({ theme, setTheme }) => {
   const wrapper = useRef();
-  // console.log('wrapper', wrapper)
   const dimensions = useResizeObserver(wrapper);
-  // console.log('dimensions', dimensions)
   const { width, height } =
     dimensions || 0;
 
@@ -27,7 +25,7 @@ const CodePreview: React.FC<{
   const currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
-console.log('currentComp in CodePreview', currentComponent)
+
   const handleCodeSnipChange = val => {
     currentComponent.code = val;
   };

app/src/components/main/Canvas.tsx

@@ -1,38 +1,50 @@
-import React, { useContext } from 'react';
+import React, { useState, useContext } from 'react';
 import { useDrop, DropTargetMonitor } from 'react-dnd';
+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';
 
+
 function Canvas() {
   const [state, dispatch] = useContext(StateContext);
   // 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);
-  }
+  };
+
+  // stores a snapshot of state into the past array for UNDO
+  const snapShotFunc = () => {
+    // make a deep clone of state
+      const deepCopiedState = JSON.parse(JSON.stringify(state));
+      state.past.push(deepCopiedState.components[0].children);
+  };
+  
   // 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();
+      // takes a snapshot of state to be used in UNDO and REDO cases
+      snapShotFunc();
+      // returns false for direct drop target
       if (didDrop) {
         return;
       }
-      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({
@@ -81,4 +93,6 @@ function Canvas() {
     </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/components/main/DirectChildHTMLNestable.tsx

@@ -17,8 +17,11 @@ function DirectChildHTMLNestable({
 }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
   const ref = useRef(null);
-  // console.log('name', name)
-  // console.log('children', children)
+// takes a snapshot of state to be used in UNDO and REDO cases
+const snapShotFunc = () => {
+  const deepCopiedState = JSON.parse(JSON.stringify(state));
+  state.past.push(deepCopiedState.components[0].children);
+};
   // find the HTML element corresponding with this instance of an HTML element
   // find the current component to render on the canvas
   const HTMLType: HTMLType = state.HTMLTypes.find(
@@ -50,6 +53,8 @@ function DirectChildHTMLNestable({
     // triggered on drop
     drop: (item: any, monitor: DropTargetMonitor) => {
       const didDrop = monitor.didDrop();
+      // takes a snapshot of state to be used in UNDO and REDO cases
+      snapShotFunc();
       if (didDrop) {
         return;
       }

app/src/containers/RightContainer.tsx

@@ -3,7 +3,9 @@ import React, {
   useContext,
   useEffect,
   useMemo,
+  useRef,
 } from 'react';
+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';
@@ -42,6 +44,7 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
   const { style } = useContext(styleContext);
   const [modal, setModal] = useState(null);
 
+
   const resetFields = () => {
     const style = configTarget.child
       ? configTarget.child.style
@@ -193,6 +196,15 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
     return styleObj;
   };
 
+// UNDO/REDO functionality--onClick these functions will be invoked.
+const undoAction = () => {
+  dispatch({ type: 'UNDO', payload: {} });
+};
+
+const redoAction = () => {
+  dispatch({ type: 'REDO', payload: {} });
+};
+
   // placeholder for handling deleting instance
   const handleDelete = () => {
     dispatch({ type: 'DELETE CHILD', payload: {} });
@@ -502,6 +514,22 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
               </Button>
             </div>
           )}
+          <div className = {classes.buttonRow}>
+            <Button
+            color="primary"
+            className={classes.button}
+            onClick={undoAction}
+            >
+              <i className="fas fa-undo"></i>
+            </Button>
+            <Button
+            color="primary"
+            className={classes.button}
+            onClick={redoAction}
+            >
+              <i className="fas fa-redo"></i>
+            </Button>
+        </div>
         </div>
 
       </div>

app/src/context/initialState.ts

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

app/src/interfaces/Interfaces.ts

@@ -13,6 +13,18 @@ export interface State {
   nextBottomSeparatorId: number;
   nextChildId: number;
   HTMLTypes: HTMLType[];
+  past: any[];
+  future: 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 -->

app/src/reducers/componentReducer.ts

@@ -11,7 +11,7 @@ import manageSeparators from '../helperFunctions/manageSeparators';
 
 let separator = initialState.HTMLTypes[1];
 
-// }
+
 const reducer = (state: State, action: Action) => {
   // if the project type is set as Next.js or Gatsby.js, next/gatsby component code should be generated
   // otherwise generate classic react code
@@ -612,6 +612,48 @@ const reducer = (state: State, action: Action) => {
         HTMLTypes
       };
     }
+    case 'UNDO': {
+      //if past is empty, return state
+      if (state.past.length === 0) return {...state};
+      //the children array of state.components[0] will equal the last element of the past array
+        state.components[0].children = state.past[state.past.length-1];
+        //the last element of past array gets pushed into future;
+        state.future.push(state.past.pop());
+      //generate code for the Code Preview
+      state.components.forEach((el, i) => {
+        el.code = generateCode(
+          state.components,
+          state.components[i].id,
+          state.rootComponents,
+          state.projectType,
+          state.HTMLTypes
+        );
+      });
+      return {
+        ...state
+      };
+    }
+    case 'REDO': {
+      //nothing left to redo
+      if(state.future.length === 0) return {...state};
+      //the children array of state.components[0] will equal the last element of the future array
+        state.components[0].children = state.future[state.future.length - 1];
+        //the last element of the future array gets pushed into the past array and the last element of the future array gets popped off
+        state.past.push(state.future.pop());
+      //generate code for the Code Preview
+      state.components.forEach((el, i) => {
+        el.code = generateCode(
+          state.components,
+          state.components[i].id,
+          state.rootComponents,
+          state.projectType,
+          state.HTMLTypes
+          );
+      });
+      return {
+        ...state
+      };
+    }
 
     default:
       return state;

app/src/tree/TreeChart.tsx

@@ -37,7 +37,7 @@ function TreeChart({ data }) { // data is components from state - passed in from
         i -= 1;
       }
       // if element has a children array and that array has length, recursive call
-      else if ((arr[i].name === 'div' || arr[i].type === 'Component') && arr[i].children.length) {
+      else if ((arr[i].name === 'div' || arr[i].name === 'form' || arr[i].type === 'Component') && arr[i].children.length) {
         // if element is a component, replace it with deep clone of latest version (to update with new HTML elements)
         if (arr[i].type === 'Component') arr[i] = cloneDeep(data.find(component => component.name === arr[i].name));
         removeSeparators(arr[i].children);