Merge pull request #42 from oslabs-beta/css-editor

CSS Editor fully functional

Author: rachelk585

app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx

@@ -54,14 +54,19 @@ const CreateContainer = () => {
 
   const triggerError = (type: String) => {
     setErrorStatus(true);
-    if (type === 'empty') {
-      setErrorMsg('Context name cannot be blank.');
-    } else if (type === 'dupe') {
-      setErrorMsg('Context name already exists.');
-    } else if (type === 'letters') {
-      setErrorMsg('Context name must start with a letter.');
-    } else if (type === 'symbolsDetected') {
-      setErrorMsg('Context name must not contain symbols.');
+    switch (type) {
+      case 'empty':
+        setErrorMsg('Context name cannot be blank.');
+        break;
+      case 'dupe':
+        setErrorMsg('Context name already exists.');
+        break;
+      case 'letters':
+        setErrorMsg('Context name must start with a letter.');
+        break;
+      case 'symbolsDetected':
+        setErrorMsg('Context name must not contain symbols.');
+        break;
     }
   };
 

app/src/components/bottom/BottomTabs.tsx

@@ -170,8 +170,7 @@ const useStyles = makeStyles((theme) => ({
     textTransform: 'initial',
     minWidth: 40,
     // fontWeight: theme.typography.fontWeightRegular,
-    marginRight: '16px',
-    marginLeft: '16px',
+    margin: '0 16px',
 
     fontFamily: [
       '-apple-system',
@@ -198,12 +197,12 @@ const useStyles = makeStyles((theme) => ({
     }
   },
   tabSelected: {},
-  // typography: {
-  //   padding: theme.spacing(3)
-  // // },
-  // padding: {
-  //   padding: `0 ${theme.spacing(2)}`
-  // },
+  typography: {
+    padding: '24px'
+  },
+  padding: {
+    padding: `0 16px`
+  },
   switch: {
     marginRight: '10px',
     marginTop: '2px'

app/src/components/bottom/StylesEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/mode-css';
 import 'ace-builds/src-noconflict/theme-monokai';
@@ -10,71 +10,42 @@ import 'ace-builds/src-noconflict/theme-monokai';
 import 'ace-builds/src-min-noconflict/ext-searchbox';
 import Fab from '@mui/material/Fab';
 import SaveIcon from '@mui/icons-material/Save';
-import cssRefresher from '../../helperFunctions/cssRefresh';
-
-//This was being used for the demo
-// const serverURL = 'https://reactype-caret.herokuapp.com';
+import { updateStylesheet } from '../../redux/reducers/slice/appStateSlice';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../redux/store';
 
 const StylesEditor: React.FC<{
   theme: string | null;
   setTheme: any | null;
 }> = ({ theme, setTheme }) => {
   const wrapper = useRef();
-  const [css, setCss] = useState();
-  //now using variable and storing CSS in localStorage to retain CSS upon dismount of the component
-  let currentCss = localStorage.getItem('css');
-  
-  //This was being used for the demo
-
-  // 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 stylesheet = useSelector(
+    (state: RootState) => state.appState.stylesheet
+  );
+  //sets state for what text is currently in the csseditor
+  const [css, setCss] = useState(stylesheet);
 
-  // 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();
-  //     });
-  // }
+  const dispatch = useDispatch();
 
-  //refactored this function to store the css on local storage rather than invoke saveFile()
+  //on save, updates the state based on above hook and rerenders the demo
   const saveCss = (e) => {
     e.preventDefault();
-    localStorage.setItem('css', currentCss)
-  }
+    dispatch(updateStylesheet(css));
+  };
 
+  //handles changes in the ace editor
   const handleChange = (text) => {
-    currentCss = text;
-  }
+    setCss(text);
+  };
 
   return (
     <div
-      className='text-editor'
+      className="text-editor"
       ref={wrapper}
       style={{
         height: '100%',
         maxWidth: '100%',
-        justifyContent: 'center',
+        justifyContent: 'center'
       }}
     >
       <AceEditor
@@ -83,7 +54,7 @@ const StylesEditor: React.FC<{
         width="100%"
         height="100%"
         onChange={handleChange}
-        value={currentCss}
+        value={css}
         name="Css_div"
         fontSize={16}
         tabSize={2}
@@ -93,7 +64,12 @@ const StylesEditor: React.FC<{
           enableLiveAutocompletion: true
         }}
       />
-      <Fab className='bttn' onClick={saveCss} color="secondary" aria-label="add">
+      <Fab
+        className="bttn"
+        onClick={saveCss}
+        color="secondary"
+        aria-label="add"
+      >
         <SaveIcon />
       </Fab>
     </div>

app/src/components/main/DemoRender.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
 import Box from '@mui/material/Box';
-import cssRefresher from '../../helperFunctions/cssRefresh';
 import { Component } from '../../interfaces/Interfaces';
 import ReactDOMServer from 'react-dom/server';
 import { useDispatch, useSelector } from 'react-redux';
@@ -11,11 +10,11 @@ import { RootState } from '../../redux/store';
 // DemoRender is the full sandbox demo of our user's custom built React components. DemoRender references the design specifications stored in state to construct
 // real react components that utilize hot module reloading to depict the user's prototype application.
 const DemoRender = (): JSX.Element => {
-  const state = useSelector((store:RootState) => store.appState);
-  const dispatch = useDispatch();
-  let currentComponent = state.components.find(
-    (elem: Component) => elem.id === state.canvasFocus.componentId
+  const state = useSelector((store: RootState) => store.appState);
+  const stylesheet = useSelector(
+    (store: RootState) => store.appState.stylesheet
   );
+  const dispatch = useDispatch();
 
   // Create React ref to inject transpiled code in inframe
   const iframe = useRef<any>();
@@ -32,7 +31,6 @@ const DemoRender = (): JSX.Element => {
       </head>
       <body>
         <div id="app">
-        
         </div>
         <script>
           window.addEventListener('message', (event) => {
@@ -42,7 +40,6 @@ const DemoRender = (): JSX.Element => {
                 element.addEventListener('click', (event) => {
                   event.preventDefault();
                   window.top.postMessage(event.currentTarget.href, '*');
-                  //document.body.style.backgroundColor = 'orange';
                 }, true)
               });
             } catch (err) {
@@ -64,9 +61,7 @@ const DemoRender = (): JSX.Element => {
       state.components?.find((el) => {
         return el.name.toLowerCase() === component.toLowerCase();
       }).id;
-    componentId &&
-    dispatch(changeFocus({ componentId, childId: null}));
-  
+    componentId && dispatch(changeFocus({ componentId, childId: null }));
   };
 
   //  This function is the heart of DemoRender it will take the array of components stored in state and dynamically construct the desired React component for the live demo
@@ -163,11 +158,15 @@ const DemoRender = (): JSX.Element => {
     return componentsToRender;
   };
 
+  //initializes our 'code' which will be whats actually in the iframe in the demo render
+  //this will reset every time we make a change
   let code = '';
+
   const currComponent = state.components.find(
     (element) => element.id === state.canvasFocus.componentId
   );
 
+  //writes each component to the code
   componentBuilder(currComponent.children).forEach((element) => {
     try {
       code += ReactDOMServer.renderToString(element);
@@ -176,24 +175,26 @@ const DemoRender = (): JSX.Element => {
     }
   });
 
-  // useEffect(() => {
-  //   cssRefresher();
-  // }, []);
+  //writes our stylesheet from state to the code
+  code += `<style>${stylesheet}</style>`;
 
+  //adds the code into the iframe
   useEffect(() => {
     iframe.current.contentWindow.postMessage(code, '*');
   }, [code]);
 
   return (
-    <div id={'renderFocus'} style={demoContainerStyle}>
-      <iframe
-        ref={iframe}
-        sandbox="allow-scripts"
-        srcDoc={html}
-        width="100%"
-        height="100%"
-      />
-    </div>
+    <>
+      <div id={'renderFocus'} style={demoContainerStyle}>
+        <iframe
+          ref={iframe}
+          sandbox="allow-scripts"
+          srcDoc={html}
+          width="100%"
+          height="100%"
+        />
+      </div>
+    </>
   );
 };
 

app/src/components/right/ExportButton.tsx

@@ -15,9 +15,7 @@ export default function ExportButton() {
   const [modal, setModal] = useState(null);
   const state = useSelector((store: RootState) => store.appState);
 
-  const genOptions: string[] = [
-    'Export components'
-  ];
+  const genOptions: string[] = ['Export components'];
 
   // Closes out the open modal
   const closeModal = () => setModal('');
@@ -27,6 +25,7 @@ export default function ExportButton() {
       <List className="export-preference">
         {genOptions.map((option: string, i: number) => (
           <ListItem
+            id="export-modal"
             key={i}
             onClick={() => chooseGenOptions()}
             style={{
@@ -60,7 +59,7 @@ export default function ExportButton() {
     );
   };
 
-  const exportKeyBind = useCallback(e => {
+  const exportKeyBind = useCallback((e) => {
     //Export Project
     (e.key === 'e' && e.metaKey) || (e.key === 'e' && e.ctrlKey)
       ? showGenerateAppModal()
@@ -75,10 +74,18 @@ export default function ExportButton() {
   }, []);
   return (
     <div>
-      <button onClick={showGenerateAppModal}>Export Project
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-download" viewBox="0 0 16 16">
-          <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
-          <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+      <button onClick={showGenerateAppModal}>
+        Export Project
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-download"
+          viewBox="0 0 16 16"
+        >
+          <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
+          <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" />
         </svg>
       </button>
       {modal}
@@ -90,7 +97,6 @@ export default function ExportButton() {
 //The below code is exclusive to ReacType's Electron App
 //If you would like to deploy the app, please comment out the exportButton function above and uncomment the code below
 
-
 // export default function ExportButton() {
 //   const [modal, setModal] = useState(null);
 //   const state = useSelector(store => store.appState)

app/src/helperFunctions/cssRefresh.tsx

@@ -1,16 +1,16 @@
 // Removes old link to css and creates a new stylesheet link on demo render
 // this is not currently being used for the website version
 const cssRefresher = () => {
-  const oldStylesheet = document.getElementById('Render Stylesheet')
+  const oldStylesheet = document.getElementById('stylesheet');
   console.log(oldStylesheet);
   if (oldStylesheet !== null) oldStylesheet.remove();
-  const rando = Math.random() * 100000;
-  const newStylesheet = document.createElement("LINK");
-  newStylesheet.setAttribute("rel", "stylesheet")
-  newStylesheet.setAttribute("type", "text/css");
-  newStylesheet.setAttribute("href", `https://reactype-caret.herokuapp.com/demoRender?${rando}`);
-  newStylesheet.setAttribute("id", 'Render Stylesheet');
+  // const rando = Math.random() * 100000;
+  const newStylesheet = document.createElement('LINK');
+  newStylesheet.setAttribute('rel', 'stylesheet');
+  newStylesheet.setAttribute('type', 'text/css');
+  newStylesheet.setAttribute('href', 'fake.css');
+  newStylesheet.setAttribute('id', 'stylesheet');
   document.getElementById('renderFocus').append(newStylesheet);
-  console.log(newStylesheet)
-}
-export default cssRefresher;
+  console.log(newStylesheet);
+};
+export default cssRefresher;

app/src/helperFunctions/zipFiles.ts

@@ -14,10 +14,8 @@ const zipFiles = (state) => {
   for (let i in state.components){
     componentFolder.file(`${state.components[i].name}.jsx`, state.components[i].code);
   }
-  //writes our css file if we have a css file stored in local storage
-  if(localStorage.getItem('css')){
-    reacTypeApp.file('style.css', localStorage.getItem('css'));
-  }
+  //writes our css file
+    reacTypeApp.file('style.css', state.stylesheet);
   //zips the file and saves to local machine
   zip.generateAsync({type:"blob"})
   .then(function(content) {

app/src/interfaces/Interfaces.ts

@@ -15,6 +15,7 @@ export interface State {
   nextChildId: number;
   HTMLTypes: HTMLType[];
   tailwind: boolean;
+  stylesheet: string
 }
 
 export interface ChildElement {