From 1b083fe54b60848caf5198875be591d0c062b067 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 10 Apr 2020 13:42:33 -0300
Subject: [PATCH] :ok_hand: move filename change tracking logic to FileNode
 component state

---
 client/modules/IDE/actions/files.js        |  5 ++---
 client/modules/IDE/components/FileNode.jsx | 22 +++++++++++++++-------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js
index 99fd5e58..5edcf74d 100644
--- a/client/modules/IDE/actions/files.js
+++ b/client/modules/IDE/actions/files.js
@@ -135,10 +135,9 @@ export function createFolder(formProps) {
   };
 }
 
-export function updateFileName(id, name, updatedName = '') {
+export function updateFileName(id, name) {
   return (dispatch) => {
-    if (name !== updatedName) dispatch(setUnsavedChanges(true));
-
+    dispatch(setUnsavedChanges(true));
     dispatch({
       type: ActionTypes.UPDATE_FILE_NAME,
       id,
diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 160cc6a3..1b348ea9 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -31,6 +31,7 @@ export class FileNode extends React.Component {
       isOptionsOpen: false,
       isEditingName: false,
       isFocused: false,
+      updatedName: this.props.name
     };
   }
 
@@ -48,8 +49,16 @@ export class FileNode extends React.Component {
   }
 
   getName() {
-    const { updatedName, name } = this.props;
-    return updatedName || name;
+    return this.state.updatedName;
+  }
+
+  commitFileNameChange() {
+    const { updatedName } = this.state;
+    const { name, updateFileName, id } = this.props;
+
+    if (updatedName !== name) {
+      updateFileName(id, updatedName);
+    }
   }
 
   handleFileClick(e) {
@@ -59,9 +68,9 @@ export class FileNode extends React.Component {
     }
   }
 
-
   handleFileNameChange(event) {
-    this.props.updateFileName(this.props.id, event.target.value, this.getName());
+    const newname = event.target.value;
+    this.setState({ updatedName: newname });
   }
 
   handleKeyPress(event) {
@@ -82,7 +91,7 @@ export class FileNode extends React.Component {
     const hasEmptyFilename = newFileName === '';
     const hasOnlyExtension = newFileExtension && newFileName === newFileExtension[0];
     if (hasEmptyFilename || hasNoExtension || notSameExtension || hasOnlyExtension || hasExtensionIfFolder) {
-      this.props.updateFileName(this.props.id, this.originalFileName, this.getName());
+      this.props.updateFileName(this.props.id, this.originalFileName);
     }
   }
 
@@ -109,6 +118,7 @@ export class FileNode extends React.Component {
 
   hideEditFileName() {
     this.setState({ isEditingName: false });
+    this.commitFileNameChange();
   }
 
   renderChild(childId) {
@@ -284,7 +294,6 @@ FileNode.propTypes = {
   parentId: PropTypes.string,
   children: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   name: PropTypes.string.isRequired,
-  updatedName: PropTypes.string,
   fileType: PropTypes.string.isRequired,
   isSelectedFile: PropTypes.bool,
   isFolderClosed: PropTypes.bool,
@@ -303,7 +312,6 @@ FileNode.defaultProps = {
   parentId: '0',
   isSelectedFile: false,
   isFolderClosed: false,
-  updatedName: '',
 };
 
 function mapStateToProps(state, ownProps) {