finished mvp

Co-authored-by: Sal Saluga [email protected]
Co-authored-by: Ken Bains [email protected]
Co-authored-by: Bianca Picasso [email protected]

Author: huypham048

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

@@ -1,19 +1,22 @@
 import React, { useContext, useState, Fragment, useEffect } from 'react';
 import DataTable from '../CreateTab/components/DataTable';
-import { useStore } from 'react-redux';
+import { useStore, useDispatch } from 'react-redux';
 import ContextDropDown from './components/ContextDropDown';
 import ComponentDropDown from './components/ComponentDropDrown';
 import Divider from '@mui/material/Divider';
 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';
 
 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 store = useStore();
   const [contextInput, setContextInput] = React.useState(null);
   const [componentInput, setComponentInput] = React.useState(null);
   const [componentTable, setComponentTable] = useState([]);
@@ -29,25 +32,33 @@ const AssignContainer = () => {
       setTableState(targetContext.values);
     }
   };
+  //checks if state is no longer an array, thus an object and will eventually render out the fetched
+  const renderComponentTable = targetComponent => {
+    //target Component is main
 
-  const renderComponentTable = targetContext => {
-    console.log('current component is', targetContext);
-    if (!targetContext.values) {
-      const listOfContexts = [];
-      if (!Array.isArray(state)) {
-        state.allContext.forEach(context => {
-          console.log('each context is', context);
-          if (context.components.includes(targetContext))
-            listOfContexts.push(context.name);
-        });
-      }
-      // setComponentTable(defaultTableData);
+    const listOfContexts = [];
+    if (!Array.isArray(state)) {
+      state.allContext.forEach(context => {
+        if (context.components.includes(targetComponent.name)) {
+          listOfContexts.push(context.name);
+        }
+      });
       setComponentTable(listOfContexts);
-    } else {
-      setComponentTable(targetContext.values);
     }
   };
 
+  const handleAssignment = () => {
+    dispatch(
+      actions.addComponentToContext({
+        context: contextInput,
+        component: componentInput
+      })
+    );
+
+    setState(store.getState().contextSlice);
+    renderComponentTable(componentInput);
+  };
+
   return (
     <Fragment>
       <Grid container display="flex" justifyContent="space-evenly">
@@ -75,7 +86,7 @@ const AssignContainer = () => {
           </Grid>
         </Grid>
         <Divider orientation="vertical" variant="middle" flexItem>
-          <Button>
+          <Button onClick={handleAssignment}>
             <DoubleArrowIcon fontSize="large" color="primary" />
           </Button>
         </Divider>

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

@@ -13,9 +13,8 @@ const ComponentDropDown = ({
   setComponentInput
 }) => {
   const { allContext } = contextStore;
-  const [componentList, dispatch] = useContext(StateContext);
+  const [componentList] = useContext(StateContext);
 
-  console.log('list of components', componentList);
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
       setComponentInput({

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

@@ -34,7 +34,7 @@ export default function DataTable({ target }) {
       <Table sx={{ width: '510px' }} aria-label="customized table">
         <TableHead>
           <TableRow>
-            <StyledTableCell>Key</StyledTableCell>
+            <StyledTableCell>Contexts Consumed</StyledTableCell>
           </TableRow>
         </TableHead>
         <TableBody>

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

@@ -34,7 +34,6 @@ const CreateContainer = () => {
   };
 
   const renderTable = targetContext => {
-    console.log(targetContext);
     if (!targetContext.values) {
       setTableState(defaultTableData);
     } else {

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

@@ -19,7 +19,7 @@ const AddDataForm = ({ handleClickInputData, contextInput }) => {
       };
     });
   };
-console.log(contextInput)
+
   return (
     <Fragment>
       <Typography style={{ color: 'black' }} variant="h6" gutterBottom={true}>

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

@@ -36,8 +36,6 @@ const contextReducer = (state = initialState, action) => {
       };
 
     case types.ADD_CONTEXT_VALUES:
-      // console.log('payload is', action.payload);
-
       const newAllContext = [...state.allContext];
 
       for (let i = 0; i < newAllContext.length; i += 1) {
@@ -53,12 +51,12 @@ const contextReducer = (state = initialState, action) => {
         ...state,
         allContext: newAllContext
       };
-    case types.ADD_COMPONENT_TO_CONTEXT: 
+    case types.ADD_COMPONENT_TO_CONTEXT:
       const newTempState = [...state.allContext];
 
       for (let i = 0; i < newTempState.length; i += 1) {
-        if (newTempState[i].name === action.payload.context) {
-          newTempState[i].components.push(action.payload.component);
+        if (newTempState[i].name === action.payload.context.name) {
+          newTempState[i].components.push(action.payload.component.name);
         }
       }