deleted alot of commented out old code

Author: GarrettHutson

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

@@ -1,4 +1,4 @@
-import React, { useContext, useState, Fragment, useEffect } from 'react';
+import React, { useState, Fragment } from 'react';
 import DataTable from '../CreateTab/components/DataTable';
 import ContextDropDown from './components/ContextDropDown';
 import ComponentDropDown from './components/ComponentDropDrown';
@@ -7,32 +7,23 @@ import Grid from '@mui/material/Grid';
 import ComponentTable from './components/ComponentTable';
 import { Button } from '@mui/material';
 import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
-// import * as actions from '../../../redux/actions/actions';
-import StateContext from '../../../context/context';
 import { addComponentToContext } from '../../../redux/reducers/slice/contextReducer';
 import { useSelector, useDispatch, useStore } from 'react-redux';
 import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
 
 const AssignContainer = () => {
-  const store = useStore();
   const dispatch = useDispatch();
-
-  // const [state, setState] = useState([]);
   const defaultTableData = [{ key: 'Key', value: 'Value' }];
   const [tableState, setTableState] = React.useState(defaultTableData);
   const [contextInput, setContextInput] = React.useState(null);
   const [componentInput, setComponentInput] = React.useState(null);
   const [componentTable, setComponentTable] = useState([]);
-  // const [stateContext, dispatchContext] = useContext(StateContext);
   const { state, contextParam } = useSelector((store) => ({
     state: store.appState,
     contextParam: store.contextSlice
   }));
 
-  //fetching data from redux store
-  // useEffect(() => {
-  //   setState(allContext);
-  // }, [allContext]);
+
 
   const renderTable = (targetContext) => {
     if (targetContext === null || !targetContext.values) {
@@ -78,13 +69,6 @@ const AssignContainer = () => {
     );
     //trigger generateCode(), update code preview tab
     dispatch(deleteElement({ id: 'FAKE_ID', contextParam: contextParam }));
-
-    // dispatchContext({
-    //   type: 'DELETE ELEMENT',
-    //   payload: 'FAKE_ID'
-    // });
-
-    // setState(allContext);
     renderComponentTable(componentInput);
   };
 

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

@@ -1,8 +1,7 @@
-import React, { Fragment, useState, useEffect, useContext } from 'react';
+import React, { Fragment, } from 'react';
 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,8 +12,6 @@ const ComponentDropDown = ({
   componentInput,
   setComponentInput
 }) => {
-  const { allContext } = contextStore;
-  // const [componentList] = useContext(StateContext);
   const { state, isDarkMode } = useSelector((store) => ({
     state: store.appState,
     isDarkMode: store.darkMode.isDarkMode

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

@@ -1,9 +1,8 @@
-import React, { Fragment, useState, useEffect } from 'react';
+import React, { Fragment, } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
-import { Typography } from '@mui/material';
 import { useSelector } from 'react-redux';
 
 const filter = createFilterOptions();

app/src/components/ContextAPIManager/ContextManager.tsx

@@ -1,16 +1,14 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { makeStyles } from '@mui/styles';
 import Box from '@mui/material/Box';
 import Tab from '@mui/material/Tab';
 import TabContext from '@mui/lab/TabContext';
 import TabList from '@mui/lab/TabList';
 import TabPanel from '@mui/lab/TabPanel';
-
 import CreateContainer from './CreateTab/CreateContainer';
 import AssignContainer from './AssignTab/AssignContainer';
 import DisplayContainer from './DisplayTab/DisplayContainer';
 import { useSelector } from 'react-redux';
-import store from '../../redux/store';
 
 const useStyles = makeStyles({
   contextContainer: {
@@ -20,18 +18,17 @@ const useStyles = makeStyles({
 });
 
 const ContextManager = (props): JSX.Element => {
-  const {isDarkMode, style} = useSelector((store) =>({
-isDarkMode: store.darkMode.isDarkMode,
-style: store.styleSlice
-  }) );
+  const { isDarkMode, style } = useSelector((store) => ({
+    isDarkMode: store.darkMode.isDarkMode,
+    style: store.styleSlice
+  }));
   const classes = useStyles();
   const [value, setValue] = React.useState<string>('1');
 
   const handleChange = (event: React.SyntheticEvent, newValue: string) => {
     setValue(newValue);
   };
 
-  const backgroundColor = isDarkMode ? '#21262b' : 'white';
   const color = isDarkMode ? 'lightgray' : 'black';
 
   return (

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

@@ -1,43 +1,28 @@
-import React, { useEffect, useState, useContext } from 'react';
-import { useStore } from 'react-redux';
+import React from 'react';
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
 import DataTable from './components/DataTable';
 import AddDataForm from './components/AddDataForm';
 import AddContextForm from './components/AddContextForm';
-// import * as actions from '../../../redux/actions/actions';
 import { Typography } from '@mui/material';
-import StateContext from '../../../context/context';
 import {
   addContext,
   deleteContext,
   addContextValues
 } from '../../../redux/reducers/slice/contextReducer';
 import { useSelector, useDispatch } from 'react-redux';
 import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
-
 const CreateContainer = () => {
   const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }];
   const { state, isDarkMode } = useSelector((store) => ({
     state: store.appState,
     isDarkMode: store.darkMode.isDarkMode
   }));
 
-  const store = useStore();
-  // const [state, setState] = useState([]);
   const [tableState, setTableState] = React.useState(defaultTableData);
   const [contextInput, setContextInput] = React.useState(null);
-  // const [stateContext, dispatchContext] = useContext(StateContext);
   const dispatch = useDispatch();
 
-  //pulling data from redux store
-  // useEffect(() => {
-
-  //   setState(allContext)
-  //   // setState(store.getState().contextSlice);
-
-  // }, [allContext]);
-
   //update data store when user adds a new context
   const handleClickSelectContext = () => {
     //prevent user from adding duplicate context
@@ -48,28 +33,20 @@ const CreateContainer = () => {
     }
     setContextInput('');
     dispatch(addContext(contextInput));
-
-    // setState(allContext);
   };
 
   //update data store when user add new key-value pair to context
   const handleClickInputData = ({ name }, { inputKey, inputValue }) => {
     dispatch(addContextValues({ name, inputKey, inputValue }));
-    // setState(allContext);
+
   };
 
   //update data store when user deletes context
   const handleDeleteContextClick = () => {
     dispatch(deleteContext(contextInput));
     setContextInput('');
-    // setState(allContext);
     setTableState(defaultTableData);
-
     dispatch(deleteElement({ id: 'FAKE_ID', contextParam: state }));
-    // dispatchContext({
-    //   type: 'DELETE ELEMENT',
-    //   payload: 'FAKE_ID'
-    // });
   };
 
   //re-render data table when there's new changes

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

@@ -1,10 +1,9 @@
-import React, { Fragment, useState, useEffect, useContext } from 'react';
+import React, { Fragment, useState } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 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();
@@ -19,8 +18,6 @@ const AddContextForm = ({
 }) => {
   const { allContext } = contextStore;
   const [btnDisabled, setBtnDisabled] = useState(false);
-  // const [state, dispatch] = useContext(StateContext);
-  // const state = useSelector(store => store.appState)
   const isDarkMode = useSelector((state) => state.darkMode.isDarkMode);
 
   const handleClick = () => {

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

@@ -1,12 +1,11 @@
-import React, { Fragment, useState, useEffect } from 'react';
+import React, { Fragment } from 'react';
 import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import { Typography } from '@mui/material';
 import { useSelector } from 'react-redux';
 
 const AddDataForm = ({ handleClickInputData, contextInput }) => {
-  //const [contextInput, setContextInput] = React.useState(null);
   const defaultInputData = { inputKey: '', inputValue: '' };
   const [dataContext, setDataContext] = React.useState(defaultInputData);
   const isDarkMode = useSelector((state) => state.darkMode.isDarkMode);

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

@@ -7,7 +7,6 @@ import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';
 import TableCell, { tableCellClasses } from '@mui/material/TableCell';
-import TableFooter from '@mui/material/TableFooter';
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
@@ -40,7 +39,6 @@ export default function DataTable({ target, contextInput }) {
         >
           <TableHead>
             <TableRow>
-              {/* <StyledTableCell>Key</StyledTableCell> */}
               <StyledTableCell align="center" colSpan={3}>
                 {contextInput ? contextInput.name : 'Context Name'}
               </StyledTableCell>
@@ -56,11 +54,6 @@ export default function DataTable({ target, contextInput }) {
               </StyledTableRow>
             ))}
           </TableBody>
-          {/* <TableFooter>
-            <StyledTableCell align="center" colSpan={3}>
-              {contextInput ? contextInput.name : 'Context Name'}
-            </StyledTableCell>
-          </TableFooter> */}
         </Table>
       </TableContainer>
     </>

app/src/components/bottom/CreationPanel.tsx

@@ -1,14 +1,11 @@
 import React, { useContext } from 'react';
 import ComponentPanel from '../right/ComponentPanel'
-import StatePropsPanel from '../right/StatePropsPanel'
 import HTMLPanel from '../left/HTMLPanel'
 import { useSelector } from 'react-redux';
-// import { styleContext } from '../../containers/AppContainer';
 
 // Creation panel holds all of the creation functionality of the application. ComponentPanel, HTMLPanel, and StatePropsPanel are all hanged here.
 // This allows users to create all aspects of this application in one place.
 const CreationPanel = (props): JSX.Element => {
-  // const {style} = useContext(styleContext);
   const style = useSelector((store) => store.styleSlice);
   console.log('style from creation',style)
   return (

app/src/components/bottom/TableStateProps.tsx

@@ -6,15 +6,12 @@ import {
 } from '@mui/x-data-grid';
 import Button from '@mui/material/Button';
 import ClearIcon from '@mui/icons-material/Clear';
-import StateContext from '../../context/context';
 import makeStyles from '@mui/styles/makeStyles';
 import { StatePropsPanelProps } from '../../interfaces/Interfaces';
 import { useDispatch, useSelector } from 'react-redux';
 import { deleteState } from '../../redux/reducers/slice/appStateSlice';
 
 const TableStateProps = props => {
-  // const [state, dispatch] = useContext(StateContext);
-  // const state = useSelector(store => store.appState);
   const { state, contextParam } = useSelector((store) => ({
     state: store.appState,
     contextParam: store.contextSlice,
@@ -76,10 +73,6 @@ const TableStateProps = props => {
     const filtered = currentComponent.stateProps.filter(
       element => element.id !== selectedId
     );
-    // dispatch({
-    //   type: 'DELETE STATE',
-    //   payload: { stateProps: filtered, rowId: selectedId }
-    // });
     dispatch(deleteState({stateProps: filtered, rowId: selectedId, contextParam: contextParam}))
   };
 

app/src/components/bottom/UseStateModal.tsx

@@ -1,12 +1,8 @@
-import React, {useState, useContext, useRef} from 'react';
+import React, {useState, useRef} from 'react';
 import Modal from '@mui/material/Modal';
 import TableStateProps from './TableStateProps';
-import { useSelector } from 'react-redux';
-
 
 function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
-  // 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/form/Selector.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
-import { SelectLight, SelectDark } from '../../public/styles/theme';
 
 const FormSelector = (props): JSX.Element => {
   const items = [];

app/src/components/left/DragDropPanel.tsx

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import Grid from '@mui/material/Grid';
-import StateContext from '../../context/context';
 import HTMLItem from './HTMLItem';
 
 import { useSelector, useDispatch } from 'react-redux';
@@ -20,21 +19,15 @@ Hook state:
 */
 // Extracted the drag and drop functionality from HTMLPanel to make a modular component that can hang wherever the future designers may choose.
 const DragDropPanel = (props): JSX.Element => {
-  // const [state, dispatch] = useContext(StateContext);
-  // const { isThemeLight } = props;
   const isDarkMode = useSelector(store => store.darkMode.isDarkMode);
 const dispatch = useDispatch();
-// const state = useSelector(store => store.appState)
 const { state, contextParam } = useSelector((store) => ({
   state: store.appState,
   contextParam: store.contextSlice,
 }));
   const handleDelete = (id: number): void => {
     dispatch(deleteElement({id:id, contextParam: contextParam}))
-    // dispatch({
-    //   type: 'DELETE ELEMENT',
-    //   payload: id
-    // });
+
   };
   // filter out separator so that it will not appear on the html panel
   const htmlTypesToRender = state.HTMLTypes.filter(type => type.name !== 'separator');