CSS save & export working

Author: Rachel Kucharski

app/src/components/bottom/StylesEditor.tsx

@@ -20,45 +20,50 @@ const StylesEditor: React.FC<{
 }> = ({ theme, setTheme }) => {
   const wrapper = useRef();
   const [css, setCss] = useState();
+  
+  let currentCss = localStorage.getItem('css');
+  
+  //This was being used for the demo
 
-  useEffect(() => {
-    loadFile();  
-  }, []);
+  // useEffect(() => {
+  //   loadFile();  
+  // }, []);
 
-  const loadFile = () => {
-    const myHeaders = new Headers({
-      'Content-Type': 'text/css',
-      Accept: 'text/css',
-    });
-    fetch(`${serverURL}/demoRender`, {
-      headers: myHeaders,
-    })
-      .then(response => response.text())
-      .then((data) => {
-        setCss(data);
-      });
-  }
+  // const loadFile = () => {
+  //   const myHeaders = new Headers({
+  //     'Content-Type': 'text/css',
+  //     Accept: 'text/css',
+  //   });
+  //   fetch(`${serverURL}/demoRender`, {
+  //     headers: myHeaders,
+  //   })
+  //     .then(response => response.text())
+  //     .then((data) => {
+  //       setCss(data);
+  //     });
+  // }
 
-  const saveFile = () => {
-    console.log(css)
-    fetch(`${serverURL}/user-styles/save`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ data: css }),
-    })
-      .then(response => response.text())
-      .then((data) => {
-        // Removes old link to css and creates a new stylesheet link on demo render
-        cssRefresher();
-      });
-  }
+  // const saveFile = () => {
+  //   fetch(`${serverURL}/user-styles/save`, {
+  //     method: 'POST',
+  //     headers: { 'Content-Type': 'application/json' },
+  //     body: JSON.stringify({ data: css }),
+  //   })
+  //     .then(response => response.text())
+  //     .then((data) => {
+  //       // Removes old link to css and creates a new stylesheet link on demo render
+  //       cssRefresher();
+  //     });
+  // }
+
+  //refactored this function to store the css on local storage rather than invoke saveFile()
   const saveCss = (e) => {
     e.preventDefault();
-    saveFile();
+    localStorage.setItem('css', currentCss)
   }
 
   const handleChange = (text) => {
-    setCss(text);
+    currentCss = text;
   }
 
   return (
@@ -77,7 +82,7 @@ const StylesEditor: React.FC<{
         width="100%"
         height="100%"
         onChange={handleChange}
-        value={css}
+        value={currentCss}
         name="Css_div"
         fontSize={16}
         tabSize={2}

app/src/components/main/DemoRender.tsx

@@ -175,9 +175,9 @@ const DemoRender = (): JSX.Element => {
     }
   });
 
-  useEffect(() => {
-    cssRefresher();
-  }, []);
+  // useEffect(() => {
+  //   cssRefresher();
+  // }, []);
 
   useEffect(() => {
     iframe.current.contentWindow.postMessage(code, '*');

app/src/components/right/ExportButton.tsx

@@ -8,8 +8,7 @@ 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';
+import zipFiles from '../../helperFunctions/zipFiles';
 
 export default function ExportButton() {
   const [modal, setModal] = useState(null);
@@ -56,17 +55,7 @@ export default function ExportButton() {
       //This is exclusive to the electron app
       // window.api.chooseAppDir();
       // 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");
-      });
+      zipFiles(state);
 
       closeModal();
     };

app/src/helperFunctions/zipFiles.ts

@@ -0,0 +1,21 @@
+import { saveAs } from 'file-saver';
+const JSZip = require("jszip");
+
+const zipFiles = (state) => {
+  var zip = new JSZip();
+  let reacTypeApp = zip.folder('ReacTypeApp');
+  let componentFolder = reacTypeApp.folder('componentfolder');
+  for (let i in state.components){
+    componentFolder.file(`${state.components[i].name}.jsx`, state.components[i].code);
+  }
+  if(localStorage.getItem('css')){
+    reacTypeApp.file('style.css', localStorage.getItem('css'));
+  }
+  zip.generateAsync({type:"blob"})
+  .then(function(content) {
+    // see FileSaver.js
+    saveAs(content, "ReacTypeApp.zip");
+  });
+};
+
+export default zipFiles;