Export button working with components stored in zip

Co-authored-by: Sophia Bui <[email protected]>
Co-authored-by: Matteo <[email protected]>
Co-authored-by: Adam Vanek <[email protected]>

Author: 4 people

app/src/components/right/ExportButton.tsx

@@ -7,11 +7,13 @@ import Button from '@mui/material/Button';
 import exportProject from '../../utils/exportProject.util';
 import createModal from './createModal';
 import { useSelector } from 'react-redux';
-
+import { RootState } from '../../redux/store';
+const JSZip = require("jszip");
+import { saveAs } from 'file-saver';
 
 export default function ExportButton() {
   const [modal, setModal] = useState(null);
-  const state = useSelector(store => store.appState)
+  const state = useSelector((store: RootState) => store.appState);
 
   const genOptions: string[] = [
     'Export components',
@@ -53,41 +55,22 @@ export default function ExportButton() {
 
       //This is exclusive to the electron app
       // window.api.chooseAppDir();
-      testchecked = document.getElementById('tests').checked;
-      console.log();
-      localStorage.setItem('myCat', 'Tom');
+      // testchecked = document.getElementById('tests').checked;
+
+      var zip = new JSZip();
+      let componentFolder = zip.folder('componentfolder')
+      for (let i in state.components){
+        componentFolder.file(`${state.components[i].name}.jsx`, state.components[i].code)
+      }
+      zip.generateAsync({type:"blob"})
+      .then(function(content) {
+          // see FileSaver.js
+          saveAs(content, "ReacTypeApp.zip");
+      });
+     
       closeModal();
     };
 
-    // const testerFunc = () => {
-    //   exportProject(
-    //     path,
-    //     state.name
-    //       ? state.name
-    //       : 'New_ReacType_Project_' + Math.ceil(Math.random() * 99).toString(),
-    //     genOption,
-    //     testchecked,
-    //     state.projectType,
-    //     state.components,
-    //     state.rootComponents
-    //   )
-    // }
-    
-    // const testerFunc2 = () => {
-    //   const myFile = new File([])
-    //   exportProject(
-    //     path,
-    //     state.name
-    //       ? state.name
-    //       : 'New_ReacType_Project_' + Math.ceil(Math.random() * 99).toString(),
-    //     genOption,
-    //     testchecked,
-    //     state.projectType,
-    //     state.components,
-    //     state.rootComponents
-    //   )
-    // }
-
     setModal(
       createModal({
         closeModal,

package-lock.json

@@ -157,10 +157,12 @@
     "esbuild-wasm": "^0.14.51",
     "eslint-plugin-react-hooks": "^4.6.0",
     "express-session": "^1.17.3",
+    "file-saver": "^2.0.5",
     "fs": "^0.0.1-security",
     "graphql": "^16.6.0",
     "identity-obj-proxy": "^3.0.0",
     "js-cookie": "^3.0.1",
+    "jszip": "^3.10.1",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "mongoose": "^5.9.22",