add download as zip

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

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`);
+    });
+  };
+}
+

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;

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) {

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;

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",