Merge branch 'devContext' of https://github.com/oslabs-beta/ReacType into huyBranch

Author: huypham048

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

@@ -22,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 }) => {
@@ -34,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);
@@ -57,6 +70,7 @@ const CreateContainer = () => {
               <AddContextForm
                 contextStore={state}
                 handleClickSelectContext={handleClickSelectContext}
+                handleDeleteContextClick={handleDeleteContextClick}
                 renderTable={renderTable}
                 contextInput={contextInput}
                 setContextInput={setContextInput}

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) => {
@@ -105,6 +105,13 @@ const AddContextForm = ({
         >
           Create
         </Button>
+        <Button
+          color="error"
+          variant="contained"
+          onClick={handleDeleteContextClick}
+        >
+          Delete
+        </Button>
         {/* <Button variant="contained">Delete</Button> */}
       </Box>
     </Fragment>

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

@@ -52,6 +52,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];