SketchList Rename initial UI completed

Author: LakshSingla

client/modules/IDE/components/SketchList.jsx

@@ -20,7 +20,8 @@ class SketchList extends React.Component {
     super(props);
     this.props.getProjects(this.props.username);
     this.state = {
-      actionDialogueDisplayed: new Array(this.props.sketches.length).fill(false)
+      actionDialogueDisplayed: new Array(this.props.sketches.length).fill(false),
+      renameBoxDisplayed: new Array(this.props.sketches.length).fill(false)
     };
   }
 
@@ -37,13 +38,22 @@ class SketchList extends React.Component {
     });
   }
 
+  closeAllRenameBoxes() {
+    this.setState({
+      renameBoxDisplayed: new Array(this.props.sketches.length).fill(false)
+    });
+  }
+
   render() {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
     return (
       <div
         className="sketches-table-container"
         role="presentation"
-        onClick={e => this.closeAllDropdowns()}
+        onClick={() => {
+          this.closeAllDropdowns();
+          this.closeAllRenameBoxes();
+        }}
       >
         <Helmet>
           <title>{this.getSketchesTitle()}</title>
@@ -57,7 +67,7 @@ class SketchList extends React.Component {
               <tr>
                 <th scope="col">Sketch</th>
                 <th scope="col">Date created</th>
-                <th scope="col">Date created</th>
+                <th scope="col">Date updated</th>
                 <th scope="col"></th>
               </tr>
             </thead>
@@ -72,10 +82,24 @@ class SketchList extends React.Component {
                       this.closeAllDropdowns();
                       return;
                     }
+                    if (this.state.renameBoxDisplayed.some(el => el)) {
+                      this.closeAllRenameBoxes();
+                      return;
+                    }
                     browserHistory.push(`/${username}/sketches/${sketch.id}`);
                   }}
                 >
-                  <th scope="row"><Link to={`/${username}/sketches/${sketch.id}`}>{sketch.name}</Link></th>
+                  <th scope="row">
+                    <Link to={`/${username}/sketches/${sketch.id}`}>
+                      {this.state.renameBoxDisplayed[i] ? '' : sketch.name}
+                    </Link>
+                    {this.state.renameBoxDisplayed[i]
+                      &&
+                      <input
+                        onClick={e => e.stopPropagation()}
+                      />
+                    }
+                  </th>
                   <td>{moment(sketch.createdAt).format('MMM D, YYYY h:mm A')}</td>
                   <td>{moment(sketch.updatedAt).format('MMM D, YYYY h:mm A')}</td>
                   <td className="sketch-list__dropdown-column">
@@ -126,7 +150,19 @@ class SketchList extends React.Component {
                             File actions
                         </div>
                         <div className="sketch-list__action-dashed-line" />
-                        <div className="sketch-list__action-option">
+                        <div
+                          role="presentation"
+                          className="sketch-list__action-option"
+                          onClick={() => {
+                            this.closeAllRenameBoxes();
+                            const renameBoxDisplayed = new Array(this.props.sketches.length).fill(false);
+                            renameBoxDisplayed[i] = true;
+                            this.setState({
+                              renameBoxDisplayed
+                            });
+                            this.closeAllDropdowns();
+                          }}
+                        >
                             Rename
                         </div>
                         { this.props.project.id &&