CSS editor fully functional

Co-authored-by: rachelk585 <[email protected]>

Author: atvanek

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,65 +10,32 @@ 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';
 import { updateStylesheet } from '../../redux/reducers/slice/appStateSlice';
-import { useDispatch } from 'react-redux';
-
-//This was being used for the demo
-// const serverURL = 'https://reactype-caret.herokuapp.com';
+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');
-  const dispatch = useDispatch();
-
-  //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();
-    dispatch(updateStylesheet(currentCss));
-    localStorage.setItem('css', currentCss);
+    dispatch(updateStylesheet(css));
   };
 
+  //handles changes in the ace editor
   const handleChange = (text) => {
-    currentCss = text;
+    setCss(text);
   };
 
   return (
@@ -87,7 +54,7 @@ const StylesEditor: React.FC<{
         width="100%"
         height="100%"
         onChange={handleChange}
-        value={currentCss}
+        value={css}
         name="Css_div"
         fontSize={16}
         tabSize={2}

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/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/public/styles/style.css

@@ -107,7 +107,7 @@ LEFT COLUMN
 
 .left-container {
   display: flex;
-  z-index: 0;
+  z-index: 1;
 }
 
 .left-indicator {
@@ -470,6 +470,8 @@ BOTTOM PANEL
   width: 100%;
   overflow-y: scroll;
   overflow-x: auto;
+  position: relative;
+  z-index: 0;
 }
 
 #resize-drag {

app/src/redux/reducers/slice/appStateSlice.ts

@@ -1248,13 +1248,7 @@ const appStateSlice = createSlice({
     toggleLoggedIn: (state) => {
       state.isLoggedIn = !state.isLoggedIn;
     },
-    // configToggle: (state) => {
-    //   state.config = {
-    //     ...state.config,
-    //     saveFlag: !state.config.saveFlag,
-    //     saveTimer: !state.config.saveTimer
-    //   };
-    // },
+
     snapShotAction: (state, action) => {
       state.components[action.payload.focusIndex].past.push(
         action.payload.deepCopiedState.components[action.payload.focusIndex]
@@ -1265,7 +1259,6 @@ const appStateSlice = createSlice({
       return Object.assign({}, state, action.payload);
     },
     updateStylesheet: (state, action) => {
-      console.log('stylesheet', state.stylesheet, 'action', action);
       state.stylesheet = action.payload;
     }
   }

server/server.ts

@@ -31,9 +31,6 @@ import { dirname } from 'path';
 import dotenv from 'dotenv';
 dotenv.config();
 
-// const __filename = fileURLToPath(import.meta.url);
-// const __dirname = dirname(__filename);
-
 const app = express();
 
 const PORT = process.env.PORT || DEV_PORT;
@@ -43,7 +40,6 @@ const isTest = process.env.NODE_ENV === 'test';
 
 app.use(express.json({ limit: '100mb' }));
 app.use(express.urlencoded({ limit: '100mb', extended: true }));
-// app.use(cookieParser());
 
 // Routes
 // const stylesRouter = require('./routers/stylesRouter');