final touches on style context migration

Author: GarrettHutson

app/src/components/bottom/BottomTabs.tsx

@@ -7,22 +7,20 @@ import StylesEditor from './StylesEditor';
 import CustomizationPanel from '../../containers/CustomizationPanel';
 import CreationPanel from './CreationPanel';
 import ContextManager from '../ContextAPIManager/ContextManager';
-import StateManager from '../StateManagement/StateManagement'; 
+import StateManager from '../StateManagement/StateManagement';
 import Box from '@mui/material/Box';
 import Tree from '../../tree/TreeChart';
 import FormControl from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 import Arrow from '../main/Arrow';
-import {useDispatch, useSelector} from 'react-redux';
-import { changeProjectType} from '../../redux/reducers/slice/appStateSlice';
+import { useDispatch, useSelector } from 'react-redux';
+import { changeProjectType } from '../../redux/reducers/slice/appStateSlice';
 
 
 const BottomTabs = (props): JSX.Element => {
   // state that controls which tab the user is on
-  // const [state, dispatch] = useContext(StateContext); //deconstructing properties from Context interface?
   const dispatch = useDispatch();
-  // const state = useSelector(store => store.appState)
   const { state, contextParam, style } = useSelector((store) => ({
     state: store.appState,
     contextParam: store.contextSlice,
@@ -31,7 +29,6 @@ const BottomTabs = (props): JSX.Element => {
   const [tab, setTab] = useState(0);
   const classes = useStyles();
   const [theme, setTheme] = useState('solarized_light');
-  // const { style } = useContext(styleContext);
 
   // breaks if handleChange is commented out
   const handleChange = (event: React.ChangeEvent, value: number) => {
@@ -41,8 +38,7 @@ const BottomTabs = (props): JSX.Element => {
   // When a user changes the project type, the code of all components is rerendered
   const handleProjectChange = event => {
     const projectType = event.target.value;
-    dispatch(changeProjectType({projectType, contextParam}))
-    // dispatch({ type: 'CHANGE PROJECT TYPE', payload: { projectType } });
+    dispatch(changeProjectType({ projectType, contextParam }))
   };
   const { components, HTMLTypes } = state;
 

app/src/components/bottom/CodePreview.tsx

@@ -1,5 +1,4 @@
 import React, { useContext, useState, useRef, useEffect } from 'react';
-import StateContext from '../../context/context';
 import AceEditor from 'react-ace';
 import 'ace-builds/src-min-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/mode-javascript';
@@ -14,10 +13,9 @@ import useResizeObserver from '../../tree/useResizeObserver';
 import { unpkgPathPlugin } from '../../plugins/unpkg-path-plugin';
 import { fetchPlugin } from '../../plugins/fetch-plugin';
 import * as esbuild from 'esbuild-wasm';
-import store from '../../redux/store';
 import {codePreviewSave, codePreviewInput} from "../../redux/reducers/slice/codePreviewSlice";
 import { useDispatch, useSelector } from 'react-redux';
-// import { store } from './../../index';
+
 const CodePreview: React.FC<{
   theme: string | null;
   setTheme: any | null;
@@ -38,8 +36,6 @@ const CodePreview: React.FC<{
   const wrapper = useRef();
   const dimensions = useResizeObserver(wrapper);
   const { height } = dimensions || 0;
-
-  // const [state] = useContext(StateContext);
   const state = useSelector(store => store.appState)
   const [, setDivHeight] = useState(0);
   let currentComponent = state.components.find(
@@ -59,10 +55,6 @@ const CodePreview: React.FC<{
   useEffect(() => {
     setInput(currentComponent.code);
     dispatch(codePreviewInput(currentComponent.code));
-    // store.dispatch({
-    //   type: 'CODE_PREVIEW_INPUT',
-    //   payload: currentComponent.code
-    // });
   }, [currentComponent, state.components]);
 
   /**
@@ -72,7 +64,6 @@ const CodePreview: React.FC<{
   const handleChange = async (data) => {
     setInput(data);
     dispatch(codePreviewInput(data));
-    // store.dispatch({ type: 'CODE_PREVIEW_INPUT', payload: data });
     if (!ref.current) {
       return;
     }
@@ -89,10 +80,6 @@ const CodePreview: React.FC<{
       }
     });
     dispatch(codePreviewSave(result.outputFiles[0].text))
-    // store.dispatch({
-    //   type: 'CODE_PREVIEW_SAVE',
-    //   payload: result.outputFiles[0].text
-    // });
   };
 
   return (

app/src/components/bottom/CreationPanel.tsx

@@ -10,8 +10,9 @@ import { useSelector } from 'react-redux';
 const CreationPanel = (props): JSX.Element => {
   // const {style} = useContext(styleContext);
   const style = useSelector((store) => store.styleSlice);
+  console.log('style from creation',style)
   return (
-    <div className="creation-panel" style={style}>
+    <div className="creation-panel" style={style.style}>
       <ComponentPanel isThemeLight={props.isThemeLight}/>
       <HTMLPanel isThemeLight={props.isThemeLight}/>
     </div>

app/src/components/bottom/UseStateModal.tsx

@@ -1,6 +1,5 @@
 import React, {useState, useContext, useRef} from 'react';
 import Modal from '@mui/material/Modal';
-import StateContext from '../../context/context';
 import TableStateProps from './TableStateProps';
 import { useSelector } from 'react-redux';
 

app/src/containers/CustomizationPanel.tsx

@@ -500,7 +500,7 @@ dispatch(updateUseContext({ useContextObj: useContextObj, contextParam: contextP
 
   if (state.canvasFocus.childId === null) {
     return (
-      <div className="column right" id="rightContainer" style={style}>
+      <div className="column right" id="rightContainer" style={style.style}>
         <ProjectManager />
         <div className="rightPanelWrapper">
           <div>
@@ -526,7 +526,7 @@ dispatch(updateUseContext({ useContextObj: useContextObj, contextParam: contextP
     )
   }
   return (
-    <div className="column right" id="rightContainer" style={style}>
+    <div className="column right" id="rightContainer" style={style.style}>
       <ProjectManager />
       {/* -----------------------------MOVED PROJECT MANAGER-------------------------------------- */}
       <div className="rightPanelWrapper">

app/src/containers/LeftContainer.tsx

@@ -2,8 +2,6 @@ import React, { useContext, useEffect, useCallback } from 'react';
 import Grid from '@mui/material/Grid';
 import ComponentDrag from '../components/right/ComponentDrag';
 import DragDropPanel from '../components/left/DragDropPanel';
-// import StateContext from '../context/context';
-// import { styleContext } from './AppContainer';
 import { useDispatch, useSelector } from 'react-redux';
 import { deleteChild } from '../redux/reducers/slice/appStateSlice';
 
@@ -34,7 +32,7 @@ const LeftContainer = (props): JSX.Element => {
 
   return (
     <div className="left-container hide-show">
-        <div className="column left" style={style}>
+        <div className="column left" style={style.style}>
           <Grid container direction="column" alignItems="center">
             <h4>Drag and Drop</h4>
             <DragDropPanel />