feat: include badge showing applied filters in Verify page

src/components/Verify.js

@@ -14,6 +14,7 @@ import LinearProgress from '@material-ui/core/LinearProgress';
 import IconFilter from '@material-ui/icons/FilterList';
 import IconButton from '@material-ui/core/IconButton';
 import Snackbar from '@material-ui/core/Snackbar';
+import Avatar from '@material-ui/core/Avatar';
 
 import FilterTop from './FilterTop';
 import CheckIcon from '@material-ui/icons/Check';
@@ -139,6 +140,12 @@ const useStyles = makeStyles((theme) => ({
   mb: {
     marginBottom: '1rem',
   },
+  activeFilters: {
+    width: theme.spacing(5),
+    height: theme.spacing(5),
+    marginLeft: '0.75rem',
+    backgroundColor: theme.palette.stats.green,
+  }
 }));
 
 const ToVerifyCounter = withData(({ data }) => (
@@ -164,6 +171,7 @@ const Verify = (props) => {
     grower: {},
   });
   const refContainer = useRef();
+  const numFilters = verifyContext.filter.countAppliedFilters();
 
   // log.debug(
   //   'render: verify',
@@ -446,13 +454,21 @@ const Verify = (props) => {
             <Navbar
               buttons={[
                 <Button
-                  variant="text"
+                  variant="outlined"
                   color="primary"
                   onClick={handleFilterClick}
                   startIcon={<IconFilter />}
                   key={1}
                 >
                   Filter
+                  {
+                    numFilters > 0 &&
+                    (
+                      <Avatar className={classes.activeFilters}>
+                        {numFilters}
+                      </Avatar>
+                    )
+                  }
                 </Button>,
               ]}
             >

src/components/tests/verify.test.js

@@ -299,6 +299,7 @@ describe('Verify', () => {
         filter: new FilterModel({
           approved: false,
           active: true,
+          deviceIdentifier: '06C71C70-0636-4339-AE53-949107B58814',
         }),
         invalidateCaptureCount: true,
         captureCount: null,
@@ -370,6 +371,12 @@ describe('Verify', () => {
       expect(tokenStatus).toBeInTheDocument();
     });
 
+    it('renders number of applied filters', () => {
+      const filter = screen.getByRole('button', { name: /filter/i });
+      userEvent.click(filter);
+      expect(verifyValues.filter.countAppliedFilters()).toBe(2) ;
+    })
+
     it('renders side panel', () => {
       // screen.logTestingPlaygroundURL();
       // expect(screen.getByText(/planters per page: 24/i));

src/models/Filter.js

@@ -126,4 +126,62 @@ export default class Filter {
       return true;
     }
   };
+
+  /*
+   * A fn to count the number of current applied filters
+  */
+  countAppliedFilters() {
+    let numFilters = 0;
+
+    if (this.active !== undefined && this.approved !== undefined) {
+      numFilters += 1;
+    }
+
+    if (this.uuid) {
+      numFilters += 1;
+    }
+
+    if (this.captureId) {
+      numFilters += 1;
+    }
+
+    if (this.deviceIdentifier) {
+      numFilters += 1;
+    }
+
+    if (this.planterId) {
+      numFilters += 1;
+    }
+
+    if (this.planterIdentifier) {
+      numFilters += 1;
+    }
+
+    if (this.tagId > 0) {
+      numFilters += 1;
+    }
+
+    if (this.dateStart) {
+      numFilters += 1;
+    }
+
+    if (this.dateEnd) {
+      numFilters += 1;
+    }
+
+    if (this.organizationId && this.organizationId !== ALL_ORGANIZATIONS) {
+      numFilters += 1;
+    }
+
+    if (this.speciesId && this.speciesId !== ALL_SPECIES) {
+      numFilters += 1;
+    }
+
+    if (this.tokenId && this.tokenId !== 'All') {
+      numFilters += 1;
+    }
+
+    return numFilters;
+  }
+
 }