fix: display Full Capture Details in Verify and Captures pages (#228)

* fix: display species and other tags in capture details in Verify and Captures pages * fix: restore species/tags to capture detail dialog Co-authored-by: Nick Charlton <[email protected]>
Greenstand · Dec 15, 2021 · 705fb2d · 705fb2d
1 parent ab8646b
commit 705fb2d
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 50 deletions.
diff --git a/src/api/treeTrackerApi.js b/src/api/treeTrackerApi.js
@@ -1,6 +1,28 @@
 import { handleResponse, handleError, getOrganization } from './apiUtils';
 import { session } from '../models/auth';
 
+const CAPTURE_FIELDS = {
+  uuid: true,
+  imageUrl: true,
+  lat: true,
+  lon: true,
+  id: true,
+  timeCreated: true,
+  timeUpdated: true,
+  active: true,
+  approved: true,
+  planterId: true,
+  deviceIdentifier: true,
+  planterIdentifier: true,
+  speciesId: true,
+  tokenId: true,
+  morphology: true,
+  age: true,
+  captureApprovalTag: true,
+  rejectionReason: true,
+  note: true,
+};
+
 export default {
   getCaptureImages(
     {
@@ -20,20 +42,7 @@ export default {
       order: [`${orderBy} ${order}`],
       limit: rowsPerPage,
       skip,
-      fields: {
-        uuid: true,
-        imageUrl: true,
-        lat: true,
-        lon: true,
-        id: true,
-        timeCreated: true,
-        timeUpdated: true,
-        active: true,
-        approved: true,
-        planterId: true,
-        deviceIdentifier: true,
-        planterIdentifier: true,
-      },
+      fields: CAPTURE_FIELDS,
     };
 
     const query = `${

diff --git a/src/components/CaptureDetailDialog.js b/src/components/CaptureDetailDialog.js
@@ -93,13 +93,15 @@ function CaptureDetailDialog(props) {
   const classes = useStyles();
 
   useEffect(() => {
-    cdContext.getCaptureDetail(capture.id);
+    cdContext.getCaptureDetail(capture?.id);
+  }, [capture]);
 
+  useEffect(() => {
     window.addEventListener('resize', resizeWindow);
     return () => {
       window.removeEventListener('resize', resizeWindow);
     };
-  }, [capture, resizeWindow]);
+  }, [resizeWindow]);
 
   /*
    * Render the most complete capture detail we have

diff --git a/src/components/Captures/CaptureTable.js b/src/components/Captures/CaptureTable.js
@@ -21,6 +21,7 @@ import CaptureDetailDialog from '../CaptureDetailDialog';
 import { tokenizationStates } from '../../common/variables';
 import useStyle from './CaptureTable.styles.js';
 import ExportCaptures from 'components/ExportCaptures';
+import { CaptureDetailProvider } from '../../context/CaptureDetailContext';
 
 const columns = [
   {
@@ -221,11 +222,13 @@ const CaptureTable = () => {
         </TableBody>
       </Table>
       {tablePagination()}
-      <CaptureDetailDialog
-        open={isDetailsPaneOpen}
-        capture={capture}
-        onClose={closeDrawer}
-      />
+      <CaptureDetailProvider>
+        <CaptureDetailDialog
+          open={isDetailsPaneOpen}
+          capture={capture}
+          onClose={closeDrawer}
+        />
+      </CaptureDetailProvider>
     </Grid>
   );
 };

diff --git a/src/components/Verify.js b/src/components/Verify.js
@@ -34,6 +34,7 @@ import { countToLocaleString } from '../common/numbers';
 import { VerifyContext } from '../context/VerifyContext';
 import { SpeciesContext } from '../context/SpeciesContext';
 import { TagsContext } from '../context/TagsContext';
+import { CaptureDetailProvider } from '../context/CaptureDetailContext';
 
 const log = require('loglevel').getLogger('../components/Verify');
 
@@ -541,11 +542,13 @@ const Verify = (props) => {
         growerId={growerDetail.growerId}
         onClose={() => handleCloseGrowerDetail()}
       />
-      <CaptureDetailDialog
-        open={captureDetail.isOpen}
-        onClose={() => handleCloseCaptureDetail()}
-        capture={captureDetail.capture}
-      />
+      <CaptureDetailProvider>
+        <CaptureDetailDialog
+          open={captureDetail.isOpen}
+          onClose={() => handleCloseCaptureDetail()}
+          capture={captureDetail.capture}
+        />
+      </CaptureDetailProvider>
     </>
   );
 };

diff --git a/src/components/tests/captureDetail.test.js b/src/components/tests/captureDetail.test.js
@@ -21,15 +21,15 @@ describe('captureDetail', () => {
     //mock the api
     api = require('../../api/treeTrackerApi').default;
 
-    api.getCaptureById = (id) => {
+    api.getCaptureById = (_id) => {
       log.debug('mock getCaptureById:');
       return Promise.resolve(CAPTURE);
     };
-    api.getSpeciesById = (id) => {
+    api.getSpeciesById = (_id) => {
       log.debug('mock getSpeciesById');
-      return Promise.resolve(SPECIES);
+      return Promise.resolve(SPECIES[0]);
     };
-    api.getTagById = (id) => {
+    api.getTagById = (_id) => {
       log.debug('mock getTagById');
       return Promise.resolve(TAG);
     };
@@ -42,7 +42,6 @@ describe('captureDetail', () => {
         species: null,
         tags: [],
         getCaptureDetail: () => {},
-        getCapture: () => {},
         getSpecies: () => {},
         getTags: () => {},
         reset: () => {},

diff --git a/src/components/tests/verify.test.js b/src/components/tests/verify.test.js
@@ -70,30 +70,38 @@ describe('Verify', () => {
   // mock the treeTrackerApi
   captureApi = require('../../api/treeTrackerApi').default;
 
-  captureApi.getCaptureImages = (id) => {
+  captureApi.getCaptureImages = () => {
     log.debug('mock getCaptureImages:');
     return Promise.resolve(CAPTURES);
   };
-  captureApi.getCaptureCount = (id) => {
+  captureApi.getCaptureCount = () => {
     log.debug('mock getCaptureCount:');
     return Promise.resolve({ count: 4 });
   };
-  captureApi.getCaptureById = (id) => {
+  captureApi.getCaptureById = (_id) => {
     log.debug('mock getCaptureById:');
     return Promise.resolve(CAPTURE);
   };
   captureApi.getSpecies = () => {
-    log.debug('mock getSpeciesById:');
+    log.debug('mock getSpecies:');
     return Promise.resolve(SPECIES);
   };
+  captureApi.getSpeciesById = (_id) => {
+    log.debug('mock getSpeciesById:');
+    return Promise.resolve(SPECIES[0]);
+  };
   captureApi.getCaptureCountPerSpecies = () => {
     log.debug('mock getCaptureCountPerSpecies:');
     return Promise.resolve({ count: 7 });
   };
-  captureApi.getTags = (id) => {
-    log.debug('mock getTagById:');
+  captureApi.getTags = () => {
+    log.debug('mock getTags:');
     return Promise.resolve(TAGS);
   };
+  captureApi.getTagById = (_id) => {
+    log.debug('mock getTagById:');
+    return Promise.resolve(TAG);
+  };
   captureApi.getOrganizations = () => {
     log.debug('mock getOrganizations:');
     return Promise.resolve(ORGS);

diff --git a/src/context/CaptureDetailContext.js b/src/context/CaptureDetailContext.js
@@ -1,4 +1,4 @@
-import React, { useState, createContext } from 'react';
+import React, { useState, createContext, useEffect } from 'react';
 import api from '../api/treeTrackerApi';
 import * as loglevel from 'loglevel';
 
@@ -9,7 +9,6 @@ export const CaptureDetailContext = createContext({
   species: null,
   tags: [],
   getCaptureDetail: () => {},
-  getCapture: () => {},
   getSpecies: () => {},
   getTags: () => {},
   reset: () => {},
@@ -24,6 +23,11 @@ const STATE_EMPTY = {
 export function CaptureDetailProvider(props) {
   const [state, setState] = useState(STATE_EMPTY);
 
+  useEffect(() => {
+    getSpecies(state.capture?.speciesId);
+    getTags(state.capture?.treeTags);
+  }, [state.capture]);
+
   // STATE HELPER FUNCTIONS
 
   function reset() {
@@ -33,22 +37,14 @@ export function CaptureDetailProvider(props) {
   // EVENT HANDLERS
 
   const getCaptureDetail = async (id) => {
-    reset();
-
-    return getCapture(id).then((capture) => {
-      getSpecies(capture && capture.speciesId);
-      getTags(capture && capture.treeTags);
-    });
-  };
-
-  const getCapture = async (id) => {
     if (id == null) {
       log.debug('getCapture called with no id');
       return Promise.resolve(STATE_EMPTY.capture);
     }
 
     return api.getCaptureById(id).then((capture) => {
       setState({ ...state, capture });
+      return capture;
     });
   };
 
@@ -59,6 +55,7 @@ export function CaptureDetailProvider(props) {
 
     return api.getSpeciesById(speciesId).then((species) => {
       setState({ ...state, species });
+      return species;
     });
   };
 
@@ -67,12 +64,13 @@ export function CaptureDetailProvider(props) {
       return Promise.resolve(STATE_EMPTY.tags);
     }
 
-    Promise.all(
+    return Promise.all(
       captureTags.map((tag) => {
         return api.getTagById(tag.tagId);
       }),
     ).then((tags) => {
       setState({ ...state, tags });
+      return tags;
     });
   };
 
@@ -81,7 +79,6 @@ export function CaptureDetailProvider(props) {
     species: state.species,
     tags: state.tags,
     getCaptureDetail,
-    getCapture,
     getSpecies,
     getTags,
     reset,