Merge pull request #4 from oslabs-beta/deleteContext

Delete context

Author: BiancaPicasso

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

@@ -84,7 +84,7 @@ const ComponentDropDown = ({
           sx={{ width: 425 }}
           freeSolo
           renderInput={params => (
-            <TextField {...params} label="Select Component" />
+            <TextField {...params} label="Select Component" helperText='Select a component for your selected context to consume' />
           )}
         />
       </Box>

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

@@ -84,7 +84,7 @@ const ContextDropDown = ({
           sx={{ width: 425 }}
           freeSolo
           renderInput={params => (
-            <TextField {...params} label="Select Context" />
+            <TextField {...params} label="Select Context" helperText='Select a context you would like to assign'/>
           )}
         />
       </Box>

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

@@ -7,6 +7,7 @@ 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';
 
 const CreateContainer = () => {
   const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }];
@@ -21,9 +22,16 @@ const CreateContainer = () => {
 
   const dispatch = useDispatch();
 
-  const handleClickSelectContext = contextInput => {
+  const handleClickSelectContext = () => {
+    //prevent user from adding duplicate context
+    for (let i = 0; i < state.allContext.length; i += 1) {
+      if (state.allContext[i].name === contextInput.name) {
+        return;
+      } 
+    }
     dispatch(actions.addContextActionCreator(contextInput));
     setState(store.getState().contextSlice);
+    
   };
 
   const handleClickInputData = ({ name }, { inputKey, inputValue }) => {
@@ -33,6 +41,12 @@ const CreateContainer = () => {
     setState(store.getState().contextSlice);
   };
 
+  const handleDeleteContextClick = () => {
+    dispatch(actions.deleteContext(contextInput));
+    setContextInput('');
+    setState(store.getState().contextSlice);
+  };
+
   const renderTable = targetContext => {
     if (!targetContext.values) {
       setTableState(defaultTableData);
@@ -56,6 +70,7 @@ const CreateContainer = () => {
               <AddContextForm
                 contextStore={state}
                 handleClickSelectContext={handleClickSelectContext}
+                handleDeleteContextClick={handleDeleteContextClick}
                 renderTable={renderTable}
                 contextInput={contextInput}
                 setContextInput={setContextInput}
@@ -73,7 +88,14 @@ const CreateContainer = () => {
         </Grid>
         <Divider orientation="vertical" variant="middle" flexItem />
         <Grid item>
-          <DataTable target={tableState} />
+          <Typography
+            style={{ color: 'black' }}
+            variant="h6"
+            gutterBottom={true}
+          >
+            Context Data Table
+          </Typography>
+          <DataTable target={tableState} contextInput={contextInput} />
         </Grid>
       </Grid>
     </>

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

@@ -10,17 +10,17 @@ const filter = createFilterOptions();
 const AddContextForm = ({
   contextStore,
   handleClickSelectContext,
+  handleDeleteContextClick,
   renderTable,
   contextInput,
   setContextInput
 }) => {
   const { allContext } = contextStore;
   const [btnDisabled, setBtnDisabled] = useState(false);
+
   const handleClick = () => {
     if (contextInput === '' || contextInput === null) return;
-    const temp = contextInput;
-    setContextInput('');
-    handleClickSelectContext(temp);
+    handleClickSelectContext();
   };
 
   const onChange = (event, newValue) => {
@@ -104,10 +104,17 @@ const AddContextForm = ({
         <Button
           variant="contained"
           onClick={handleClick}
-          disabled={btnDisabled ? true : false}
+          disabled={btnDisabled}
         >
           Create
         </Button>
+        <Button
+          color="error"
+          variant="contained"
+          onClick={handleDeleteContextClick}
+        >
+          Delete
+        </Button>
         {/* <Button variant="contained">Delete</Button> */}
       </Box>
     </Fragment>

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

@@ -6,10 +6,13 @@ import { Typography } from '@mui/material';
 
 const AddDataForm = ({ handleClickInputData, contextInput }) => {
   //const [contextInput, setContextInput] = React.useState(null);
-  const [dataContext, setDataContext] = React.useState({
-    inputKey: '',
-    inputValue: ''
-  });
+  const defaultInputData = {inputKey: '', inputValue: ''};
+  const [dataContext, setDataContext] = React.useState(defaultInputData);
+
+  const saveData = () => {
+    setDataContext(defaultInputData);
+    handleClickInputData(contextInput, dataContext)
+  }
 
   const handleChange = e => {
     setDataContext(prevDataContext => {
@@ -23,7 +26,7 @@ const AddDataForm = ({ handleClickInputData, contextInput }) => {
   return (
     <Fragment>
       <Typography style={{ color: 'black' }} variant="h6" gutterBottom={true}>
-        Add context data
+        Add context data 
       </Typography>
       <Box sx={{ display: 'flex', gap: 2 }}>
         <TextField
@@ -44,7 +47,7 @@ const AddDataForm = ({ handleClickInputData, contextInput }) => {
         />
         <Button
           variant="contained"
-          onClick={() => handleClickInputData(contextInput, dataContext)}
+          onClick={saveData}
         >
           Save
         </Button>

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

@@ -7,6 +7,7 @@ import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';
 import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+import TableFooter from '@mui/material/TableFooter';
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
@@ -28,27 +29,40 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
   }
 }));
 
-export default function DataTable({target}) {
+export default function DataTable({ target, contextInput }) {
   return (
-    <TableContainer component={Paper}>
-      <Table sx={{ width: '510px' }} aria-label="customized table">
-        <TableHead>
-          <TableRow>
-            <StyledTableCell>Key</StyledTableCell>
-            <StyledTableCell align="right">Value</StyledTableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {target.map((data, index) => (
-            <StyledTableRow key={index}>
-              <StyledTableCell component="th" scope="row">
-                {data.key}
+    <>
+      <TableContainer component={Paper} sx={{ maxHeight: '350px' }}>
+        <Table
+          sx={{ width: '510px' }}
+          aria-label="customized table"
+          stickyHeader
+        >
+          <TableHead>
+            <TableRow>
+              {/* <StyledTableCell>Key</StyledTableCell> */}
+              <StyledTableCell align="center" colSpan={3}>
+                {contextInput ? contextInput.name : 'Context Name'}
               </StyledTableCell>
-              <StyledTableCell align="right">{data.value}</StyledTableCell>
-            </StyledTableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {target.map((data, index) => (
+              <StyledTableRow key={index}>
+                <StyledTableCell component="th" scope="row">
+                  {data.key}
+                </StyledTableCell>
+                <StyledTableCell align="right">{data.value}</StyledTableCell>
+              </StyledTableRow>
+            ))}
+          </TableBody>
+          {/* <TableFooter>
+            <StyledTableCell align="center" colSpan={3}>
+              {contextInput ? contextInput.name : 'Context Name'}
+            </StyledTableCell>
+          </TableFooter> */}
+        </Table>
+      </TableContainer>
+    </>
   );
-}
+}

app/src/redux/actions/actions.js

@@ -18,3 +18,8 @@ export const addComponentToContext = newEntry => ({
   type: types.ADD_COMPONENT_TO_CONTEXT,
   payload: newEntry
 });
+
+export const deleteContext = (contextInput) => ({
+  type: types.DELETE_CONTEXT,
+  payload: contextInput
+})

app/src/redux/constants/actionTypes.js

@@ -5,3 +5,4 @@ export const CODE_PREVIEW_INPUT = 'CODE_PREVIEW_INPUT';
 export const ADD_CONTEXT = 'ADD_CONTEXT';
 export const ADD_CONTEXT_VALUES = 'ADD_CONTEXT_VALUES';
 export const ADD_COMPONENT_TO_CONTEXT = 'ADD_COMPONENT_TO_CONTEXT';
+export const DELETE_CONTEXT = 'DELETE_CONTEXT;'

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

@@ -51,6 +51,13 @@ const contextReducer = (state = initialState, action) => {
         ...state,
         allContext: newAllContext
       };
+    case types.DELETE_CONTEXT:
+      const remains = state.allContext.filter((el) => el.name !== action.payload.name)
+      return {
+        ...state,
+        allContext : remains
+      }
+
     case types.ADD_COMPONENT_TO_CONTEXT:
       const newTempState = [...state.allContext];