removed use of statecontext

Author: mdunnmon

app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx

@@ -3,6 +3,7 @@ import TextField from '@mui/material/TextField';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import StateContext from '../../../../context/context';
+import { useSelector } from 'react-redux';
 
 const filter = createFilterOptions();
 
@@ -13,7 +14,8 @@ const ComponentDropDown = ({
   setComponentInput
 }) => {
   const { allContext } = contextStore;
-  const [componentList] = useContext(StateContext);
+  // const [componentList] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
 
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
@@ -77,7 +79,7 @@ const ComponentDropDown = ({
           selectOnFocus
           clearOnBlur
           handleHomeEndKeys
-          options={componentList.components || []}
+          options={state.components || []}
           getOptionLabel={getOptionLabel}
           renderOption={renderOption}
           sx={{ width: 425 }}

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

@@ -5,6 +5,7 @@ import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import { Typography } from '@mui/material';
 import StateContext from '../../../../context/context';
+import { useSelector } from 'react-redux';
 
 const filter = createFilterOptions();
 
@@ -18,7 +19,8 @@ const AddContextForm = ({
 }) => {
   const { allContext } = contextStore;
   const [btnDisabled, setBtnDisabled] = useState(false);
-  const [state, dispatch] = useContext(StateContext);
+  // const [state, dispatch] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
 
   const handleClick = () => {
     if (contextInput === '' || contextInput === null) return;

app/src/components/StateManagement/DisplayTab/DataTable.tsx

@@ -8,6 +8,7 @@ import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';
 import TableCell, { tableCellClasses } from '@mui/material/TableCell';
 import StateContext from '../../../context/context';
+import { useSelector } from 'react-redux';
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
@@ -33,7 +34,8 @@ export default function DataTable(props) {
   const {
     currComponentState, parentProps, clickedComp, data,
   } = props;
-  const [state, dispatch] = useContext(StateContext);
+  // const [state, dispatch] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
 
   // determine if the current component is a root component
   let isRoot = false;

app/src/components/StateManagement/DisplayTab/DisplayContainer.tsx

@@ -5,13 +5,15 @@ import { Typography } from '@mui/material';
 import DataTable from './DataTable';
 import Tree from './Tree';
 import StateContext from '../../../context/context';
+import { useSelector } from 'react-redux';
 
 function DisplayContainer({ data, props }) { // "data" is referring to components from state - passed in from StateManagement
   // grabbing intialized state from App using UseContext
   const [currComponentState, setCurrComponentState] = useState([]);
   const [parentProps, setParentProps] = useState([]);
-  const [state, dispatch] = useContext(StateContext);
-
+  // const [state, dispatch] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
+  
   let root = '';
 
   // check the canvasFocus

app/src/components/StateManagement/DisplayTab/Tree.tsx

@@ -5,6 +5,7 @@ import {
 import cloneDeep from 'lodash/cloneDeep';
 import useResizeObserver from './useResizeObserver';
 import StateContext from '../../../context/context';
+import { useSelector } from 'react-redux';
 
 function usePrevious(value) {
   const ref = useRef();
@@ -15,7 +16,8 @@ function usePrevious(value) {
 function Tree({
   data, currComponentState, setCurrComponentState, parentProps, setParentProps, setClickedComp,
 }) {
-  const [state, dispatch] = useContext(StateContext);
+  // const [state, dispatch] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
   const svgRef = useRef();
   const wrapperRef = useRef();
   const xPosition = 50;

app/src/components/StateManagement/StateManagement.tsx

@@ -6,6 +6,7 @@ import TabContext from '@mui/lab/TabContext';
 import TabList from '@mui/lab/TabList';
 import TabPanel from '@mui/lab/TabPanel';
 import StateContext from '../../context/context';
+import { useSelector } from 'react-redux';
 
 import CreateContainer from './CreateTab/CreateContainer';
 import DisplayContainer from './DisplayTab/DisplayContainer';
@@ -20,7 +21,8 @@ const useStyles = makeStyles({
 });
 
 const StateManager = (props): JSX.Element => {
-  const [state, dispatch] = useContext(StateContext);
+  // const [state, dispatch] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
   const { components, HTMLTypes } = state;
   const classes = useStyles();
   const [value, setValue] = React.useState<string>('1');

app/src/components/bottom/CodePreview.tsx

@@ -16,7 +16,7 @@ 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 } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 // import { store } from './../../index';
 const CodePreview: React.FC<{
   theme: string | null;
@@ -39,7 +39,8 @@ const CodePreview: React.FC<{
   const dimensions = useResizeObserver(wrapper);
   const { height } = dimensions || 0;
 
-  const [state] = useContext(StateContext);
+  // const [state] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
   const [, setDivHeight] = useState(0);
   let currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId

app/src/components/bottom/UseStateModal.tsx

@@ -2,10 +2,12 @@ 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';
 
 
 function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
-  const [state, dispatch] = useContext(StateContext);
+  // const [state, dispatch] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
   const [open, setOpen] = useState(false);
   const [stateKey, setStateKey] = useState('');
   const [statePropsId, setStatePropsId] = useState(-1);

app/src/components/right/ComponentDrag.tsx

@@ -8,7 +8,8 @@ import { useSelector } from 'react-redux';
 // The component panel section of the left panel displays all components and has the ability to add new components
 const ComponentDrag = ({ isThemeLight }): JSX.Element => {
   const classes = useStyles();
-  const [state,] = useContext(StateContext);
+  // const [state,] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
   const isDarkMode = useSelector(store => store.darkMode.isDarkMode);
   const isFocus = (targetId: Number) => {
     return state.canvasFocus.componentId === targetId ? true : false;

app/src/components/right/ComponentPanelRoutingItem.tsx

@@ -5,6 +5,7 @@ import StateContext from '../../context/context';
 import { useDrag } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import Select from '@mui/material/Select';
+import { useSelector } from 'react-redux';
 
 // ------------------------------------------------
 import MenuItem from '@mui/material/MenuItem';
@@ -26,7 +27,8 @@ Dragging works in the same manner as in ComponentPanelItem.tsx
 // a component panel routing item is a Next.js component that allows the user to navigate between pages
 const ComponentPanelRoutingItem: React.FC<{}> = () => {
   const classes = useStyles(); 's there, '
-  const [state,] = useContext(StateContext);
+  // const [state,] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
 
   // find the root components that can be associated with a route
   // These will be the components that are displayed in the dropdown adjacent to "Route Link"

app/src/components/right/ExportButton.tsx

@@ -8,9 +8,11 @@ import Button from '@mui/material/Button';
 import exportProject from '../../utils/exportProject.util';
 import createModal from './createModal';
 import { styleContext } from '../../containers/AppContainer';
+import { useSelector } from 'react-redux';
 export default function ExportButton() {
   const [modal, setModal] = useState(null);
-  const [state] = useContext(StateContext);
+  // const [state] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
 
   const genOptions: string[] = [
     'Export components',

app/src/components/right/LoginButton.tsx

@@ -4,10 +4,12 @@ import ExitToAppIcon from '@mui/icons-material/ExitToApp';
 import { useHistory } from 'react-router-dom';
 import makeStyles from '@mui/styles/makeStyles';
 import StateContext from '../../context/context';
+import { useSelector } from 'react-redux';
 
 export default function LoginButton() {
   const history = useHistory();
-  const [state,] = useContext(StateContext);
+  // const [state,] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
   // const handleLogout = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
   //   e.preventDefault();
   //   // clear local storage

app/src/helperFunctions/renderChildren.tsx

@@ -6,14 +6,16 @@ import DirectChildHTMLNestable from '../components/main/DirectChildHTMLNestable'
 import SeparatorChild from '../components/main/SeparatorChild';
 import RouteLink from '../components/main/RouteLink';
 import StateContext from '../context/context';
+import { useSelector } from 'react-redux';
 
 // helper method to render all direct children of a component
 // direct children are clickable and draggable
 // direct children may also have their own indirect children (grandchildren, great-grandchildren, etc) which are not draggable and clickable
 // there are four types of direct children that can be rendered on the screen
 const renderChildren = (children: ChildElement[]) => {
-  const [state, dispatch] = useContext(StateContext);
-
+  // const [state, dispatch] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
+  
   return children.map((child: ChildElement, i: number) => {
     const { type, style, childId, children, attributes, name } = child;
     let { typeId } = child;

app/src/redux/HTMLTypes.js

@@ -15,7 +15,7 @@ const HTMLTypes = [
     style: {},
     placeHolderShort: 'div',
     placeHolderLong: '',
-    icon: HeaderIcon,
+    // icon: HeaderIcon,
     framework: 'reactClassic',
     nestable: true
   },

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

@@ -237,9 +237,12 @@ const appStateSlice = createSlice({
       if (
         typeof action.payload.componentName !== 'string' ||
         action.payload.componentName === ''
-      )
-        return state;
-      const components = [...state.components];
+      ) {
+        // return state;
+        return
+      }
+        
+      // const components = [...state.components];
       const newComponent = {
         id: state.components.length + 1,
         name: action.payload.componentName,
@@ -255,10 +258,10 @@ const appStateSlice = createSlice({
         useStateCodes: [],
         passedInProps: []
       };
-      components.push(newComponent);
+      state.components.push(newComponent);
       // functionality if the new component will become the root component
-      const rootComponents = [...state.rootComponents];
-      if (action.payload.root) rootComponents.push(newComponent.id);
+      // const rootComponents = [...state.rootComponents];
+      if (action.payload.root) state.rootComponents.push(newComponent.id);
       // updates the focus to the new component, which redirects to the new blank canvas of said new component
 
       // change canvas focus to just created component
@@ -269,23 +272,24 @@ const appStateSlice = createSlice({
       // };
       const nextComponentId = state.nextComponentId + 1;
       newComponent.code = generateCode(
-        components,
+        state.components,
         newComponent.id,
         [...state.rootComponents],
         state.projectType,
         state.HTMLTypes,
         state.tailwind
       );
-      return {
-        ...state,
-        components,
-        rootComponents,
-        nextComponentId
+
+      // return {
+      //   ...state,
+      //   components,
+      //   rootComponents,
+      //   nextComponentId
         // canvasFocus
-      };
+    // },
       // state.components = components;
       // state.rootComponents = rootComponents;
-      // state.nextComponentId = nextComponentId
+      state.nextComponentId = nextComponentId
 
 
     },

app/src/tree/TreeChart.tsx

@@ -4,6 +4,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import useResizeObserver from './useResizeObserver';
 import StateContext from '../context/context';
 import { element } from 'prop-types';
+import { useSelector } from 'react-redux';
 
 function usePrevious(value) {
   const ref = useRef(); // creates a ref obj w/ current: value
@@ -14,7 +15,9 @@ function usePrevious(value) {
 }
 
 function TreeChart({ data }) { // data is components from state - passed in from BottomTabs
-  const [state, dispatch] = useContext(StateContext);
+  // const [state, dispatch] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
+  
   const canvasId = state.canvasFocus.componentId;
 
   const svgRef = useRef();