finished tab 1

Co-authored-by: Sal Saluga SalSaluga@gmail.com
Co-authored-by: Ken Bains nkbain10@gmail.com
Co-authored-by: Bianca Picasso bianca.picasso@gmail.com

Author: huypham048

app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx

@@ -21,24 +21,6 @@ import { Typography } from '@mui/material';
 
 const filter = createFilterOptions();
 
-// const contextArr = [
-//   {
-//     name: 'theme',
-//     contextInputs: [
-//       { key: 'dark', contextInput: 'black' },
-//       { key: 'light', contextInput: 'white' }
-//     ]
-//   },
-
-//   {
-//     name: 'mood',
-//     contextInputs: [
-//       { key: 'happy', contextInput: 'rainbow' },
-//       { key: 'sad', contextInput: 'blue' }
-//     ]
-//   }
-// ];
-
 //START - Table styling
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
@@ -69,12 +51,24 @@ const CreatorForm = ({
   //array storing all contexts
   const { allContext } = contextStore;
 
+  //a state to keep track of data in table
+  const [tableState, setTableState] = React.useState([
+    {
+      key: 'Enter key',
+      value: 'Enter value'
+    }
+  ]);
+
   const [contextInput, setContextInput] = React.useState(null);
   const [dataContext, setDataContext] = React.useState({
     inputKey: '',
     inputValue: ''
   });
 
+  const renderTable = targetContext => {
+    setTableState(targetContext.values);
+  };
+
   const handleChange = e => {
     setDataContext(prevDataContext => {
       return {
@@ -113,7 +107,7 @@ const CreatorForm = ({
               });
             } else {
               setContextInput(newValue);
-              console.log('selected from drop down', contextInput)
+              renderTable(newValue);
             }
           }}
           filterOptions={(options, params) => {
@@ -122,8 +116,8 @@ const CreatorForm = ({
             const { inputValue } = params;
             // Suggest the creation of a new contextInput
             const isExisting = options.some(
-              option => inputValue === option.name 
-                // console.log(inputValue)
+              option => inputValue === option.name
+              // console.log(inputValue)
             );
             if (inputValue !== '' && !isExisting) {
               filtered.push({
@@ -156,6 +150,11 @@ const CreatorForm = ({
           freeSolo
           renderInput={params => (
             <TextField {...params} label="Create/Select Context" />
+            // <TextField
+            //   {...params}
+            //   label="Free solo with text demo"
+            //   onKeyUp={() => console.log(params.inputProps.value)}
+            // />
           )}
         />
         <Button variant="contained" onClick={handleClick}>
@@ -193,7 +192,7 @@ const CreatorForm = ({
         </Button>
       </Box>
 
-      {/* <ContextTable target={contextArr[0].contextInputs}/> */}
+      <ContextTable target={tableState} />
     </Fragment>
   );
 };

app/src/redux/reducers/slice/contextReducer.js

@@ -31,23 +31,24 @@ const contextReducer = (state = initialState, action) => {
         ...state,
         allContext: [...state.allContext, newContext]
       };
-      
+
     case types.ADD_CONTEXT_VALUES:
       // console.log('payload is', action.payload);
 
       const newAllContext = [...state.allContext];
 
       for (let i = 0; i < newAllContext.length; i += 1) {
         if (newAllContext[i].name === action.payload.name) {
-          newAllContext[i].values.push({ key : action.payload.inputKey , value : action.payload.inputValue})
-        } 
+          newAllContext[i].values.push({
+            key: action.payload.inputKey,
+            value: action.payload.inputValue
+          });
+        }
       }
 
       return {
         ...state,
         allContext: newAllContext
-
-          
       };
     default: {
       return state;