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

Added error/confirmation messages

Author: atvanek

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

@@ -4,21 +4,21 @@ 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 { useSelector, useDispatch } from 'react-redux';
-import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../../redux/store';
 
 const CreateContainer = () => {
   const state = useSelector((store: RootState) => store.contextSlice);
   const [contextInput, setContextInput] = React.useState(null);
   const [currentContext, setCurrentContext] = React.useState(null);
+  const [errorMsg, setErrorMsg] = React.useState('');
+  const [errorStatus, setErrorStatus] = React.useState(false);
   const currentKeyValues = state.allContext.find(
     (obj) => obj.name === currentContext
   )?.values || [{ key: 'Enter Key', value: 'Enter value' }];
@@ -27,50 +27,57 @@ const CreateContainer = () => {
   //update data store when user adds a new context
   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;
-      }
+    let letters = /[a-zA-Z]/;
+    let error;
+    console.log(state.allContext, contextInput, 'error test');
+    if (!contextInput || contextInput.trim() === '') {
+      error = 'empty';
+    } else if (!contextInput.charAt(0).match(letters)) {
+      error = 'letters';
+    } else if (!contextInput.match(/^[0-9a-zA-Z]+$/)) {
+      error = 'symbolsDetected';
+    } else if (
+      state.allContext.some(
+        (context) => context.name.toLowerCase() === contextInput.toLowerCase()
+      )
+    ) {
+      error = 'dupe';
+    }
+
+    if (error !== undefined) {
+      triggerError(error);
+      return;
     }
+
+    dispatch(addContext({ name: contextInput }));
     setContextInput('');
-    dispatch(addContext(contextInput));
+  };
 
-    // setState(allContext);
+  const triggerError = (type: String) => {
+    setErrorStatus(true);
+    if (type === 'empty') {
+      setErrorMsg('Context name cannot be blank.');
+    } else if (type === 'dupe') {
+      setErrorMsg('Context name already exists.');
+    } else if (type === 'letters') {
+      setErrorMsg('Context name must start with a letter.');
+    } else if (type === 'symbolsDetected') {
+      setErrorMsg('Context name must not contain symbols.');
+    }
   };
 
   //update data store when user add new key-value pair to context
   const handleClickInputData = (name, { inputKey, inputValue }) => {
     dispatch(addContextValues({ name, inputKey, inputValue }));
-    // setState(allContext);
   };
 
   //update data store when user deletes context
   const handleDeleteContextClick = () => {
-    dispatch(deleteContext(contextInput));
+    dispatch(deleteContext({ name: currentContext }));
     setContextInput('');
-    // setState(allContext);
-    setTableState(defaultTableData);
-
-    dispatch(deleteElement({ id: 'FAKE_ID', contextParam: state }));
-    // dispatchContext({
-    //   type: 'DELETE ELEMENT',
-    //   payload: 'FAKE_ID'
-    // });
+    setCurrentContext(null);
   };
 
-  //re-render data table when there's new changes
-  const renderTable = (targetContext) => {
-    if (
-      targetContext === null ||
-      targetContext === undefined ||
-      !targetContext.values
-    ) {
-      // if (targetContext === null || targetContext === undefined) {
-      setTableState(defaultTableData);
-    } else {
-      setTableState(targetContext.values);
-    }
-  };
   console.log('state.allContext', state.allContext);
   return (
     <>
@@ -89,19 +96,20 @@ const CreateContainer = () => {
                 contextStore={state}
                 handleClickSelectContext={handleClickSelectContext}
                 handleDeleteContextClick={handleDeleteContextClick}
-                renderTable={renderTable}
                 contextInput={contextInput}
                 setContextInput={setContextInput}
                 currentContext={currentContext}
                 setCurrentContext={setCurrentContext}
+                errorStatus={errorStatus}
+                setErrorStatus={setErrorStatus}
+                errorMsg={errorMsg}
               />
             </Grid>
 
             <Divider variant="middle" />
             <Grid item>
               <AddDataForm
                 handleClickInputData={handleClickInputData}
-                contextInput={contextInput}
                 currentContext={currentContext}
               />
             </Grid>

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

@@ -1,103 +1,66 @@
 import React, { Fragment, useState } from 'react';
 import TextField from '@mui/material/TextField';
 import Select from '@mui/material/Select';
-import FormControl from '@mui/material/FormControl';
-import { createFilterOptions } from '@mui/material/Autocomplete';
+import Snackbar from '@mui/material/Snackbar';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
 import { MenuItem, Typography } from '@mui/material';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../../../redux/store';
-import { error } from 'console';
-
-const filter = createFilterOptions();
 
 const AddContextForm = ({
   contextStore,
   handleClickSelectContext,
   handleDeleteContextClick,
-  renderTable,
   contextInput,
   setContextInput,
   currentContext,
-  setCurrentContext
+  setCurrentContext,
+  errorMsg,
+  errorStatus,
+  setErrorStatus
 }) => {
   const { allContext } = contextStore;
   console.log('all contexts', allContext);
   const [btnDisabled, setBtnDisabled] = useState(false);
+  const [open, setOpen] = 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) {
-      window.alert('must enter context name');
-      return;
-    }
     handleClickSelectContext();
+    setOpen(true);
   };
 
-  // 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 });
+    setErrorStatus(false);
+    setOpen(false);
+    setContextInput(e.target.value);
   };
 
-  const filterOptions = (options, params) => {
-    // setBtnDisabled(true);
-    const filtered = filter(options, params);
-    const { inputValue } = params;
-    // Suggest the creation of a new contextInput
-    const isExisting = options.some((option) => inputValue === option.name);
-    if (inputValue !== '' && !isExisting) {
-      filtered.push({
-        inputValue,
-        name: `Add "${inputValue}"`
-      });
-
-      // setBtnDisabled(false);
+  const handleClose = (
+    event: React.SyntheticEvent | Event,
+    reason?: string
+  ) => {
+    if (reason === 'clickaway') {
+      return;
     }
 
-    return filtered;
-  };
-
-  const getOptionLabel = (option) => {
-    // Value selected with enter, right from the input
-    if (typeof option === 'string') {
-      return option;
-    }
-    // Add "xxx" option created dynamically
-    if (option.inputValue) {
-      return option.inputValue;
-    }
-    // Regular option
-    return option.name;
+    setOpen(false);
   };
 
-  const renderOption = (props, option) => (
-    <li style={{ color: 'black' }} {...props}>
-      {option.name}
-    </li>
-  );
+  const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+    props,
+    ref
+  ) {
+    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+  });
 
   const contexts = allContext.map((context) => {
     return (
@@ -113,56 +76,59 @@ const AddContextForm = ({
         Create Context
       </Typography>
       <Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
-        {/* <Autocomplete
-          id="autoCompleteContextField"
-          value={contextInput}
-          onChange={onChange}
-          filterOptions={filterOptions}
-          selectOnFocus
-          clearOnBlur
-          handleHomeEndKeys
-          options={allContext || []}
-          getOptionLabel={getOptionLabel}
-          renderOption={renderOption}
-          sx={{ width: 425, border: '1px solid black' }}
-          freeSolo
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              InputProps={{
-                ...params.InputProps,
-                style: { color: color }
-              }}
-              variant="filled"
-              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'
+            border: '1px solid black'
           }}
           variant="filled"
           label="Create Context"
+          value={contextInput}
+          helperText={errorStatus ? errorMsg : null}
+          error={errorStatus}
         />
+        <Snackbar
+          open={open && !errorStatus}
+          autoHideDuration={6000}
+          onClose={handleClose}
+        >
+          <Alert
+            onClose={handleClose}
+            severity="success"
+            sx={{ width: '100%', color: 'white' }}
+          >
+            Context Created
+          </Alert>
+        </Snackbar>
         <Button
           variant="contained"
           onClick={handleClick}
           disabled={btnDisabled}
         >
           Create
         </Button>
+      </Box>
+      <Typography style={{ color: color }} variant="h6" gutterBottom={true}>
+        Select Context
+      </Typography>
+      <Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
+        <Select
+          sx={{ width: 425 }}
+          style={{ border: '1px solid #0099e6', color: 'black' }}
+          value={currentContext}
+          label="Select Context"
+          MenuProps={{ disablePortal: true }}
+          onChange={(e) => {
+            console.log(e);
+            setCurrentContext(e.target.value);
+          }}
+        >
+          {contexts}
+        </Select>
         <Button
           color="error"
           variant="contained"
@@ -171,25 +137,6 @@ 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>
   );
 };

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

@@ -8,7 +8,6 @@ import { RootState } from '../../../../redux/store';
 
 const AddDataForm = ({
   handleClickInputData,
-  contextInput,
   currentContext
 }) => {
   //const [contextInput, setContextInput] = React.useState(null);