Feature/filter fix

src/components/ChartContainer/ChartHeader.js

@@ -12,11 +12,7 @@ function ChartHeader({
 }) {
   const allMeasureText = (
     <Grid className='d3-container__return-title-display'>
-      <Typography
-        variant='h6'
-      >
-        All Measures
-      </Typography>
+      <Typography variant='h6'>All Measures</Typography>
     </Grid>
   );
   const allMeasureTextWithLinks = (
@@ -34,8 +30,8 @@ function ChartHeader({
         <Grid className='d3-container__return-measure-display'>
           {labelGenerator(
             currentResults.find(
-              (result) => result.measure === activeMeasure.measure
-            )
+              (result) => result.measure === activeMeasure.measure,
+            ),
           )}
         </Grid>
       )}

src/components/Common/CommonStandardButton.js

@@ -9,16 +9,17 @@ import PropTypes from 'prop-types';
 // variant - Options of contained, outlined, or text
 // onClick - onClick property for button
 
-export const StandardButton = ({
+export function StandardButton({
   children,
   leftIcon,
   rightIcon,
-  props,
   variant,
   onClick,
-}) => {
+}) {
   // Instantiate variables for colors set in "variant" switch statement
-  let backgroundColor, hoverColor, textColor;
+  let backgroundColor;
+  let hoverColor;
+  let textColor;
   switch (variant) {
     case 'contained':
       [backgroundColor, hoverColor] = ['#005EA2', '#0075CA'];
@@ -39,11 +40,11 @@ export const StandardButton = ({
   return (
     <Button
       onClick={onClick}
-      disableElevation={true}
+      disableElevation
       sx={[
         {
           color: textColor,
-          backgroundColor: backgroundColor,
+          backgroundColor,
           borderColor: textColor,
           '&:hover': {
             background: hoverColor,
@@ -52,44 +53,48 @@ export const StandardButton = ({
         },
       ]}
       variant={variant}
-      {...props}
     >
       {/* This grid aligns the icons and text in the button */}
       <Grid
         style={{ gap: '.5rem', pr: '1rem', pl: '1rem' }}
         container
-        height={'1.5rem'}
+        height='1.5rem'
       >
         {/* If there is a leftIcon prop passed, render it */}
-        {leftIcon ? <Grid item>{leftIcon}</Grid> : <></>}
+        {leftIcon ? <Grid item>{leftIcon}</Grid> : null}
 
         {/* If there is a children prop passed, render it */}
         {children ? (
           <Grid item>
             <Typography
               sx={{ color: textColor }}
-              fontWeight='500'
+              fontWeight={500}
               textTransform='capitalize'
             >
               {children}
             </Typography>
           </Grid>
-        ) : (
-          <></>
-        )}
+        ) : null}
 
         {/* If there is a rightIcon prop passed, render it */}
-        {rightIcon ? <Grid item>{rightIcon}</Grid> : <></>}
+        {rightIcon ? <Grid item>{rightIcon}</Grid> : null}
       </Grid>
     </Button>
   );
-};
+}
 
 StandardButton.propTypes = {
   children: PropTypes.node,
-  leftIcon: PropTypes.object,
-  rightIcon: PropTypes.object,
-  props: PropTypes.object,
+  leftIcon: PropTypes.element,
+  rightIcon: PropTypes.element,
   variant: PropTypes.string,
   onClick: PropTypes.func,
-}
+};
+
+StandardButton.defaultProps = {
+  children: null,
+  leftIcon: null,
+  rightIcon: null,
+  variant: null,
+  onClick: () => {},
+};

src/components/Common/Controller.js

@@ -44,7 +44,7 @@ export async function filterSearch(searchMeasure, searchArray, isComposite) {
       filters: searchArray,
       isComposite,
     }
-    const filterSearchURL = new URL(`${env.REACT_APP_HEDIS_MEASURE_API_URL}/filter`)
+    const filterSearchURL = new URL(`${env.REACT_APP_HEDIS_MEASURE_API_URL}filter`)
     const filterResults = await axios.post(filterSearchURL, searchObject).then((res) => res.data)
     if (filterResults.status === 'Success') {
       const { members, dailyMeasureResults } = filterResults

src/components/Common/Navbar.js

@@ -1,13 +1,13 @@
 import { Link } from 'react-router-dom';
-import { StandardButton } from './CommonStandardButton';
 import { styled } from '@mui/material/styles';
 import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Toolbar from '@mui/material/Toolbar';
+import { StandardButton } from './CommonStandardButton';
 
 export default function Navbar() {
   // Remove the auth token
@@ -73,12 +73,12 @@ export default function Navbar() {
               {/* Menu (pop-over) */}
               <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
                 <MenuItem
-                  onClick={(e) => {
+                  onClick={() => {
                     handleLogout();
                   }}
                 >
                   <Link to={{ pathname: '/auth/login' }} onClick={logout}>
-                    <StandardButton variant={'text'}>Logout</StandardButton>
+                    <StandardButton variant='text'>Logout</StandardButton>
                   </Link>
                 </MenuItem>
               </Menu>

src/components/DisplayTable/MeasureTableRow.js

@@ -8,6 +8,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { useTheme } from '@mui/material/styles';
 import CheckBoxCell from './CheckBoxCell';
 import Alert from '../Utilities/Alert'
+
 function MeasureTableRow({
   rowDataItem, headerInfo, useCheckBox, handleCheckBoxEvent, rowSelected, color, measureInfo,
 }) {

src/components/FilterMenu/FilterDrawer.js

@@ -1,3 +1,11 @@
+import { Box, Drawer, Grid, Slider, Typography } from '@mui/material';
+import { useState } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import HelpIcon from '@mui/icons-material/Help';
+import ToolTip from '@mui/material/Tooltip';
+import { StandardButton } from '../Common/CommonStandardButton';
+import FilterDrawerItem from './FilterDrawerItem';
+import filterDrawerItemData from './FilterDrawerItemData';
 import {
   additionalFilterOptionsProps,
   currentFiltersProps,
@@ -12,15 +20,6 @@ import {
   setTableFilterProps,
   toggleFilterDrawerProps,
 } from '../ChartContainer/D3Props';
-import { Box, Drawer, Grid, Slider, Typography } from '@mui/material';
-import { StandardButton } from 'components/Common/CommonStandardButton';
-import { useState } from 'react';
-import CancelIcon from '@mui/icons-material/Cancel';
-import CloseIcon from '@mui/icons-material/Close';
-import FilterDrawerItem from './FilterDrawerItem';
-import filterDrawerItemData from './FilterDrawerItemData';
-import HelpIcon from '@mui/icons-material/Help';
-import ToolTip from '@mui/material/Tooltip';
 
 const sliderTip = 'Selects the range of compliance.';
 
@@ -39,25 +38,26 @@ function FilterDrawer({
   toggleFilterDrawer,
 }) {
   const [percentSliderValue, setPercentSliderValue] = useState(
-    Array.from(currentFilters.percentRange)
+    Array.from(currentFilters.percentRange),
   );
   const [starChoices, setStarChoices] = useState(
-    Array.from(currentFilters.stars)
+    Array.from(currentFilters.stars),
   );
   const [domainOfCareChoices, setDomainOfCareChoices] = useState(
-    Array.from(currentFilters.domainsOfCare)
+    Array.from(currentFilters.domainsOfCare),
   );
   const [payorChoices, setPayorChoices] = useState(
-    Array.from(currentFilters.payors)
+    Array.from(currentFilters.payors),
   );
   const [healthcareProviderChoices, setHealthcareProviderChoices] = useState(
-    Array.from(currentFilters.healthcareProviders)
+    Array.from(currentFilters.healthcareProviders),
   );
   const [healthcareCoverageChoices, setHealthcareCoverageChoices] = useState(
-    Array.from(currentFilters.healthcareCoverages)
+    Array.from(currentFilters.healthcareCoverages),
   );
   const [healthcarePractitionersChoices, setHealthcarePractitionersChoices] =
     useState(Array.from(currentFilters.healthcarePractitioners));
+
   const toggleDrawer = (open) => (event) => {
     if (
       event.type === 'keydown' &&
@@ -85,46 +85,46 @@ function FilterDrawer({
       setPayorChoices(payorChoices.concat(event.target.value));
     } else {
       setPayorChoices(
-        payorChoices.filter((payer) => payer !== event.target.value)
+        payorChoices.filter((payer) => payer !== event.target.value),
       );
     }
   };
   const handleHealthcareProviderChange = (event) => {
     if (event.target.checked) {
       setHealthcareProviderChoices(
-        healthcareProviderChoices.concat(event.target.value)
+        healthcareProviderChoices.concat(event.target.value),
       );
     } else {
       setHealthcareProviderChoices(
         healthcareProviderChoices.filter(
-          (provider) => provider !== event.target.value
-        )
+          (provider) => provider !== event.target.value,
+        ),
       );
     }
   };
   const handleHealthcareCoverageChange = (event) => {
     if (event.target.checked) {
       setHealthcareCoverageChoices(
-        healthcareCoverageChoices.concat(event.target.value)
+        healthcareCoverageChoices.concat(event.target.value),
       );
     } else {
       setHealthcareCoverageChoices(
         healthcareCoverageChoices.filter(
-          (coverage) => coverage !== event.target.value
-        )
+          (coverage) => coverage !== event.target.value,
+        ),
       );
     }
   };
   const handlePractitionerChange = (event) => {
     if (event.target.checked) {
       setHealthcarePractitionersChoices(
-        healthcarePractitionersChoices.concat(event.target.value)
+        healthcarePractitionersChoices.concat(event.target.value),
       );
     } else {
       setHealthcarePractitionersChoices(
         healthcarePractitionersChoices.filter(
-          (practitioner) => practitioner !== event.target.value
-        )
+          (practitioner) => practitioner !== event.target.value,
+        ),
       );
     }
   };
@@ -133,7 +133,7 @@ function FilterDrawer({
       setStarChoices(starChoices.concat(parseInt(event.target.value, 10)));
     } else {
       setStarChoices(
-        starChoices.filter((star) => star !== parseInt(event.target.value, 10))
+        starChoices.filter((star) => star !== parseInt(event.target.value, 10)),
       );
     }
   };
@@ -142,7 +142,7 @@ function FilterDrawer({
       setDomainOfCareChoices(domainOfCareChoices.concat(event.target.value));
     } else {
       setDomainOfCareChoices(
-        domainOfCareChoices.filter((doc) => doc !== event.target.value)
+        domainOfCareChoices.filter((doc) => doc !== event.target.value),
       );
     }
   };
@@ -157,13 +157,13 @@ function FilterDrawer({
     setDomainOfCareChoices(Array.from(currentFilters.domainsOfCare));
     setPayorChoices(Array.from(currentFilters.payors));
     setHealthcareProviderChoices(
-      Array.from(currentFilters.healthcareProviders)
+      Array.from(currentFilters.healthcareProviders),
     );
     setHealthcareCoverageChoices(
-      Array.from(currentFilters.healthcareCoverages)
+      Array.from(currentFilters.healthcareCoverages),
     );
     setHealthcarePractitionersChoices(
-      Array.from(currentFilters.healthcarePractitioners)
+      Array.from(currentFilters.healthcarePractitioners),
     );
     toggleFilterDrawer(false);
     setFilterActivated(false);
@@ -187,7 +187,7 @@ function FilterDrawer({
     };
     filterOptions.sum = filterDrawerItemData.sumCalculator(
       filterOptions,
-      additionalFilterOptions
+      additionalFilterOptions,
     );
     handleFilterChange(filterOptions);
     toggleFilterDrawer(false);
@@ -235,17 +235,6 @@ function FilterDrawer({
               // className="filter-drawer__reset-button"
               variant='outlined'
               onClick={handleResetFilter}
-              rightIcon={
-                <CancelIcon
-                  // className="filter-drawer__cancel-icon"
-                  sx={{
-                    // ml: ".5rem",
-                    mb: '.1rem',
-                    height: '1.1rem',
-                    pl: '0rem !important',
-                  }}
-                />
-              }
             >
               Reset Filters
             </StandardButton>
@@ -292,28 +281,28 @@ function FilterDrawer({
           />
           <FilterDrawerItem
             filterItem={filterDrawerItemData.payors(
-              additionalFilterOptions.payors
+              additionalFilterOptions.payors,
             )}
             filterAction={handlePayorChange}
             currentFilter={payorChoices}
           />
           <FilterDrawerItem
             filterItem={filterDrawerItemData.healthcareProviders(
-              additionalFilterOptions.healthcareProviders
+              additionalFilterOptions.healthcareProviders,
             )}
             filterAction={handleHealthcareProviderChange}
             currentFilter={healthcareProviderChoices}
           />
           <FilterDrawerItem
             filterItem={filterDrawerItemData.healthcareCoverages(
-              additionalFilterOptions.healthcareCoverages
+              additionalFilterOptions.healthcareCoverages,
             )}
             filterAction={handleHealthcareCoverageChange}
             currentFilter={healthcareCoverageChoices}
           />
           <FilterDrawerItem
             filterItem={filterDrawerItemData.healthcarePractitioners(
-              additionalFilterOptions.healthcarePractitioners
+              additionalFilterOptions.healthcarePractitioners,
             )}
             filterAction={handlePractitionerChange}
             currentFilter={healthcarePractitionersChoices}