added keybindings for undo and redo

Author: eddypjr

app/src/components/left/HTMLPanel.tsx

@@ -188,7 +188,6 @@ const HTMLPanel = (props): JSX.Element => {
                 onChange={handleTagChange}
                 className={isThemeLight ? `${classes.input} ${classes.lightThemeFontColor}` : `${classes.input} ${classes.darkThemeFontColor}`}
                 style={{ marginBottom: '10px' }}
-                
               />
 
               {(!tag.charAt(0).match(/[A-Za-z]/) || !alphanumeric(tag) || tag.trim() === '' || checkNameDupe(tag))

app/src/components/main/Canvas.tsx

@@ -32,7 +32,6 @@ function Canvas() {
     // make a deep clone of state
       const deepCopiedState = JSON.parse(JSON.stringify(state));
       state.past.push(deepCopiedState.components[0].children);
-      console.log('state in snapShotFunc', state)
   };
 
   // This hook will allow the user to drag items from the left panel on to the canvas

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -54,7 +54,7 @@ const snapShotFunc = () => {
     drop: (item: any, monitor: DropTargetMonitor) => {
       const didDrop = monitor.didDrop();
       // takes a snapshot of state to be used in UNDO and REDO cases
-      // snapShotFunc();
+      snapShotFunc();
       if (didDrop) {
         return;
       }

app/src/components/top/NavBar.tsx

@@ -7,6 +7,7 @@ import {
 } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Avatar from '@material-ui/core/Avatar';
+import Brightness3Icon from '@material-ui/icons/Brightness3';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
@@ -29,7 +30,6 @@ import StateContext from '../../context/context';
 import logo from '../../public/icons/win/logo.png';
 
 
-
 // ROUTING TO DASHBOARD 
 import { Link } from "react-router-dom";
 

app/src/containers/AppContainer.tsx

@@ -8,7 +8,6 @@ import RightContainer from './RightContainer';
 import { theme1, theme2 } from '../public/styles/theme';
 
 
-
 export const styleContext = createContext({
   style: null,
   setStyle: null

app/src/containers/RightContainer.tsx

@@ -4,8 +4,8 @@ import React, {
   useEffect,
   useMemo,
   useRef,
+  useCallback,
 } 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';
@@ -25,7 +25,8 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import createModal from '../components/right/createModal';
-import ComponentPanel from '../components/right/ComponentPanel'
+import ComponentPanel from '../components/right/ComponentPanel';
+import { keys } from '@material-ui/core/styles/createBreakpoints';
 
 // need to pass in props to use the useHistory feature of react router
 const RightContainer = ({isThemeLight}): JSX.Element => {
@@ -44,11 +45,11 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
   const { style } = useContext(styleContext);
   const [modal, setModal] = useState(null);
 
-
   const resetFields = () => {
     const style = configTarget.child
-      ? configTarget.child.style
-      : configTarget.style;
+    ? configTarget.child.style
+    : configTarget.style;
+    console.log('styleContext style', style)
     setDisplayMode(style.display ? style.display : '');
     setFlexDir(style.flexDirection ? style.flexDirection : '');
     setFlexJustify(style.justifyContent ? style.justifyContent : '');
@@ -67,7 +68,7 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
   // handles all input field changes, with specific updates called based on input's name
   const handleChange = (e: React.ChangeEvent<{ value: any }>) => {
     let inputVal = e.target.value;
-
+console.log('inputVal', inputVal)
     switch (e.target.name) {
       case 'display':
         setDisplayMode(inputVal);
@@ -187,7 +188,7 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
     if (compWidth !== '') styleObj.width = compWidth;
     if (compHeight !== '') styleObj.height = compHeight;
     if (BGColor !== '') styleObj.backgroundColor = BGColor;
-
+    
     dispatch({
       type: 'UPDATE CSS',
       payload: { style: styleObj }
@@ -205,6 +206,18 @@ const redoAction = () => {
   dispatch({ type: 'REDO', payload: {} });
 };
 
+const undoRedoKey = useCallback((e) => {
+  (e.key === 'z' && e.metaKey && !e.shiftKey) ? undoAction() :
+  (e.shiftKey && e.metaKey && e.key === 'z') ? redoAction() : '';
+}, []);
+
+useEffect(() => {
+  document.addEventListener("keydown", undoRedoKey);
+  return () => {
+    document.removeEventListener("keydown", undoRedoKey);
+  };
+}, []);
+
   // placeholder for handling deleting instance
   const handleDelete = () => {
     dispatch({ type: 'DELETE CHILD', payload: {} });
@@ -331,7 +344,7 @@ const redoAction = () => {
                   className={classes.select}
                   inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
                 >
-                  <MenuItem value=""></MenuItem>
+                  <MenuItem value="">none</MenuItem>
                   <MenuItem value={'block'}>block</MenuItem>
                   <MenuItem value={'inline-block'}>inline-block</MenuItem>
                   <MenuItem value={'flex'}>flex</MenuItem>
@@ -427,7 +440,7 @@ const redoAction = () => {
                   className={classes.select}
                   inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}`  }}
                 >
-                  <MenuItem value=""></MenuItem>
+                  <MenuItem value="">none</MenuItem>
                   <MenuItem value={'auto'}>auto</MenuItem>
                   <MenuItem value={'50%'}>50%</MenuItem>
                   <MenuItem value={'25%'}>25%</MenuItem>
@@ -449,7 +462,7 @@ const redoAction = () => {
                   className={classes.select}
                   inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}`  }}
                 >
-                  <MenuItem value=""></MenuItem>
+                  <MenuItem value="">none</MenuItem>
                   <MenuItem value={'auto'}>auto</MenuItem>
                   <MenuItem value={'100%'}>100%</MenuItem>
                   <MenuItem value={'50%'}>50%</MenuItem>
@@ -470,6 +483,7 @@ const redoAction = () => {
                   inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}`  }}
                   value={BGColor}
                   onChange={handleChange}
+                  placeholder="#B6B8B7"
                 />
               </FormControl>
             </div>
@@ -515,20 +529,24 @@ const redoAction = () => {
             </div>
           )}
           <div className = {classes.buttonRow}>
+            {/* <HotKeys keyMap={undoKeyMap} handlers={undoHandlers}> */}
             <Button
             color="primary"
             className={classes.button}
             onClick={undoAction}
             >
               <i className="fas fa-undo"></i>
             </Button>
+            {/* </HotKeys> */}
+            {/* <HotKeys> */}
             <Button
             color="primary"
             className={classes.button}
             onClick={redoAction}
             >
               <i className="fas fa-redo"></i>
             </Button>
+            {/* </HotKeys> */}
         </div>
         </div>
 

app/src/reducers/componentReducer.ts

@@ -620,6 +620,8 @@ const reducer = (state: State, action: Action) => {
         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());
+
+        console.log('state in undo', state)
       //generate code for the Code Preview
       state.components.forEach((el, i) => {
         el.code = generateCode(
@@ -641,6 +643,8 @@ const reducer = (state: State, action: Action) => {
         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());
+
+        console.log('state in redo', state)
       //generate code for the Code Preview
       state.components.forEach((el, i) => {
         el.code = generateCode(

package.json

@@ -198,7 +198,6 @@
     "nodemon": "^2.0.4",
     "postcss-loader": "^2.1.6",
     "sass-loader": "^7.0.3",
-    "spectron": "^11.1.0",
     "style-loader": "^0.20.3",
     "supertest": "^4.0.2",
     "ts-jest": "^25.3.0",