Added download functionality to Dialog box

Author: LakshSingla

client/modules/IDE/components/SketchList.jsx

@@ -31,15 +31,19 @@ class SketchList extends React.Component {
     return `p5.js Web Editor | ${this.props.username}'s sketches`;
   }
 
+  closeAllDropdowns() {
+    this.setState({
+      actionDialogueDisplayed: 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.setState({
-          actionDialogueDisplayed: new Array(this.props.sketches.length).fill(false)
-        })}
+        onClick={e => this.closeAllDropdowns()}
       >
         <Helmet>
           <title>{this.getSketchesTitle()}</title>
@@ -139,16 +143,23 @@ class SketchList extends React.Component {
                         <div className="sketch-list__action-option">
                             Rename
                         </div>
-                        <div className="sketch-list__action-option">
+                        { this.props.project.id &&
+                        <div
+                          role="presentation"
+                          className="sketch-list__action-option"
+                          onClick={() => {
+                            this.props.autosaveProject();
+                            this.props.exportProjectAsZip(this.props.project.id);
+                          }}
+                        >
                             Download
-                        </div>
+                        </div> }
                         { this.props.project.id && this.props.user.authenticated &&
                         <div
                           role="presentation"
                           className="sketch-list__action-option"
                           onClick={() => {
                             this.props.cloneProject();
-                            this.setDropdown('none');
                           }}
                         >
                             Duplicate
@@ -158,7 +169,6 @@ class SketchList extends React.Component {
                           role="presentation"
                           className="sketch-list__action-option"
                           onClick={() => {
-                            console.log(this.props.project);
                             this.props.showShareModal();
                           }}
                         >
@@ -170,12 +180,7 @@ class SketchList extends React.Component {
                           onClick={(e) => {
                             e.stopPropagation();
                             if (window.confirm(`Are you sure you want to delete "${sketch.name}"?`)) {
-                              this.setState(() => {
-                                const actionDialogueDisplayed = new Array(this.props.sketches.length).fill(false);
-                                return {
-                                  actionDialogueDisplayed,
-                                };
-                              });
+                              this.closeAllDropdowns();
                               this.props.deleteProject(sketch.id);
                             }
                           }}
@@ -213,7 +218,9 @@ SketchList.propTypes = {
       id: PropTypes.string
     })
   }),
-  cloneProject: PropTypes.func.isRequired
+  cloneProject: PropTypes.func.isRequired,
+  autosaveProject: PropTypes.func.isRequired,
+  exportProjectAsZip: PropTypes.func.isRequired,
 };
 
 SketchList.defaultProps = {