Fix needs saving mark 2 - for #576 (#658)

* Comment out show/hide file options action creators.

* Comment out show/hide file options properties

* Comment out show/hide file options action definitions

* Comment out constants for show/hide options action types

* Comment out props for show/hide options and replace with component state.

* Comment out show/hide edit file name reducers.

* Comment out show/hide edit file name actions.

* comment out show/hide edit file name action types.

* Comment out show/edit file name props from IDEView component

* Replace show/hide edit filename props in FileNode component with local state

* Remove commented out code from previous changes for moving redux state back into component state.

* Add binding to this for new functions. And tidy up of code.

client/constants.js

@@ -59,13 +59,8 @@ export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 export const UPDATE_LINT_MESSAGE = 'UPDATE_LINT_MESSAGE';
 export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE';
 
-export const SHOW_FILE_OPTIONS = 'SHOW_FILE_OPTIONS';
-export const HIDE_FILE_OPTIONS = 'HIDE_FILE_OPTIONS';
-
 export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
 export const DELETE_FILE = 'DELETE_FILE';
-export const SHOW_EDIT_FILE_NAME = 'SHOW_EDIT_FILE_NAME';
-export const HIDE_EDIT_FILE_NAME = 'HIDE_EDIT_FILE_NAME';
 
 export const SET_AUTOSAVE = 'SET_AUTOSAVE';
 export const SET_LINT_WARNING = 'SET_LINT_WARNING';

client/modules/IDE/actions/files.js

@@ -147,34 +147,6 @@ export function createFolder(formProps) {
   };
 }
 
-export function showFileOptions(fileId) {
-  return {
-    type: ActionTypes.SHOW_FILE_OPTIONS,
-    id: fileId
-  };
-}
-
-export function hideFileOptions(fileId) {
-  return {
-    type: ActionTypes.HIDE_FILE_OPTIONS,
-    id: fileId
-  };
-}
-
-export function showEditFileName(id) {
-  return {
-    type: ActionTypes.SHOW_EDIT_FILE_NAME,
-    id
-  };
-}
-
-export function hideEditFileName(id) {
-  return {
-    type: ActionTypes.HIDE_EDIT_FILE_NAME,
-    id
-  };
-}
-
 export function updateFileName(id, name) {
   return {
     type: ActionTypes.UPDATE_FILE_NAME,

client/modules/IDE/components/FileNode.jsx

@@ -21,6 +21,14 @@ export class FileNode extends React.Component {
     this.validateFileName = this.validateFileName.bind(this);
     this.handleFileClick = this.handleFileClick.bind(this);
     this.toggleFileOptions = this.toggleFileOptions.bind(this);
+    this.hideFileOptions = this.hideFileOptions.bind(this);
+    this.showEditFileName = this.showEditFileName.bind(this);
+    this.hideEditFileName = this.hideEditFileName.bind(this);
+
+    this.state = {
+      isOptionsOpen: false,
+      isEditingName: false,
+    };
   }
 
   handleFileClick(e) {
@@ -36,7 +44,7 @@ export class FileNode extends React.Component {
 
   handleKeyPress(event) {
     if (event.key === 'Enter') {
-      this.props.hideEditFileName(this.props.id);
+      this.hideEditFileName();
     }
   }
 
@@ -57,14 +65,26 @@ export class FileNode extends React.Component {
 
   toggleFileOptions(e) {
     e.preventDefault();
-    if (this.props.isOptionsOpen) {
-      this.props.hideFileOptions(this.props.id);
+    if (this.state.isOptionsOpen) {
+      this.setState({ isOptionsOpen: false });
     } else {
       this[`fileOptions-${this.props.id}`].focus();
-      this.props.showFileOptions(this.props.id);
+      this.setState({ isOptionsOpen: true });
     }
   }
 
+  hideFileOptions() {
+    this.setState({ isOptionsOpen: false });
+  }
+
+  showEditFileName() {
+    this.setState({ isEditingName: true });
+  }
+
+  hideEditFileName() {
+    this.setState({ isEditingName: false });
+  }
+
   renderChild(childId) {
     return (
       <li key={childId}>
@@ -78,8 +98,8 @@ export class FileNode extends React.Component {
       'sidebar__root-item': this.props.name === 'root',
       'sidebar__file-item': this.props.name !== 'root',
       'sidebar__file-item--selected': this.props.isSelectedFile,
-      'sidebar__file-item--open': this.props.isOptionsOpen,
-      'sidebar__file-item--editing': this.props.isEditingName,
+      'sidebar__file-item--open': this.state.isOptionsOpen,
+      'sidebar__file-item--editing': this.state.isEditingName,
       'sidebar__file-item--closed': this.props.isFolderClosed
     });
     return (
@@ -123,7 +143,7 @@ export class FileNode extends React.Component {
                   ref={(element) => { this.fileNameInput = element; }}
                   onBlur={() => {
                     this.validateFileName();
-                    this.props.hideEditFileName(this.props.id);
+                    this.hideEditFileName();
                   }}
                   onKeyPress={this.handleKeyPress}
                 />
@@ -133,7 +153,7 @@ export class FileNode extends React.Component {
                   ref={(element) => { this[`fileOptions-${this.props.id}`] = element; }}
                   tabIndex="0"
                   onClick={this.toggleFileOptions}
-                  onBlur={() => setTimeout(() => this.props.hideFileOptions(this.props.id), 200)}
+                  onBlur={() => setTimeout(this.hideFileOptions, 200)}
                 >
                   <InlineSVG src={downArrowUrl} />
                 </button>
@@ -173,7 +193,7 @@ export class FileNode extends React.Component {
                       <button
                         onClick={() => {
                           this.originalFileName = this.props.name;
-                          this.props.showEditFileName(this.props.id);
+                          this.showEditFileName();
                           setTimeout(() => this.fileNameInput.focus(), 0);
                         }}
                         className="sidebar__file-item-option"
@@ -222,15 +242,9 @@ FileNode.propTypes = {
   name: PropTypes.string.isRequired,
   fileType: PropTypes.string.isRequired,
   isSelectedFile: PropTypes.bool,
-  isOptionsOpen: PropTypes.bool,
-  isEditingName: PropTypes.bool,
   isFolderClosed: PropTypes.bool,
   setSelectedFile: PropTypes.func.isRequired,
-  showFileOptions: PropTypes.func.isRequired,
-  hideFileOptions: PropTypes.func.isRequired,
   deleteFile: PropTypes.func.isRequired,
-  showEditFileName: PropTypes.func.isRequired,
-  hideEditFileName: PropTypes.func.isRequired,
   updateFileName: PropTypes.func.isRequired,
   resetSelectedFile: PropTypes.func.isRequired,
   newFile: PropTypes.func.isRequired,
@@ -242,8 +256,6 @@ FileNode.propTypes = {
 FileNode.defaultProps = {
   parentId: '0',
   isSelectedFile: false,
-  isOptionsOpen: false,
-  isEditingName: false,
   isFolderClosed: false
 };
 

client/modules/IDE/pages/IDEView.jsx

@@ -296,11 +296,7 @@ class IDEView extends React.Component {
               setSelectedFile={this.props.setSelectedFile}
               newFile={this.props.newFile}
               isExpanded={this.props.ide.sidebarIsExpanded}
-              showFileOptions={this.props.showFileOptions}
-              hideFileOptions={this.props.hideFileOptions}
               deleteFile={this.props.deleteFile}
-              showEditFileName={this.props.showEditFileName}
-              hideEditFileName={this.props.hideEditFileName}
               updateFileName={this.props.updateFileName}
               projectOptionsVisible={this.props.ide.projectOptionsVisible}
               openProjectOptions={this.props.openProjectOptions}
@@ -624,11 +620,7 @@ IDEView.propTypes = {
   cloneProject: PropTypes.func.isRequired,
   expandConsole: PropTypes.func.isRequired,
   collapseConsole: PropTypes.func.isRequired,
-  showFileOptions: PropTypes.func.isRequired,
-  hideFileOptions: PropTypes.func.isRequired,
   deleteFile: PropTypes.func.isRequired,
-  showEditFileName: PropTypes.func.isRequired,
-  hideEditFileName: PropTypes.func.isRequired,
   updateFileName: PropTypes.func.isRequired,
   showEditProjectName: PropTypes.func.isRequired,
   hideEditProjectName: PropTypes.func.isRequired,

client/modules/IDE/reducers/files.js

@@ -155,22 +155,6 @@ const files = (state, action) => {
           fileType: action.fileType || 'file'
         }];
     }
-    case ActionTypes.SHOW_FILE_OPTIONS:
-      return state.map((file) => {
-        if (file.id !== action.id) {
-          return file;
-        }
-
-        return Object.assign({}, file, { isOptionsOpen: true });
-      });
-    case ActionTypes.HIDE_FILE_OPTIONS:
-      return state.map((file) => {
-        if (file.id !== action.id) {
-          return file;
-        }
-
-        return Object.assign({}, file, { isOptionsOpen: false });
-      });
     case ActionTypes.UPDATE_FILE_NAME:
       return state.map((file) => {
         if (file.id !== action.id) {
@@ -192,22 +176,6 @@ const files = (state, action) => {
       // });
       // return newState.filter(file => file.id !== action.id);
     }
-    case ActionTypes.SHOW_EDIT_FILE_NAME:
-      return state.map((file) => {
-        if (file.id !== action.id) {
-          return file;
-        }
-
-        return Object.assign({}, file, { isEditingName: true });
-      });
-    case ActionTypes.HIDE_EDIT_FILE_NAME:
-      return state.map((file) => {
-        if (file.id !== action.id) {
-          return file;
-        }
-
-        return Object.assign({}, file, { isEditingName: false });
-      });
     case ActionTypes.SET_SELECTED_FILE:
       return state.map((file) => {
         if (file.id === action.selectedFile) {