fix: remove toVerifyCounter which was causing repeated getCount reque…

…sts (#188)
Greenstand · Nov 13, 2021 · 5cf9697 · 5cf9697
1 parent f897b5f
commit 5cf9697
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 23 deletions.
diff --git a/src/components/Verify.js b/src/components/Verify.js
@@ -28,7 +28,6 @@ import GrowerDetail from './GrowerDetail';
 // import CaptureTags from './CaptureTags';
 import SidePanel from './SidePanel';
 import CaptureDetailDialog from './CaptureDetailDialog';
-import withData from './common/withData';
 import OptimizedImage from './OptimizedImage';
 import { LocationOn } from '@material-ui/icons';
 import { countToLocaleString } from '../common/numbers';
@@ -145,16 +144,9 @@ const useStyles = makeStyles((theme) => ({
     height: theme.spacing(5),
     marginLeft: '0.75rem',
     backgroundColor: theme.palette.stats.green,
-  }
+  },
 }));
 
-const ToVerifyCounter = withData(({ data }) => (
-  <>
-    {data !== null &&
-      `${countToLocaleString(data)} capture${data === 1 ? '' : 's'}`}
-  </>
-));
-
 const Verify = (props) => {
   const verifyContext = useContext(VerifyContext);
   const speciesContext = useContext(SpeciesContext);
@@ -438,14 +430,11 @@ const Verify = (props) => {
                   key={1}
                 >
                   Filter
-                  {
-                    numFilters > 0 &&
-                    (
-                      <Avatar className={classes.activeFilters}>
-                        {numFilters}
-                      </Avatar>
-                    )
-                  }
+                  {numFilters > 0 && (
+                    <Avatar className={classes.activeFilters}>
+                      {numFilters}
+                    </Avatar>
+                  )}
                 </Button>,
               ]}
             >
@@ -483,11 +472,12 @@ const Verify = (props) => {
                 >
                   <Grid item>
                     <Typography variant="h5">
-                      <ToVerifyCounter
-                        needsRefresh={verifyContext.invalidateCaptureCount}
-                        fetch={verifyContext.getCaptureCount}
-                        data={verifyContext.captureCount}
-                      />
+                      {verifyContext.captureCount !== null &&
+                        `${countToLocaleString(
+                          verifyContext.captureCount,
+                        )} capture${
+                          verifyContext.captureCount === 1 ? '' : 's'
+                        }`}
                     </Typography>
                   </Grid>
                   <Grid item>{imagePagination}</Grid>

diff --git a/src/context/VerifyContext.js b/src/context/VerifyContext.js
@@ -1,4 +1,4 @@
-import React, { useState, createContext } from 'react';
+import React, { useState, useEffect, createContext } from 'react';
 import api from '../api/treeTrackerApi';
 import FilterModel from '../models/Filter';
 import * as loglevel from 'loglevel';
@@ -60,6 +60,10 @@ export function VerifyProvider(props) {
   const [invalidateCaptureCount, setInvalidateCaptureCount] = useState(true);
   const [captureCount, setCaptureCount] = useState(null);
 
+  useEffect(() => {
+    if (invalidateCaptureCount) getCaptureCount();
+  }, [invalidateCaptureCount]);
+
   // STATE HELPER FUNCTIONS
 
   const appendCaptureImages = (images) => {