Merged conflicts with latest pull

Author: ibeeliot

main.js

@@ -41,6 +41,16 @@ function openFile() {
   mainWindow.webContents.send('new-file', file);
 }
 
+//functions to replace the default behavior of undo and redo
+function undo() {
+  mainWindow.webContents.send('undo');
+}
+
+function redo() {
+  mainWindow.webContents.send('redo');
+}
+
+
 function toggleTutorial() {
   mainWindow.webContents.send('tutorial_clicked');
 }
@@ -107,8 +117,20 @@ const createWindow = () => {
     {
       label: 'Edit',
       submenu: [
-        { role: 'undo' },
-        { role: 'redo' },
+        { 
+          label: 'Undo',
+          accelerator: process.platform === 'darwin' ? 'Cmd+Z' : 'Ctrl+Z',  //these hotkeys are a tad bit glitchy
+          click() {
+            undo();
+          }
+        },
+        { 
+          label: 'Redo',
+          accelerator: process.platform === 'darwin' ? 'Cmd+Shift+Z' : 'Ctrl+Shift+Z',
+          click() {
+            redo();
+          }
+        },
         { type: 'separator' },
         { role: 'cut' },
         { role: 'copy' },

package.json

@@ -124,7 +124,8 @@
     "redux": "^4.0.0",
     "redux-devtools-extension": "^2.13.5",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "redux-undo": "^1.0.1"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.3.3",

src/actionTypes/index.ts

@@ -32,3 +32,5 @@ export const DELETE_IMAGE: string = 'DELETE_IMAGE';
 export const TOGGLE_STATE: string = 'TOGGLE_STATE';
 export const TOGGLE_CLASS: string = 'TOGGLE_CLASS';
 export const CHANGE_TUTORIAL: string = 'CHANGE_TUTORIAL';
+export const UNDO: string = 'UNDO';
+export const REDO: string = 'REDO';

src/actions/components.ts

@@ -34,6 +34,8 @@ import {
   CHANGE_IMAGE_SOURCE,
   DELETE_IMAGE,
   CHANGE_TUTORIAL,
+  UNDO,
+  REDO,
 } from '../actionTypes/index';
 
 import { loadState } from '../localStorage'; //this is a warning from 'localStorage' being a .js file instead of .ts. Convert to .ts to remove this warning.
@@ -55,14 +57,16 @@ export const loadInitData = () => (dispatch: (arg: Action) => void) => {
     dispatch({
       type: LOAD_INIT_DATA,
       payload: {
-        data: data ? data.workspace : {},
+        data: data
+          ? { ...data.workspace, history: [], historyIndex: 0, future: [] } //erase history upon opening app
+          : {},
       },
     });
   });
 };
 
 export const addComponent = ({ title }: { title: string }) => (
-  dispatch: (arg: Action) => void,
+  dispatch: (arg: Action) => void
 ) => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
 };
@@ -114,14 +118,14 @@ export const deleteComponent = ({
 };
 
 export const changeFocusComponent = ({ title }: { title: string }) => (
-  dispatch: (arg: Action) => void,
+  dispatch: (arg: Action) => void
 ) => {
   dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
 };
 
 // make sure childId is being sent in
 export const changeFocusChild = ({ childId }: { childId: number }) => (
-  dispatch: (arg: Action) => void,
+  dispatch: (arg: Action) => void
 ) => {
   dispatch({ type: CHANGE_FOCUS_CHILD, payload: { childId } });
 };
@@ -163,13 +167,13 @@ export const exportFiles = ({
       dispatch({
         type: EXPORT_FILES_SUCCESS,
         payload: { status: true, dir: dir[0] },
-      }),
+      })
     )
     .catch((err: string) =>
       dispatch({
         type: EXPORT_FILES_ERROR,
         payload: { status: true, err },
-      }),
+      })
     );
 };
 
@@ -186,7 +190,7 @@ export const handleTransform = (
     y,
     width,
     height,
-  }: { x: number; y: number; width: number; height: number },
+  }: { x: number; y: number; width: number; height: number }
 ) => ({
   type: HANDLE_TRANSFORM,
   payload: {
@@ -220,7 +224,7 @@ export const createApplication = ({
         path,
         components,
         exportAppBool,
-      }),
+      })
     );
   } else if (genOption) {
     exportAppBool = true;
@@ -242,14 +246,14 @@ export const createApplication = ({
             path,
             components,
             exportAppBool,
-          }),
+          })
         );
       })
       .catch((err: string) =>
         dispatch({
           type: CREATE_APPLICATION_ERROR,
           payload: { status: true, err },
-        }),
+        })
       );
   }
 };
@@ -264,19 +268,19 @@ export const deleteAllData = () => ({
 });
 
 export const deleteProp = (propId: number) => (
-  dispatch: (arg: Action) => void,
+  dispatch: (arg: Action) => void
 ) => {
   dispatch({ type: DELETE_PROP, payload: propId });
 };
 
 export const toggleComponentState = (id: string) => (
-  dispatch: (arg: Action) => void,
+  dispatch: (arg: Action) => void
 ) => {
   dispatch({ type: TOGGLE_STATE, payload: id });
 };
 
 export const toggleComponentClass = (id: string) => (
-  dispatch: (arg: Action) => void,
+  dispatch: (arg: Action) => void
 ) => {
   dispatch({ type: TOGGLE_CLASS, payload: id });
 };
@@ -286,6 +290,16 @@ export const addProp = (prop: PropInt) => ({
   payload: { ...prop },
 });
 
+
+//action creators for undo and redo
+export const undo = () => ({
+  type: UNDO,
+});
+
+export const redo = () => ({
+  type: REDO,
+});
+
 export const updateHtmlAttr = ({
   attr,
   value,

src/components/LeftColExpansionPanel.tsx

@@ -80,9 +80,9 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
           {/* {This is the component responsible for the collapsing transition animation for each component card} */}
           <Collapse
             in={focusedToggle}
-            collapsedHeight={'70px'}
-            timeout={500} //The type for the Collapse component is asking for a string, but if you put in a string and not a number, the component itself breaks.
+            collapsedHeight={'70px'} //The type for the Collapse component is asking for a string, but if you put in a string and not a number, the component itself breaks.
             style={{ borderRadius: '5px' }}
+            timeout={500}
           >
             {/* NOT SURE WHY COLOR: RED IS USED, TRIED REMOVING IT AND NO VISIBLE CHANGE OCCURED. */}
             <Grid

src/components/Props.tsx

@@ -125,8 +125,9 @@ const styles = (theme: any) => ({
     }
   },
   dataTable: {
+    border: '1px solid red',
     backgroundColor: 'red',
-    width: '60%'
+    width: '60%',
   },
   light: {
     color: '#eee'

src/components/Tutorial.tsx

@@ -207,7 +207,7 @@ class Tutorial extends Component<Props> {
         closeAfterTransition
         BackdropComponent={Backdrop}
         BackdropProps={{
-          timeout: 500,
+          timeout: {enter: 500, exit: 500},
         }}
         style={{
           display: 'grid',

src/containers/AppContainer.tsx

@@ -29,6 +29,8 @@ interface Props {
   loadInitData(): void;
   changeImagePath(imageSource: string): void;
   changeTutorial(tutorial: number): void;
+  undo(): void;
+  redo(): void;
   tutorial: number;
 }
 
@@ -63,6 +65,8 @@ const mapDispatchToProps = (dispatch: (arg: any) => void) => ({
   //function to change the tutorial step
   changeTutorial: (tutorial: number) =>
     dispatch(actions.changeTutorial(tutorial)),
+  undo: () => dispatch(actions.undo()),
+  redo: () => dispatch(actions.redo()),
 });
 
 class AppContainer extends Component<Props, State> {
@@ -82,7 +86,7 @@ class AppContainer extends Component<Props, State> {
     //it changes the imagesource in the global state to be whatever filepath it is
     //on the user's comp.
 
-    //TODO Fix event typing?
+    //New File command listener
     IPC.on('new-file', (event: string, file: string) => {
       const image = new window.Image();
       image.src = file;
@@ -92,9 +96,21 @@ class AppContainer extends Component<Props, State> {
         this.setState({ image, changed: true });
       };
     });
+
+    //Tutorial command listener
     IPC.on('tutorial_clicked', () => {
       this.props.changeTutorial(1);
     });
+
+    //Undo command listener
+    IPC.on('undo', () => {
+      this.props.undo();
+    });
+
+    //Redo command listener
+    IPC.on('redo', () => {
+      this.props.redo();
+    });
   }
 
   handleNext = (tutorial: number) => {

src/reducers/componentReducer.ts

@@ -33,6 +33,8 @@ import {
   DELETE_PROP,
   UPDATE_HTML_ATTR,
   UPDATE_CHILDREN_SORT,
+  UNDO,
+  REDO,
 } from '../actionTypes/index';
 
 import {
@@ -57,6 +59,8 @@ import {
   updateChildrenSort,
   toggleComponentState,
   toggleComponentClass,
+  undo,
+  redo
 } from '../utils/componentReducer.util';
 import cloneDeep from '../utils/cloneDeep';
 
@@ -111,6 +115,9 @@ const initialApplicationState: ApplicationStateInt = {
   components: [appComponent],
   appDir: '',
   loading: false,
+  history: [],
+  historyIndex: 0,
+  future: []
 };
 
 const componentReducer = (state = initialApplicationState, action: Action) => {
@@ -171,6 +178,10 @@ const componentReducer = (state = initialApplicationState, action: Action) => {
       return updateHtmlAttr(state, action.payload);
     case UPDATE_CHILDREN_SORT:
       return updateChildrenSort(state, action.payload);
+      case UNDO:
+        return undo(state);
+        case REDO:
+          return redo(state);
     default:
       return state;
   }

src/utils/Interfaces.ts

@@ -76,8 +76,13 @@ export interface ApplicationStateInt {
   components: ComponentsInt;
   appDir: string;
   loading: boolean;
+  history: ApplicationStateInt[];
+  historyIndex: number;
+  future: ApplicationStateInt[];
 }
 
+
+
 //Global Action interface \
 export interface Action {
   type: string;