From 78ed7b4b5f23f6da0d0312dfb24bc674287dafc1 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Fri, 15 Jul 2016 13:11:50 -0400
Subject: [PATCH] add download as zip

---
 client/components/Nav.js                 | 11 +++++++++++
 client/modules/IDE/actions/project.js    | 18 ++++++++++++++++++
 client/modules/IDE/components/Toolbar.js |  4 +++-
 client/modules/IDE/pages/IDEView.js      |  4 +++-
 client/styles/base/_base.scss            |  1 +
 package.json                             |  2 ++
 6 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/client/components/Nav.js b/client/components/Nav.js
index 85c82bb2..26068f49 100644
--- a/client/components/Nav.js
+++ b/client/components/Nav.js
@@ -28,6 +28,16 @@ function Nav(props) {
             </Link>
           </p>
         </li>
+        <li className="nav__item">
+          <a className="nav__export" onClick={props.exportProjectAsZip}>
+            Export (zip)
+          </a>
+        </li>
+        <li className="nav__item">
+          <a className="nav__clone">
+            Clone
+          </a>
+        </li>
       </ul>
       <ul className="nav__items-right">
         <li className="nav__item">
@@ -42,6 +52,7 @@ function Nav(props) {
 Nav.propTypes = {
   createProject: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
+  exportProjectAsZip: PropTypes.func.isRequired,
   user: PropTypes.shape({
     authenticated: PropTypes.bool.isRequired,
     username: PropTypes.string
diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js
index 913d979e..a26d2e2f 100644
--- a/client/modules/IDE/actions/project.js
+++ b/client/modules/IDE/actions/project.js
@@ -1,6 +1,8 @@
 import * as ActionTypes from '../../../constants';
 import { browserHistory } from 'react-router';
 import axios from 'axios';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
 
 const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
 
@@ -98,3 +100,19 @@ export function createProject() {
       }));
   };
 }
+
+export function exportProjectAsZip() {
+  return (dispatch, getState) => {
+    console.log('exporting project!');
+    const state = getState();
+    const zip = new JSZip();
+    state.files.forEach(file => {
+      zip.file(file.name, file.content);
+    });
+
+    zip.generateAsync({ type: 'blob' }).then((content) => {
+      saveAs(content, `${state.project.name}.zip`);
+    });
+  };
+}
+
diff --git a/client/modules/IDE/components/Toolbar.js b/client/modules/IDE/components/Toolbar.js
index 1d4a66c7..4d3d00bd 100644
--- a/client/modules/IDE/components/Toolbar.js
+++ b/client/modules/IDE/components/Toolbar.js
@@ -63,7 +63,9 @@ Toolbar.propTypes = {
   setProjectName: PropTypes.func.isRequired,
   projectName: PropTypes.string.isRequired,
   openPreferences: PropTypes.func.isRequired,
-  owner: PropTypes.string.isRequired
+  owner: PropTypes.shape({
+    username: PropTypes.string
+  })
 };
 
 export default Toolbar;
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index d186d375..ec3842a6 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -29,6 +29,7 @@ class IDEView extends React.Component {
           user={this.props.user}
           createProject={this.props.createProject}
           saveProject={this.props.saveProject}
+          exportProjectAsZip={this.props.exportProjectAsZip}
         />
         <Toolbar
           className="Toolbar"
@@ -144,7 +145,8 @@ IDEView.propTypes = {
   newFile: PropTypes.func.isRequired,
   closeNewFileModal: PropTypes.func.isRequired,
   expandSidebar: PropTypes.func.isRequired,
-  collapseSidebar: PropTypes.func.isRequired
+  collapseSidebar: PropTypes.func.isRequired,
+  exportProjectAsZip: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index 4f5358bb..bb443366 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -19,6 +19,7 @@ body, input, button {
 a {
 	text-decoration: none;
 	color: $light-inactive-text-color;
+	cursor: pointer;
 	&:hover {
 		text-decoration: none;
 		color: $light-primary-text-color;
diff --git a/package.json b/package.json
index d55afffc..f92b3565 100644
--- a/package.json
+++ b/package.json
@@ -71,8 +71,10 @@
     "eslint-loader": "^1.3.0",
     "express": "^4.13.4",
     "express-session": "^1.13.0",
+    "file-saver": "^1.3.2",
     "htmlhint": "^0.9.13",
     "jshint": "^2.9.2",
+    "jszip": "^3.0.0",
     "moment": "^2.14.1",
     "mongoose": "^4.4.16",
     "passport": "^0.3.2",