fix bugs in sketch list view

client/modules/IDE/components/Sidebar.js

@@ -29,21 +29,21 @@ class Sidebar extends React.Component {
             <button
               aria-label="add file"
               className="sidebar__add"
-              onClick={props.newFile}
+              onClick={this.props.newFile}
             >
               +
             </button>
             <button
               aria-label="collapse file navigation"
               className="sidebar__contract"
-              onClick={props.collapseSidebar}
+              onClick={this.props.collapseSidebar}
             >
               <InlineSVG src={leftArrowUrl} />
             </button>
             <button
               aria-label="expand file navigation"
               className="sidebar__expand"
-              onClick={props.expandSidebar}
+              onClick={this.props.expandSidebar}
             >
               <InlineSVG src={rightArrowUrl} />
             </button>

client/modules/IDE/pages/IDEView.js

@@ -19,9 +19,17 @@ class IDEView extends React.Component {
     if (this.props.params.project_id) {
       const id = this.props.params.project_id;
       this.props.getProject(id);
+
+      // if autosave is enabled
+      this.autosaveInterval = setInterval(this.props.saveProject, 30000);
     }
   }
 
+  componentWillUnmount() {
+    clearInterval(this.autosaveInterval);
+    this.autosaveInterval = null;
+  }
+
   render() {
     return (
       <div className="ide">

client/modules/Sketch/pages/SketchListView.js

@@ -19,16 +19,20 @@ class SketchListView extends React.Component {
           user={this.props.user}
           createProject={this.props.createProject}
           saveProject={this.props.saveProject}
+          exportProjectAsZip={this.props.exportProjectAsZip}
+          cloneProject={this.props.cloneProject}
         />
         <table className="sketches-table" summary="table containing all saved projects">
           <thead>
-            <th scope="col">Name</th>
+            <tr>
-            <th scope="col">Created</th>
+              <th scope="col">Name</th>
-            <th scope="col">Last Updated</th>
+              <th scope="col">Created</th>
+              <th scope="col">Last Updated</th>
+            </tr>
           </thead>
           <tbody>
             {this.props.sketches.map(sketch =>
-              <tr className="sketches-table__row">
+              <tr className="sketches-table__row" key={sketch.id}>
                 <td scope="row"><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
                 <td>{moment(sketch.createdAt).format('MMM D, YYYY')}</td>
                 <td>{moment(sketch.updatedAt).format('MMM D, YYYY')}</td>
@@ -46,7 +50,9 @@ SketchListView.propTypes = {
   createProject: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
   getProjects: PropTypes.func.isRequired,
-  sketches: PropTypes.array.isRequired
+  sketches: PropTypes.array.isRequired,
+  exportProjectAsZip: PropTypes.func.isRequired,
+  cloneProject: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {