Commented edits

Author: tonyito

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.

src/components/LeftColExpansionPanel.tsx

@@ -63,6 +63,8 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
   // state/class toggles will be displayed when a component is focused
   const focusedToggle = isFocused() === 'focused' ? true : false;
 
+  //this function determines whether edit mode for component name should be entered or not
+  //resets the title if 'escape' key is hit
   const handleEdit = () => {
     if (editMode !== id) {
       handleChangeName(title);
@@ -125,7 +127,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                   // button // commented out to disable materialUI hover shading effect. TBD if any adverse effects occur
                   // style={{ color: 'red' }}
                   onClick={() => {
-                    if (focusComponent.title !== title)
+                    if (focusComponent.title !== title) //changed the logic here so it only focuses if you click on a different card. Otherwise, you can't double click into edit mode for the title. 
                       changeFocusComponent({ title });
                   }}
                 >
@@ -147,32 +149,32 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                             {title}
                           </Typography>
                         ) : (
-                          <TextField
+                          <TextField                                      //show a text field for editing instead if edit mode entered
                             id="filled"
                             label="Change Component Name"
                             defaultValue={title}
                             variant="outlined"
                             className={classes.text}
                             InputProps={{
-                              className: classes.light,
+                              className: classes.light,                   //all of these styling makes the input box border, label, and text default to white.
                             }}
                             InputLabelProps={{
                               className: classes.inputLabel,
                             }}
                             autoFocus
-                            onChange={e => handleChangeName(e.target.value)}
+                            onChange={e => handleChangeName(e.target.value)}      //event handler for key press
                             onKeyPress={ev => {
-                              if (ev.key === 'Enter') {
+                              if (ev.key === 'Enter') {                           //event handler for enter pressed
                                 handleEditComponent();
                                 ev.preventDefault();
                               }
                             }}
-                            onKeyUp={ev => {
-                              if (ev.keyCode === 27) {
-                                handleEdit();
-                                ev.preventDefault();
-                              }
-                            }}
+                            // onKeyUp={ev => {                                   //the old escape handler, keeping it here just in case a bug in the main.js escape handler wasn't caught
+                            //   if (ev.keyCode === 27) {
+                            //     handleEdit();
+                            //     ev.preventDefault();
+                            //   }
+                            // }}
                           />
                         )}
                         {/* ALL OF THE STATE/CLASS TOGGLES AND LABELS ARE ONLY RENDERED IF THEIR COMPONENT IS THE FOCUSED COMPONENT 

src/containers/AppContainer.tsx

@@ -32,6 +32,7 @@ interface Props {
   undo(): void;
   redo(): void;
   tutorial: number;
+  toggleEditMode(arg: {id: number}): void;
 }
 
 //Type for the state that should not be assigned within the
@@ -67,6 +68,8 @@ const mapDispatchToProps = (dispatch: (arg: any) => void) => ({
     dispatch(actions.changeTutorial(tutorial)),
   undo: () => dispatch(actions.undo()),
   redo: () => dispatch(actions.redo()),
+  toggleEditMode: ({ id }: { id: number }) =>
+    dispatch(actions.toggleEditMode({ id })),
 });
 
 class AppContainer extends Component<Props, State> {
@@ -111,6 +114,10 @@ class AppContainer extends Component<Props, State> {
     IPC.on('redo', () => {
       this.props.redo();
     });
+
+    IPC.on('escape', () => {
+      this.props.toggleEditMode({id:-1});
+    })
   }
 
   handleNext = (tutorial: number) => {

src/containers/LeftContainer.tsx

@@ -140,20 +140,23 @@ class LeftContainer extends Component<LeftContPropsInt, StateInt> {
     });
   }
 
+  //this function is for handling the value of the new component name typed in
   handleChange = (event: any) => {
     const newValue: string = event.target.value;
     this.setState({
       componentName: newValue,
     });
   };
 
+  //this functions handles the values for an edited name being typed
   handleChangeName = (value: string) => {
     const newValue: string = value;
     this.setState({
       componentEditName: newValue,
     });
   };
 
+  
   handleAddComponent = () => {
     this.props.addComponent({ title: this.state.componentName });
 
@@ -169,7 +172,7 @@ class LeftContainer extends Component<LeftContPropsInt, StateInt> {
       title: this.state.componentEditName,
     });
 
-    // reset the currently added componentName state field to blank after adding
+    // reset the currently added componentName state field to blank after editing
     this.setState({
       componentEditName: '',
     });

src/utils/componentReducer.util.ts

@@ -551,6 +551,7 @@ export const toggleComponentClass = (
   };
 };
 
+//a reducer function to see if component name editing mode should be entered
 export const toggleEditMode = (
   state: ApplicationStateInt,
   { id }: { id: number }
@@ -566,6 +567,10 @@ export const toggleEditMode = (
   };
 };
 
+/*For the function below, it first changes the title of the component being edited to the new name.
+Then, it checks for each child component that exists and make sure the names of those child components 
+are changed as well. Otherwise, the code will break because when you focus on a component with the changed component
+as a child. */
 export const editComponent = (
   state: ApplicationStateInt,
   { id, title }: { id: number; title: string }

tsconfig.json

@@ -6,7 +6,7 @@
     "module": "commonjs",
     "target": "es6",
     "jsx": "react",
-    "lib": ["es5","es6", "dom", "es2017"],
+    "lib": ["es6", "dom", "es2017"],
     "allowSyntheticDefaultImports": true
   },
   "include": ["./src/**/*"]