From d7a6773995dac276ccb223b7c816a2f15ac958b8 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Wed, 3 Aug 2016 19:03:01 -0400
Subject: [PATCH] fix bugs in sketch list view

---
 client/modules/IDE/components/Sidebar.js      |  6 +++---
 client/modules/IDE/pages/IDEView.js           |  8 ++++++++
 client/modules/Sketch/pages/SketchListView.js | 16 +++++++++++-----
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js
index fcaaae14..47300f48 100644
--- a/client/modules/IDE/components/Sidebar.js
+++ b/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>
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index 6d8eb7ca..9a8cf29e 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/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">
diff --git a/client/modules/Sketch/pages/SketchListView.js b/client/modules/Sketch/pages/SketchListView.js
index 822a8e8d..06f18d0b 100644
--- a/client/modules/Sketch/pages/SketchListView.js
+++ b/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>
-            <th scope="col">Created</th>
-            <th scope="col">Last Updated</th>
+            <tr>
+              <th scope="col">Name</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) {