added context dropdown for assignment tab

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,9 +1,31 @@
 import { Typography } from '@material-ui/core';
-import React from 'react';
+import React, { useContext, useState, Fragment, useEffect } from 'react';
 import ContextTable from './components/ContextTable';
+import { useStore } from 'react-redux';
+import StateContext from '../../../context/context';
+import ContextDropDown from './components/ContextDropDown';
 
 const AssignContainer = () => {
-  return <ContextTable />;
+  const [state, setState] = useState(null);
+
+  useEffect(() => {
+    setState(store.getState().contextSlice);
+  }, []);
+
+  // const [componentList, setComponentList] = useContext(StateContext);
+
+  const store = useStore();
+
+  console.log(componentList);
+
+  //create an onclick for assign
+
+  return (
+    <Fragment>
+      <ContextDropDown contextList={state} />
+      <ContextTable />
+    </Fragment>
+  );
 };
 
 export default AssignContainer;

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
+export default function ContextDropDown({ contextList }) {
+  // const [context]
+  console.log(contextList);
+  const [currentContext, setCurrentContext] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setCurrentContext(event.target.value as string);
+  };
+
+  return (
+    <Box sx={{ minWidth: 120 }}>
+      <FormControl fullWidth>
+        <InputLabel id="demo-simple-select-label">Context</InputLabel>
+        <Select
+          labelId="demo-simple-select-label"
+          id="demo-simple-select"
+          value={currentContext}
+          label="Current Context"
+          onChange={handleChange}
+        >
+          {
+            // contextList.map(el => {
+            //   <MenuItem value={el.name}>{el.name}</MenuItem>;
+            // })
+          }
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}

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

@@ -34,7 +34,7 @@ const CreateContainer = () => {
   };
 
   const renderTable = targetContext => {
-    console.log(targetContext)
+    console.log(targetContext);
     if (!targetContext.values) {
       setTableState(defaultTableData);
     } else {
@@ -43,8 +43,8 @@ const CreateContainer = () => {
   };
   return (
     <>
-      <Grid container display="flex" justifyContent="space-evenly" >
-        <Grid item >
+      <Grid container display="flex" justifyContent="space-evenly">
+        <Grid item>
           <Grid
             container
             spacing={2}
@@ -53,7 +53,7 @@ const CreateContainer = () => {
             justifyContent="center"
             alignItems="center"
           >
-            <Grid item >
+            <Grid item>
               <AddContextForm
                 contextStore={state}
                 handleClickSelectContext={handleClickSelectContext}
@@ -64,7 +64,7 @@ const CreateContainer = () => {
             </Grid>
 
             <Divider variant="middle" />
-            <Grid item >
+            <Grid item>
               <AddDataForm
                 handleClickInputData={handleClickInputData}
                 contextInput={contextInput}