Merge pull request #26 from oslabs-beta/context-ui

atvanek · web-flow · commit 6c2975bd0457 · 2023-05-06T13:22:53.000-04:00
Context UI
diff --git a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx
@@ -1,38 +1,29 @@
-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 { addContext, deleteContext, addContextValues } from '../../../redux/reducers/slice/contextReducer';
+import {
+  addContext,
+  deleteContext,
+  addContextValues
+} from '../../../redux/reducers/slice/contextReducer';
 import { useSelector, useDispatch } from 'react-redux';
 import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../../redux/store';
 
 const CreateContainer = () => {
-  const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }];
-  const state = useSelector((store:RootState) => store.contextSlice);
-
-  // const store = useStore();
-  // const [state, setState] = useState([]);
-  const [tableState, setTableState] = React.useState(defaultTableData);
+  const state = useSelector((store: RootState) => store.contextSlice);
   const [contextInput, setContextInput] = React.useState(null);
-  // const [stateContext, dispatchContext] = useContext(StateContext);
+  const [currentContext, setCurrentContext] = React.useState(null);
+  const currentKeyValues = state.allContext.find(
+    (obj) => obj.name === currentContext
+  )?.values || [{ key: 'Enter Key', value: 'Enter value' }];
   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,10 +39,8 @@ const CreateContainer = () => {
   };
 
   //update data store when user add new key-value pair to context
-  const handleClickInputData = ({ name }, { inputKey, inputValue }) => {
-    dispatch(
-      addContextValues({ name, inputKey, inputValue })
-    );
+  const handleClickInputData = (name, { inputKey, inputValue }) => {
+    dispatch(addContextValues({ name, inputKey, inputValue }));
     // setState(allContext);
   };
 
@@ -62,15 +51,15 @@ const CreateContainer = () => {
     // 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 ||
@@ -82,6 +71,7 @@ const CreateContainer = () => {
       setTableState(targetContext.values);
     }
   };
+  console.log('state.allContext', state.allContext);
   return (
     <>
       <Grid container display="flex" justifyContent="space-evenly">
@@ -102,6 +92,8 @@ const CreateContainer = () => {
                 renderTable={renderTable}
                 contextInput={contextInput}
                 setContextInput={setContextInput}
+                currentContext={currentContext}
+                setCurrentContext={setCurrentContext}
               />
             </Grid>
 
@@ -110,6 +102,7 @@ const CreateContainer = () => {
               <AddDataForm
                 handleClickInputData={handleClickInputData}
                 contextInput={contextInput}
+                currentContext={currentContext}
               />
             </Grid>
           </Grid>
@@ -123,11 +116,14 @@ const CreateContainer = () => {
           >
             Context Data Table
           </Typography>
-          <DataTable target={tableState} contextInput={contextInput} />
+          <DataTable
+            target={currentKeyValues}
+            currentContext={currentContext}
+          />
         </Grid>
       </Grid>
     </>
   );
 };
 
-export default CreateContainer;
+export default CreateContainer;
diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx
@@ -1,11 +1,14 @@
 import React, { Fragment, useState } from 'react';
 import TextField from '@mui/material/TextField';
-import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+import Select from '@mui/material/Select';
+import FormControl from '@mui/material/FormControl';
+import { createFilterOptions } from '@mui/material/Autocomplete';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
-import { Typography } from '@mui/material';
+import { MenuItem, Typography } from '@mui/material';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../../../redux/store';
+import { error } from 'console';
 
 const filter = createFilterOptions();
 
@@ -15,15 +18,19 @@ const AddContextForm = ({
   handleDeleteContextClick,
   renderTable,
   contextInput,
-  setContextInput
+  setContextInput,
+  currentContext,
+  setCurrentContext
 }) => {
   const { allContext } = contextStore;
+  console.log('all contexts', allContext);
   const [btnDisabled, setBtnDisabled] = useState(false);
   const { state, isDarkMode } = useSelector((store: RootState) => ({
     isDarkMode: store.darkMode.isDarkMode,
     state: store.appState
   }));
   const color = isDarkMode ? 'white' : 'black';
+  const [selection, setSelection] = React.useState('');
 
   const handleClick = () => {
     if (contextInput === '' || contextInput === null) {
@@ -33,22 +40,26 @@ const AddContextForm = ({
     handleClickSelectContext();
   };
 
-  const onChange = (event, newValue) => {
-    if (typeof newValue === 'string') {
-      setContextInput({
-        name: newValue
-      });
-    } else if (newValue && newValue.inputValue) {
-      // Create a new contextInput from the user input
-      setContextInput({
-        name: newValue.inputValue,
-        values: []
-      });
-      renderTable(newValue);
-    } else {
-      setContextInput(newValue);
-      renderTable(newValue);
-    }
+  // const onChange = (event, newValue) => {
+  //   if (typeof newValue === 'string') {
+  //     setContextInput({
+  //       name: newValue
+  //     });
+  //   } else if (newValue && newValue.inputValue) {
+  //     // Create a new contextInput from the user input
+  //     setContextInput({
+  //       name: newValue.inputValue,
+  //       values: []
+  //     });
+  //     renderTable(newValue);
+  //   } else {)
+  //     setContextInput(newValue);
+  //     renderTable(newValue);
+  //   }
+  // };
+
+  const handleChange = (e) => {
+    setContextInput({ name: e.target.value });
   };
 
   const filterOptions = (options, params) => {
@@ -88,13 +99,21 @@ const AddContextForm = ({
     </li>
   );
 
+  const contexts = allContext.map((context) => {
+    return (
+      <MenuItem style={{ color: 'black' }} value={context.name}>
+        {context.name}
+      </MenuItem>
+    );
+  });
+
   return (
     <Fragment>
       <Typography style={{ color: color }} variant="h6" gutterBottom={true}>
-        Context Input
+        Create Context
       </Typography>
       <Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
-        <Autocomplete
+        {/* <Autocomplete
           id="autoCompleteContextField"
           value={contextInput}
           onChange={onChange}
@@ -118,6 +137,24 @@ const AddContextForm = ({
               label="Create/Select Context"
             />
           )}
+        /> */}
+        <TextField
+          InputProps={{
+            style: { color: 'black' }
+          }}
+          // {...params}
+          // InputProps={{
+          //   ...params.InputProps,
+          //   style: { color: color }
+          // }}
+          onChange={handleChange}
+          sx={{
+            width: 425,
+            border: '1px solid black',
+            color: 'black !important'
+          }}
+          variant="filled"
+          label="Create Context"
         />
         <Button
           variant="contained"
@@ -134,6 +171,25 @@ const AddContextForm = ({
           Delete
         </Button>
       </Box>
+      <Typography style={{ color: color }} variant="h6" gutterBottom={true}>
+        Select Context
+      </Typography>
+
+      <Select
+        style={{ border: '1px solid #0099e6', color: 'black' }}
+        value={currentContext}
+        label="Select Context"
+        MenuProps={{ disablePortal: true }}
+        onChange={(e) => {
+          console.log(e);
+          setCurrentContext(e.target.value);
+        }}
+
+        // value={props.selectValue}
+        // onChange={props.handleChange}
+      >
+        {contexts}
+      </Select>
     </Fragment>
   );
 };
diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx
@@ -6,7 +6,11 @@ import { Typography } from '@mui/material';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../../../redux/store';
 
-const AddDataForm = ({ handleClickInputData, contextInput }) => {
+const AddDataForm = ({
+  handleClickInputData,
+  contextInput,
+  currentContext
+}) => {
   //const [contextInput, setContextInput] = React.useState(null);
   const defaultInputData = { inputKey: '', inputValue: '' };
   const [dataContext, setDataContext] = React.useState(defaultInputData);
@@ -17,7 +21,7 @@ const AddDataForm = ({ handleClickInputData, contextInput }) => {
       window.alert('empty key or value');
       return;
     }
-    handleClickInputData(contextInput, dataContext);
+    handleClickInputData(currentContext, dataContext);
   };
   const color = isDarkMode ? 'white' : 'black';
 
diff --git a/app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx b/app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx
@@ -28,7 +28,7 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
   }
 }));
 
-export default function DataTable({ target, contextInput }) {
+export default function DataTable({ target, currentContext }) {
   return (
     <>
       <TableContainer component={Paper} sx={{ maxHeight: '350px' }}>
@@ -41,7 +41,7 @@ export default function DataTable({ target, contextInput }) {
             <TableRow>
               {/* <StyledTableCell>Key</StyledTableCell> */}
               <StyledTableCell align="center" colSpan={3}>
-                {contextInput ? contextInput.name : 'Context Name'}
+                {currentContext ? currentContext : 'Context Name'}
               </StyledTableCell>
             </TableRow>
           </TableHead>
