css refractoring on create context form. Also clearing existing errors.

Author: ken-Bains

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

@@ -9,7 +9,7 @@ import AddContextForm from './components/AddContextForm';
 import * as actions from '../../../redux/actions/actions';
 
 const CreateContainer = () => {
-  const defaultTableData = [{key: 'Enter Key', value: 'Enter value'}]
+  const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }];
   const store = useStore();
   const [state, setState] = useState([]);
   const [tableState, setTableState] = React.useState(defaultTableData);
@@ -27,40 +27,53 @@ const CreateContainer = () => {
   };
 
   const handleClickInputData = ({ name }, { inputKey, inputValue }) => {
-    dispatch(actions.addContextValuesActionCreator({ name, inputKey, inputValue }));
+    dispatch(
+      actions.addContextValuesActionCreator({ name, inputKey, inputValue })
+    );
     setState(store.getState().contextSlice);
   };
 
   const renderTable = targetContext => {
-    if (!targetContext.values[0]) {
+    console.log(targetContext)
+    if (!targetContext.values) {
       setTableState(defaultTableData);
     } else {
       setTableState(targetContext.values);
     }
   };
   return (
     <>
-      <Grid container spacing={2}>
-        <Grid
-          item
-          xs={6}
-          display="flex"
-          direction="column"
-          justifyContent="center"
-          alignItems="center"
-        >
-          <AddContextForm
-            contextStore={state}
-            handleClickSelectContext={handleClickSelectContext}
-            renderTable={renderTable}
-            contextInput={contextInput}
-            setContextInput={setContextInput}
-          />
-          <Divider variant="middle" sx={{ mb: 3 }} />
-          <AddDataForm handleClickInputData={handleClickInputData} contextInput={contextInput}/>
-        </Grid>
+      <Grid container display="flex" justifyContent="space-evenly" >
+        <Grid item >
+          <Grid
+            container
+            spacing={2}
+            display="flex"
+            direction="column"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Grid item >
+              <AddContextForm
+                contextStore={state}
+                handleClickSelectContext={handleClickSelectContext}
+                renderTable={renderTable}
+                contextInput={contextInput}
+                setContextInput={setContextInput}
+              />
+            </Grid>
 
-        <Grid item xs={6}>
+            <Divider variant="middle" />
+            <Grid item >
+              <AddDataForm
+                handleClickInputData={handleClickInputData}
+                contextInput={contextInput}
+              />
+            </Grid>
+          </Grid>
+        </Grid>
+        <Divider orientation="vertical" variant="middle" flexItem />
+        <Grid item>
           <DataTable target={tableState} />
         </Grid>
       </Grid>

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

@@ -15,50 +15,53 @@ const AddContextForm = ({
   setContextInput
 }) => {
   const { allContext } = contextStore;
-  
+  const [btnDisabled, setBtnDisabled] = useState(false);
   const handleClick = () => {
     if (contextInput === '' || contextInput === null) return;
     const temp = contextInput;
     setContextInput('');
     handleClickSelectContext(temp);
   };
 
-  const autoOnChange = (event, 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
+      //console.log(newValue,newValue.inputValue)
       setContextInput({
-        name: newValue.inputValue
+        name: newValue.inputValue,
+        values: []
       });
+      renderTable(newValue);
+
     } else {
       setContextInput(newValue);
       renderTable(newValue);
     }
   };
 
-  const autoFitler = (options, params) => {
+  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
-      // console.log(inputValue)
-    );
+    const isExisting = options.some(option => inputValue === option.name);
     if (inputValue !== '' && !isExisting) {
       filtered.push({
         inputValue,
         name: `Add "${inputValue}"`
       });
+
+     // setBtnDisabled(false);
     }
 
     return filtered;
   };
 
-  const autoGetOptions = option => {
+  const getOptionLabel = option => {
     // Value selected with enter, right from the input
     if (typeof option === 'string') {
       return option;
@@ -71,7 +74,7 @@ const AddContextForm = ({
     return option.name;
   };
 
-  const autoRenderOptions = (props, option) => (
+  const renderOption = (props, option) => (
     <li {...props}>{option.name}</li>
   );
 
@@ -84,21 +87,25 @@ const AddContextForm = ({
         <Autocomplete
           id="autoCompleteContextField"
           value={contextInput}
-          onChange={autoOnChange}
-          filterOptions={autoFitler}
+          onChange={onChange}
+          filterOptions={filterOptions}
           selectOnFocus
           clearOnBlur
           handleHomeEndKeys
           options={allContext || []}
-          getOptionLabel={autoGetOptions}
-          renderOption={autoRenderOptions}
+          getOptionLabel={getOptionLabel}
+          renderOption={renderOption}
           sx={{ width: 425 }}
           freeSolo
           renderInput={params => (
             <TextField {...params} label="Create/Select Context" />
           )}
         />
-        <Button variant="contained" onClick={handleClick}>
+        <Button
+          variant="contained"
+          onClick={handleClick}
+          disabled={btnDisabled ? true : false}
+        >
           Create
         </Button>
         {/* <Button variant="contained">Delete</Button> */}

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

@@ -19,7 +19,7 @@ const AddDataForm = ({ handleClickInputData, contextInput }) => {
       };
     });
   };
-
+console.log(contextInput)
   return (
     <Fragment>
       <Typography style={{ color: 'black' }} variant="h6" gutterBottom={true}>