reverts back to older version of ContextAPI files in order to regain functionality. this change loses some styling that was fixed previously

Author: GarrettHutson

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

@@ -1,7 +1,8 @@
-import React, { Fragment, } from 'react';
+import React, { Fragment, useState, useEffect, useContext } 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();
@@ -12,10 +13,9 @@ const ComponentDropDown = ({
   componentInput,
   setComponentInput
 }) => {
-  const { state, isDarkMode } = useSelector((store) => ({
-    state: store.appState,
-    isDarkMode: store.darkMode.isDarkMode
-  }));
+  const { allContext } = contextStore;
+  // const [componentList] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
 
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
@@ -40,7 +40,7 @@ const ComponentDropDown = ({
     const filtered = filter(options, params);
     const { inputValue } = params;
     // Suggest the creation of a new contextInput
-    const isExisting = options.some((option) => inputValue === option.name);
+    const isExisting = options.some(option => inputValue === option.name);
     if (inputValue !== '' && !isExisting) {
       filtered.push({
         inputValue,
@@ -53,7 +53,7 @@ const ComponentDropDown = ({
     return filtered;
   };
 
-  const getOptionLabel = (option) => {
+  const getOptionLabel = option => {
     // Value selected with enter, right from the input
     if (typeof option === 'string') {
       return option;
@@ -67,7 +67,6 @@ const ComponentDropDown = ({
   };
 
   const renderOption = (props, option) => <li {...props}>{option.name}</li>;
-  const color = isDarkMode ? 'lightgray' : 'black';
 
   return (
     <Fragment>
@@ -85,20 +84,13 @@ const ComponentDropDown = ({
           renderOption={renderOption}
           sx={{ width: 425 }}
           freeSolo
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              label="Select Component"
-              helperText="Select a component for your selected context to consume"
-              InputLabelProps={{ style: { color } }}
-              FormHelperTextProps={{ style: { color } }}
-              InputProps={{ style: { color } }}
-            />
+          renderInput={params => (
+            <TextField {...params} label="Select Component" helperText='Select a component for your selected context to consume' />
           )}
         />
       </Box>
     </Fragment>
   );
 };
 
-export default ComponentDropDown;
+export default ComponentDropDown;

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

@@ -49,4 +49,4 @@ export default function DataTable({ target }) {
       </Table>
     </TableContainer>
   );
-}
+}

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

@@ -1,9 +1,9 @@
-import React, { Fragment, } from 'react';
+import React, { Fragment, useState, useEffect } 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 { useSelector } from 'react-redux';
+import { Typography } from '@mui/material';
 
 const filter = createFilterOptions();
 
@@ -14,7 +14,6 @@ const ContextDropDown = ({
   setContextInput
 }) => {
   const { allContext } = contextStore;
-  const isDarkMode = useSelector((store) => store.darkMode.isDarkMode);
 
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
@@ -39,7 +38,7 @@ const ContextDropDown = ({
     const filtered = filter(options, params);
     const { inputValue } = params;
     // Suggest the creation of a new contextInput
-    const isExisting = options.some((option) => inputValue === option.name);
+    const isExisting = options.some(option => inputValue === option.name);
     if (inputValue !== '' && !isExisting) {
       filtered.push({
         inputValue,
@@ -52,7 +51,7 @@ const ContextDropDown = ({
     return filtered;
   };
 
-  const getOptionLabel = (option) => {
+  const getOptionLabel = option => {
     // Value selected with enter, right from the input
     if (typeof option === 'string') {
       return option;
@@ -66,7 +65,6 @@ const ContextDropDown = ({
   };
 
   const renderOption = (props, option) => <li {...props}>{option.name}</li>;
-  const color = isDarkMode ? 'lightgray' : 'black';
 
   return (
     <Fragment>
@@ -84,20 +82,13 @@ const ContextDropDown = ({
           renderOption={renderOption}
           sx={{ width: 425 }}
           freeSolo
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              label="Select Context"
-              helperText="Select a context you would like to assign"
-              InputLabelProps={{ style: { color } }}
-              FormHelperTextProps={{ style: { color } }}
-              InputProps={{ style: { color } }}
-            />
+          renderInput={params => (
+            <TextField {...params} label="Select Context" helperText='Select a context you would like to assign'/>
           )}
         />
       </Box>
     </Fragment>
   );
 };
 
-export default ContextDropDown;
+export default ContextDropDown;

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

@@ -69,4 +69,4 @@ export default function ContextTable() {
       </Table>
     </TableContainer>
   );
-}
+}

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

@@ -1,28 +1,38 @@
-import React from 'react';
+import React, { useEffect, useState, useContext } from 'react';
+import { useStore } from 'react-redux';
 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 {
-  addContext,
-  deleteContext,
-  addContextValues
-} from '../../../redux/reducers/slice/contextReducer';
+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 state = useSelector(store => store.contextSlice);
 
+  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
@@ -33,24 +43,34 @@ 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 }));
-
+    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 }));
+
+    dispatch(deleteElement({id:'FAKE_ID', contextParam: state}))
+    // dispatchContext({
+    //   type: 'DELETE ELEMENT',
+    //   payload: 'FAKE_ID'
+    // });
   };
 
   //re-render data table when there's new changes
-  const renderTable = (targetContext) => {
+  const renderTable = targetContext => {
     if (
       targetContext === null ||
       targetContext === undefined ||
@@ -62,9 +82,6 @@ const CreateContainer = () => {
       setTableState(targetContext.values);
     }
   };
-
-  const color = isDarkMode ? 'lightgray' : 'black';
-
   return (
     <>
       <Grid container display="flex" justifyContent="space-evenly">
@@ -99,7 +116,11 @@ const CreateContainer = () => {
         </Grid>
         <Divider orientation="vertical" variant="middle" flexItem />
         <Grid item>
-          <Typography style={{ color }} variant="h6" gutterBottom={true}>
+          <Typography
+            style={{ color: 'black' }}
+            variant="h6"
+            gutterBottom={true}
+          >
             Context Data Table
           </Typography>
           <DataTable target={tableState} contextInput={contextInput} />
@@ -109,4 +130,4 @@ const CreateContainer = () => {
   );
 };
 
-export default CreateContainer;
+export default CreateContainer;

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

@@ -1,9 +1,10 @@
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useState, useEffect, useContext } 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();
@@ -18,7 +19,8 @@ const AddContextForm = ({
 }) => {
   const { allContext } = contextStore;
   const [btnDisabled, setBtnDisabled] = useState(false);
-  const isDarkMode = useSelector((state) => state.darkMode.isDarkMode);
+  // const [state, dispatch] = useContext(StateContext);
+  const state = useSelector(store => store.appState)
 
   const handleClick = () => {
     if (contextInput === '' || contextInput === null) return;
@@ -48,7 +50,7 @@ const AddContextForm = ({
     const filtered = filter(options, params);
     const { inputValue } = params;
     // Suggest the creation of a new contextInput
-    const isExisting = options.some((option) => inputValue === option.name);
+    const isExisting = options.some(option => inputValue === option.name);
     if (inputValue !== '' && !isExisting) {
       filtered.push({
         inputValue,
@@ -61,7 +63,7 @@ const AddContextForm = ({
     return filtered;
   };
 
-  const getOptionLabel = (option) => {
+  const getOptionLabel = option => {
     // Value selected with enter, right from the input
     if (typeof option === 'string') {
       return option;
@@ -75,14 +77,13 @@ const AddContextForm = ({
   };
 
   const renderOption = (props, option) => <li {...props}>{option.name}</li>;
-  const color = isDarkMode ? 'lightgray' : 'black';
 
   return (
     <Fragment>
-      <Typography style={{ color }} variant="h6" gutterBottom={true}>
+      <Typography style={{ color: 'black' }} variant="h6" gutterBottom={true}>
         Context Input
       </Typography>
-      <Box sx={{ display: 'flex', gap: 2, mb: 4, color }}>
+      <Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
         <Autocomplete
           id="autoCompleteContextField"
           value={contextInput}
@@ -96,14 +97,8 @@ const AddContextForm = ({
           renderOption={renderOption}
           sx={{ width: 425 }}
           freeSolo
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              variant="outlined"
-              label="Create/Select Context"
-              InputLabelProps={{ style: { color } }}
-              InputProps={{ style: { color } }}
-            />
+          renderInput={params => (
+            <TextField {...params} label="Create/Select Context" />
           )}
         />
         <Button
@@ -126,4 +121,4 @@ const AddContextForm = ({
   );
 };
 
-export default AddContextForm;
+export default AddContextForm;