Merge pull request #24 from oslabs-beta/ui-fixes

atvanek · web-flow · commit 0064cdeae494 · 2023-05-05T11:24:25.000-04:00
UI fixes
diff --git a/__tests__/BottomTabs.test.tsx b/__tests__/BottomTabs.test.tsx
@@ -199,6 +199,6 @@ describe('Customization Panel', () => {
     const panel = screen.getByTestId('customization');
     expect(within(panel).getAllByRole('textbox')).toHaveLength(4);
     // check dropdowns
-    expect(within(panel).getAllByRole('button')).toHaveLength(11);
+    expect(within(panel).getAllByRole('button')).toHaveLength(12);
   });
 });
diff --git a/app/src/components/ContextAPIManager/ContextManager.tsx b/app/src/components/ContextAPIManager/ContextManager.tsx
@@ -42,7 +42,7 @@ const ContextManager = (props): JSX.Element => {
           <TabContext value={value}>
             <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
               <TabList onChange={handleChange} centered={true} sx={{color:color}}>
-                <Tab   style={ { color: color }}label="Create/Edit" value="1" />
+                <Tab   style={{ color: color }}label="Create/Edit" value="1" />
                 <Tab style={{ color: color }} label="Assign" value="2" />
                 <Tab style={{ color: color }} label="Display" value="3" />
               </TabList>
diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useState, useEffect, useContext } from 'react';
+import React, { Fragment, useState } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Button from '@mui/material/Button';
@@ -19,15 +19,17 @@ const AddContextForm = ({
 }) => {
   const { allContext } = contextStore;
   const [btnDisabled, setBtnDisabled] = useState(false);
-  // const [state, dispatch] = useContext(StateContext);
-  const { state, isDarkMode } = useSelector((store:RootState) => ({
+  const { state, isDarkMode } = useSelector((store: RootState) => ({
     isDarkMode: store.darkMode.isDarkMode,
     state: store.appState
-  }))
-const color = isDarkMode ? 'white' : 'black'
+  }));
+  const color = isDarkMode ? 'white' : 'black';
 
   const handleClick = () => {
-    if (contextInput === '' || contextInput === null) return;
+    if (contextInput === '' || contextInput === null) {
+      window.alert('must enter context name');
+      return;
+    }
     handleClickSelectContext();
   };
 
@@ -54,7 +56,7 @@ const color = isDarkMode ? 'white' : 'black'
     const filtered = filter(options, params);
     const { inputValue } = params;
     // Suggest the creation of a new contextInput
-    const isExisting = options.some(option => inputValue === option.name);
+    const isExisting = options.some((option) => inputValue === option.name);
     if (inputValue !== '' && !isExisting) {
       filtered.push({
         inputValue,
@@ -67,7 +69,7 @@ const color = isDarkMode ? 'white' : 'black'
     return filtered;
   };
 
-  const getOptionLabel = option => {
+  const getOptionLabel = (option) => {
     // Value selected with enter, right from the input
     if (typeof option === 'string') {
       return option;
@@ -80,7 +82,11 @@ const color = isDarkMode ? 'white' : 'black'
     return option.name;
   };
 
-  const renderOption = (props, option) => <li style={{ color: 'black' }} {...props}>{option.name}</li>;
+  const renderOption = (props, option) => (
+    <li style={{ color: 'black' }} {...props}>
+      {option.name}
+    </li>
+  );
 
   return (
     <Fragment>
@@ -101,13 +107,16 @@ const color = isDarkMode ? 'white' : 'black'
           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" />
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              InputProps={{
+                ...params.InputProps,
+                style: { color: color }
+              }}
+              variant="filled"
+              label="Create/Select Context"
+            />
           )}
         />
         <Button
@@ -124,10 +133,9 @@ const color = isDarkMode ? 'white' : 'black'
         >
           Delete
         </Button>
-        {/* <Button variant="contained">Delete</Button> */}
       </Box>
     </Fragment>
   );
 };
 
-export default AddContextForm;
+export default AddContextForm;
diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx
@@ -3,22 +3,26 @@ import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import { Typography } from '@mui/material';
-import {useSelector} from 'react-redux'
+import { useSelector } from 'react-redux';
 import { RootState } from '../../../../redux/store';
 
 const AddDataForm = ({ handleClickInputData, contextInput }) => {
   //const [contextInput, setContextInput] = React.useState(null);
-  const defaultInputData = {inputKey: '', inputValue: ''};
+  const defaultInputData = { inputKey: '', inputValue: '' };
   const [dataContext, setDataContext] = React.useState(defaultInputData);
-const { isDarkMode } = useSelector((store:RootState)=> store.darkMode)
+  const { isDarkMode } = useSelector((store: RootState) => store.darkMode);
   const saveData = () => {
     setDataContext(defaultInputData);
-    handleClickInputData(contextInput, dataContext)
-  }
-const color = isDarkMode ? 'white' : 'black';
+    if (dataContext.inputKey === '' || dataContext.inputValue === '') {
+      window.alert('empty key or value');
+      return;
+    }
+    handleClickInputData(contextInput, dataContext);
+  };
+  const color = isDarkMode ? 'white' : 'black';
 
-  const handleChange = e => {
-    setDataContext(prevDataContext => {
+  const handleChange = (e) => {
+    setDataContext((prevDataContext) => {
       return {
         ...prevDataContext,
         [e.target.name]: e.target.value
@@ -29,38 +33,35 @@ const color = isDarkMode ? 'white' : 'black';
   return (
     <Fragment>
       <Typography style={{ color: color }} variant="h6" gutterBottom={true}>
-        Add context data 
+        Add context data
       </Typography>
-      <Box sx={{ display: 'flex', gap: 2, color:'black' }}>
+      <Box sx={{ display: 'flex', gap: 2, color: 'black' }}>
         <TextField
           id="outlined-basic"
           label="Key"
           variant="outlined"
           value={dataContext.inputKey}
           name="inputKey"
-          onChange={e => handleChange(e)}
-          InputProps={{style: { color: color }}}  
-          style={{border:'1px solid black'}}
+          onChange={(e) => handleChange(e)}
+          InputProps={{ style: { color: color } }}
+          style={{ border: '1px solid black' }}
         />
         <TextField
           id="outlined-basic"
           label="Value"
           variant="outlined"
           value={dataContext.inputValue}
           name="inputValue"
-          onChange={e => handleChange(e)}
-          style={{border:'1px solid black'}}
-          InputProps={{ style: { color: color }}}  
+          onChange={(e) => handleChange(e)}
+          style={{ border: '1px solid black' }}
+          InputProps={{ style: { color: color } }}
         />
-        <Button
-          variant="contained"
-          onClick={saveData}
-        >
+        <Button variant="contained" onClick={saveData}>
           Save
         </Button>
       </Box>
     </Fragment>
   );
 };
 
-export default AddDataForm;
+export default AddDataForm;
diff --git a/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx b/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx
@@ -1,38 +1,42 @@
-import React, { useEffect, useState} from 'react';
-import { useStore, useSelector } from 'react-redux';
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { Chart } from 'react-google-charts';
 import Grid from '@mui/material/Grid';
 import { RootState } from '../../../redux/store';
 
 const DisplayContainer = () => {
-  const allContext = useSelector((store:RootState) => store.contextSlice);
-  // const { allContext } = store.getState().contextSlice;
+  const allContext = useSelector(
+    (store: RootState) => store.contextSlice.allContext
+  );
   const [contextData, setContextData] = useState([]);
 
-  //build data for Google charts, tree rendering
   useEffect(() => {
-    transformData(allContext);
+    transformData();
   }, []);
 
-  const transformData = contexts => {
-    const formattedData = contexts
-      .map(el => {
-        return el.components.map(component => {
-          return [`App - ${el.name} - ${component}`];
+  //formats context data for use in react google charts
+  const transformData = () => {
+    const formattedData = allContext
+      .map((obj) => {
+        return obj.components.map((component) => {
+          return [`App ⎯⎯ ${obj.name} ⎯⎯ ${component}`];
         });
       })
       .flat();
     setContextData([['Phrases'], ...formattedData]);
   };
 
+  //format options for google chart
   const options = {
     wordtree: {
       format: 'implicit',
       word: 'App'
     }
   };
+
   return (
     <Grid container display="flex" justifyContent="center">
+      {contextData.length < 2 && <h2>No Contexts consumed</h2>}
       <Grid item>
         <Chart
           chartType="WordTree"
@@ -45,4 +49,4 @@ const DisplayContainer = () => {
     </Grid>
   );
 };
-export default DisplayContainer;
+export default DisplayContainer;
diff --git a/app/src/components/bottom/BottomTabs.tsx b/app/src/components/bottom/BottomTabs.tsx
@@ -174,8 +174,8 @@ const useStyles = makeStyles((theme) => ({
     textTransform: 'initial',
     minWidth: 40,
     // fontWeight: theme.typography.fontWeightRegular,
-    // marginRight: theme.spacing(2), // JZ: updated syntax as per deprecation warning
-    // marginLeft: theme.spacing(2),
+    marginRight: '16px',
+    marginLeft: '16px',
 
     fontFamily: [
       '-apple-system',
