Merge pull request #33 from tonyito/mvp

Added functionality to edit component name

Author: sean1292

main.js

@@ -6,7 +6,8 @@ const {
   Menu,
   shell,
   dialog,
-  ipcMain
+  ipcMain,
+  globalShortcut
 } = require('electron');
 
 // Uncomment below for hot reloading during development
@@ -41,6 +42,10 @@ function openFile() {
   mainWindow.webContents.send('new-file', file);
 }
 
+function escape() {
+  mainWindow.webContents.send('escape');
+}
+
 //functions to replace the default behavior of undo and redo
 function undo() {
   mainWindow.webContents.send('undo');
@@ -262,6 +267,9 @@ app.on('ready', () => {
   } else {
     createWindow();
   }
+  globalShortcut.register('Escape', () => {
+    escape();
+  })
 });
 
 // Quit when all windows are closed.

package.json

@@ -92,7 +92,7 @@
   "dependencies": {
     "@material-ui/core": "^4.2.1",
     "@material-ui/icons": "^4.0.1",
-    "@material-ui/styles": "^4.9.0",
+    "@material-ui/styles": "^4.9.6",
     "@types/prettier": "^1.19.0",
     "@types/react": "^16.8.14",
     "@types/react-dom": "^16.8.4",
@@ -104,6 +104,7 @@
     "cli-spinner": "^0.2.8",
     "commander": "^2.17.1",
     "concurrently": "^5.1.0",
+    "csstype": "^2.6.9",
     "d3": "^5.9.2",
     "electron-reload": "^1.4.0",
     "enzyme": "^3.4.1",
@@ -129,7 +130,6 @@
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.3.3",
-    "@material-ui/styles": "^4.9.6",
     "awesome-typescript-loader": "^5.2.1",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.6",

src/actionTypes/index.ts

@@ -33,4 +33,6 @@ 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';
+export const REDO: string = 'REDO';
+export const EDIT_MODE: string = 'EDIT_MODE';
+export const EDIT_COMPONENT: string = 'EDIT_COMPONENT';

src/actions/components.ts

@@ -36,6 +36,8 @@ import {
   CHANGE_TUTORIAL,
   UNDO,
   REDO,
+  EDIT_MODE,
+  EDIT_COMPONENT
 } 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.
@@ -273,24 +275,23 @@ export const deleteProp = (propId: number) => (
   dispatch({ type: DELETE_PROP, payload: propId });
 };
 
-export const toggleComponentState = (id: string) => (
+export const toggleComponentState = ({ id }: { id: number }) => (
   dispatch: (arg: Action) => void
 ) => {
-  dispatch({ type: TOGGLE_STATE, payload: id });
+  dispatch({ type: TOGGLE_STATE, payload: { id } });
 };
 
-export const toggleComponentClass = (id: string) => (
+export const toggleComponentClass = ({ id }: { id: number }) => (
   dispatch: (arg: Action) => void
 ) => {
-  dispatch({ type: TOGGLE_CLASS, payload: id });
+  dispatch({ type: TOGGLE_CLASS, payload: { id } });
 };
 
 export const addProp = (prop: PropInt) => ({
   type: ADD_PROP,
   payload: { ...prop },
 });
 
-
 //action creators for undo and redo
 export const undo = () => ({
   type: UNDO,
@@ -300,6 +301,19 @@ export const redo = () => ({
   type: REDO,
 });
 
+export const toggleEditMode = ({ id }: { id: number }) => (
+  dispatch: (arg: Action) => void
+) => {
+  dispatch({ type: EDIT_MODE, payload: { id } });
+};
+
+export const editComponent = ({ id, title }: { id: number, title: string }) => (
+  dispatch: (arg: Action) => void
+) => {
+  dispatch({ type: EDIT_COMPONENT , payload: { id, title } });
+};
+ 
+
 export const updateHtmlAttr = ({
   attr,
   value,