Download function

Author: Ives van Hoorne

config/webpack.config.js

@@ -84,6 +84,11 @@ const config = {
         test: /\.css$/,
         loaders: ['style-loader', 'css-loader'],
       },
+      // For importing README.md
+      {
+        test: /\.md$/,
+        loader: 'raw-loader',
+      },
       // "file" loader makes sure those assets get served by WebpackDevServer.
       // When you `import` an asset, you get its (virtual) filename.
       // In production, they would get copied to the `build` folder.

package.json

@@ -49,6 +49,7 @@
     "postcss-loader": "^1.2.1",
     "prettier": "0.21.0",
     "promise": "7.1.1",
+    "raw-loader": "^0.5.1",
     "react-hot-loader": "^3.0.0-beta.6",
     "recursive-readdir": "^2.1.0",
     "rimraf": "^2.6.1",
@@ -69,10 +70,12 @@
     "color": "^0.11.4",
     "cssnano": "^3.10.0",
     "debug": "^2.5.1",
+    "file-saver": "^1.3.3",
     "glamor": "^2.20.12",
     "gulp": "^3.9.1",
     "gulp-postcss": "^6.4.0",
     "humps": "CompuIves/humps",
+    "jszip": "^3.1.3",
     "lodash": "^4.17.2",
     "moment": "^2.17.1",
     "normalize.css": "^5.0.0",

src/app/pages/SandboxView/Sandbox/Editor/Content/Header/index.js

@@ -108,6 +108,11 @@ export default class Header extends React.PureComponent {
     sandboxActions.massUpdateModules(sandbox.id);
   };
 
+  zipSandbox = () => {
+    const { sandbox, sandboxActions } = this.props;
+    sandboxActions.createZip(sandbox.id);
+  };
+
   forkSandbox = () => {
     const { sandbox, sandboxActions } = this.props;
 
@@ -147,7 +152,7 @@ export default class Header extends React.PureComponent {
             title="Save"
             Icon={Save}
           />
-          <Action title="Download" Icon={Download} placeholder="Coming soon!" />
+          <Action title="Download" Icon={Download} onClick={this.zipSandbox} />
           <Action title="Import" Icon={Import} placeholder="Coming soon!" />
         </Left>