Initial commit

Author: atvanek

app/src/components/bottom/StylesEditor.tsx

@@ -11,6 +11,8 @@ 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';
@@ -23,11 +25,12 @@ const StylesEditor: React.FC<{
   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();  
+  //   loadFile();
   // }, []);
 
   // const loadFile = () => {
@@ -60,21 +63,22 @@ const StylesEditor: React.FC<{
   //refactored this function to store the css on local storage rather than invoke saveFile()
   const saveCss = (e) => {
     e.preventDefault();
-    localStorage.setItem('css', currentCss)
-  }
+    dispatch(updateStylesheet(currentCss));
+    localStorage.setItem('css', currentCss);
+  };
 
   const handleChange = (text) => {
     currentCss = text;
-  }
+  };
 
   return (
     <div
-      className='text-editor'
+      className="text-editor"
       ref={wrapper}
       style={{
         height: '100%',
         maxWidth: '100%',
-        justifyContent: 'center',
+        justifyContent: 'center'
       }}
     >
       <AceEditor
@@ -93,7 +97,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/interfaces/Interfaces.ts

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

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

@@ -38,7 +38,8 @@ export const initialState: State = {
   nextChildId: 1,
   nextTopSeparatorId: 1000,
   HTMLTypes: HTMLTypes, // left as is for now
-  tailwind: false
+  tailwind: false,
+  stylesheet: ''
 };
 
 let separator = initialState.HTMLTypes[1];
@@ -858,8 +859,8 @@ const appStateSlice = createSlice({
       state.canvasFocus = canvasFocus;
     },
     //deleted 'convertToJSX' function, which threw errors upon opening
-    openProject: ( state, action) => {
-      return action.payload
+    openProject: (state, action) => {
+      return action.payload;
     },
     addElement: (state, action) => {
       const HTMLTypes = [...state.HTMLTypes];
@@ -1262,6 +1263,10 @@ const appStateSlice = createSlice({
     },
     allCooperativeState: (state, action) => {
       return Object.assign({}, state, action.payload);
+    },
+    updateStylesheet: (state, action) => {
+      console.log('stylesheet', state.stylesheet, 'action', action);
+      state.stylesheet = action.payload;
     }
   }
 });
@@ -1301,7 +1306,8 @@ export const {
   toggleLoggedIn,
   //configToggle,
   snapShotAction,
-  allCooperativeState
+  allCooperativeState,
+  updateStylesheet
 } = appStateSlice.actions;
 
 // Exports so we can combine in rootReducer