From d348f79d2a0aafe15c2d5bc09641e42b9ac5fcf5 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Thu, 2 Apr 2020 17:52:04 -0400
Subject: [PATCH] Add ref to focus in Collection List, handle whitespace errors
 in renaming sketch and collection

---
 .../CollectionList/CollectionListRow.jsx      | 30 ++++++++++---------
 client/modules/IDE/components/SketchList.jsx  | 23 ++++++++++----
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index 93513511..0f7f9a53 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -25,6 +25,7 @@ class CollectionListRowBase extends React.Component {
       renameOpen: false,
       renameValue: '',
     };
+    this.renameInput = React.createRef();
   }
 
   onFocusComponent = () => {
@@ -89,7 +90,7 @@ class CollectionListRowBase extends React.Component {
     this.setState({
       renameOpen: true,
       renameValue: this.props.collection.name,
-    });
+    }, () => this.renameInput.current.focus());
   }
 
   handleRenameChange = (e) => {
@@ -99,23 +100,23 @@ class CollectionListRowBase extends React.Component {
   }
 
   handleRenameEnter = (e) => {
-    const isValid = this.state.renameValue !== '';
-
     if (e.key === 'Enter') {
-      if (isValid) {
-        this.props.editCollection(this.props.collection.id, { name: this.state.renameValue });
-      }
-
-      // this.resetName();
+      this.updateName();
       this.closeAll();
     }
   }
 
-  // resetName = () => {
-  //   this.setState({
-  //     renameValue: this.props.collection.name
-  //   });
-  // }
+  handleRenameBlur = () => {
+    this.updateName();
+    this.closeAll();
+  }
+
+  updateName = () => {
+    const isValid = this.state.renameValue.trim().length !== 0;
+    if (isValid) {
+      this.props.editCollection(this.props.collection.id, { name: this.state.renameValue.trim() });
+    }
+  }
 
   renderActions = () => {
     const { optionsOpen } = this.state;
@@ -188,8 +189,9 @@ class CollectionListRowBase extends React.Component {
             value={renameValue}
             onChange={this.handleRenameChange}
             onKeyUp={this.handleRenameEnter}
-            // onBlur={this.resetName}
+            onBlur={this.handleRenameBlur}
             onClick={e => e.stopPropagation()}
+            ref={this.renameInput}
           />
         }
       </React.Fragment>
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 7f2c6082..83b90c2e 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -70,7 +70,8 @@ class SketchListRowBase extends React.Component {
 
   openRename = () => {
     this.setState({
-      renameOpen: true
+      renameOpen: true,
+      renameValue: this.props.sketch.name
     }, () => this.renameInput.current.focus());
   }
 
@@ -95,15 +96,27 @@ class SketchListRowBase extends React.Component {
 
   handleRenameEnter = (e) => {
     if (e.key === 'Enter') {
-      // TODO pass this func
-      this.props.changeProjectName(this.props.sketch.id, this.state.renameValue);
+      this.updateName();
       this.closeAll();
     }
   }
 
+  handleRenameBlur = () => {
+    this.updateName();
+    this.closeAll();
+  }
+
+  updateName = () => {
+    const isValid = this.state.renameValue.trim().length !== 0;
+    if (isValid) {
+      this.props.changeProjectName(this.props.sketch.id, this.state.renameValue.trim());
+    }
+  }
+
   resetSketchName = () => {
     this.setState({
-      renameValue: this.props.sketch.name
+      renameValue: this.props.sketch.name,
+      renameOpen: false
     });
   }
 
@@ -256,7 +269,7 @@ class SketchListRowBase extends React.Component {
           value={renameValue}
           onChange={this.handleRenameChange}
           onKeyUp={this.handleRenameEnter}
-          onBlur={this.resetSketchName}
+          onBlur={this.handleRenameBlur}
           onClick={e => e.stopPropagation()}
           ref={this.renameInput}
         />