feat: Limit capture-match tool to one un-matched capture at a time (G…

…reenstand#339) * feat: limit capture-match request to one capture at a time * fix: sameTreeHandler to work with one capture and fix update request * feat: loading AppBar, move api functions to treetrackerApi file
gwynndp · Feb 3, 2022 · 15417d4 · 15417d4
1 parent 355e8ab
commit 15417d4
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 137 deletions.
diff --git a/.env.development b/.env.development
@@ -1,13 +1,12 @@
 REACT_APP_WEBMAP_DOMAIN=http://dev.treetracker.org
 REACT_APP_API_ROOT=https://dev-k8s.treetracker.org/api/admin
+REACT_APP_EARNINGS_ROOT=https://dev-k8s.treetracker.org/earnings
 REACT_APP_MESSAGING_ROOT=https://dev-k8s.treetracker.org/messaging
+REACT_APP_QUERY_API_ROOT=https://dev-k8s.treetracker.org/query
+REACT_APP_REPORTING_API_ROOT=https://dev-k8s.treetracker.org/reporting
 REACT_APP_TREETRACKER_API_ROOT=https://dev-k8s.treetracker.org/treetracker
 REACT_APP_ENABLE_CAPTURE_MATCHING=true
-REACT_APP_REPORTING_API_ROOT=https://dev-k8s.treetracker.org/reporting
-REACT_APP_REPORTING_ENABLED=true
 REACT_APP_ENABLE_EARNINGS=true
 REACT_APP_ENABLE_PAYMENTS=true
 REACT_APP_ENABLE_MESSAGING=true
-REACT_APP_API_URL=https://dev-k8s.treetracker.org
-REACT_APP_EARNINGS_API_MAPPING=/earnings
-REACT_APP_QUERY_API_ROOT=https://dev-k8s.treetracker.org/query
+REACT_APP_REPORTING_ENABLED=true
diff --git a/src/api/apiUtils.js b/src/api/apiUtils.js
@@ -25,9 +25,10 @@ export function handleError(error) {
 
 // used for limiting organization access, NOT filtering by org/sub-orgs
 export function getOrganization() {
-  if (session.user?.policy?.organization?.id) {
-    return `organization/${session.user?.policy?.organization?.id}/`;
-  } else {
-    return '';
-  }
+  const orgId = getOrganizationId();
+  return orgId ? `organization/${orgId}/` : '';
+}
+
+export function getOrganizationId() {
+  return session.user?.policy?.organization?.id || null;
 }
diff --git a/src/api/earnings.js b/src/api/earnings.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { session } from '../models/auth';
 
-const apiUrl = `${process.env.REACT_APP_API_URL}${process.env.REACT_APP_EARNINGS_API_MAPPING}`;
+const apiUrl = `${process.env.REACT_APP_EARNINGS_ROOT}`;
 const Axios = axios.create({ baseURL: apiUrl });
 
 export default {

diff --git a/src/api/treeTrackerApi.js b/src/api/treeTrackerApi.js
@@ -1,6 +1,9 @@
 import { handleResponse, handleError, getOrganization } from './apiUtils';
 import { session } from '../models/auth';
 
+// Set API as a variable
+const CAPTURE_MATCH_API = `${process.env.REACT_APP_TREETRACKER_API_ROOT}`;
+
 const CAPTURE_FIELDS = {
   uuid: true,
   imageUrl: true,
@@ -58,7 +61,6 @@ export default {
       .then(handleResponse)
       .catch(handleError);
   },
-
   approveCaptureImage(id, morphology, age, captureApprovalTag, speciesId) {
     const query = `${
       process.env.REACT_APP_API_ROOT
@@ -121,6 +123,30 @@ export default {
       .then(handleResponse)
       .catch(handleError);
   },
+  fetchCapturesToMatch(currentPage, abortController) {
+    return fetch(
+      `${CAPTURE_MATCH_API}/captures?limit=${1}&offset=${currentPage - 1}`,
+      {
+        headers: {
+          Authorization: session.token,
+        },
+        signal: abortController?.signal,
+      }
+    )
+      .then(handleResponse)
+      .catch(handleError);
+  },
+  fetchCandidateTrees(captureId, abortController) {
+    const query = `${CAPTURE_MATCH_API}/trees/potential_matches?capture_id=${captureId}`;
+    return fetch(query, {
+      headers: {
+        Authorization: session.token,
+      },
+      signal: abortController?.signal,
+    })
+      .then(handleResponse)
+      .catch(handleError);
+  },
   getCaptureById(id) {
     const query = `${
       process.env.REACT_APP_API_ROOT
@@ -332,7 +358,7 @@ export default {
   /*
    * create new tree tags
    */
-  async createCaptureTags(captureId, tags) {
+  createCaptureTags(captureId, tags) {
     return tags.map((t) => {
       const query = `${process.env.REACT_APP_API_ROOT}/api/tree_tags`;
       return fetch(query, {

diff --git a/src/components/CaptureMatching/CaptureImage.js b/src/components/CaptureMatching/CaptureImage.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 import CaptureHeader from './CaptureHeader';
 import Grower from './Grower';
@@ -11,12 +11,12 @@ import { makeStyles } from '@material-ui/core/styles';
 import { getDateTimeStringLocale } from 'common/locale';
 
 function Country({ lat, lon }) {
-  const [content, setContent] = React.useState('');
+  const [content, setContent] = useState('');
   if (lat === 'undefined' || lon === 'undefined') {
     setContent('No data');
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     setContent('loading...');
     fetch(
       `${process.env.REACT_APP_QUERY_API_ROOT}/countries?lat=${lat}&lon=${lon}`
@@ -35,10 +35,6 @@ function Country({ lat, lon }) {
       .then((data) => {
         setContent(data.countries[0].name);
       });
-    // .catch(err => {
-    //   console.error('e:', err);
-    //   setContent('Unknown error');
-    // });
   }, []);
 
   return <span>{content}</span>;
@@ -98,7 +94,6 @@ function CaptureImage(props) {
     currentPage,
     noOfPages,
     handleChange,
-    imgPerPage,
     imgCount,
     handleSkip,
   } = props;
@@ -119,68 +114,64 @@ function CaptureImage(props) {
       <Box height={16} />
 
       {captureImages &&
-        captureImages
-          .slice((currentPage - 1) * imgPerPage, currentPage * imgPerPage)
-          .map((capture) => {
-            return (
-              <Paper
-                elevation={4}
-                key={`capture_${capture.id}`}
-                className={classes.containerBox}
-              >
-                <Box className={classes.headerBox}>
-                  <Box className={classes.box2}>
-                    <Tooltip title={capture.id}>
-                      <Typography variant="h5">
-                        Capture {(capture.id + '').substring(0, 10) + '...'}
-                      </Typography>
-                    </Tooltip>
-                    <Box className={classes.box3}>
-                      <AccessTimeIcon />
-                      <Typography variant="body1">
-                        {getDateTimeStringLocale(capture.created_at)}
-                      </Typography>
-                    </Box>
-
-                    <Box className={classes.box3}>
-                      <LocationOnOutlinedIcon />
-                      <Typography variant="body1">
-                        <Country lat={capture.lat} lon={capture.lon} />
-                      </Typography>
-                    </Box>
-                    {/* <UseLocation/> */}
+        captureImages.map((capture) => {
+          return (
+            <Paper
+              elevation={4}
+              key={`capture_${capture.id}`}
+              className={classes.containerBox}
+            >
+              <Box className={classes.headerBox}>
+                <Box className={classes.box2}>
+                  <Tooltip title={capture.id}>
+                    <Typography variant="h5">
+                      Capture {(capture.id + '').substring(0, 10) + '...'}
+                    </Typography>
+                  </Tooltip>
+                  <Box className={classes.box3}>
+                    <AccessTimeIcon />
+                    <Typography variant="body1">
+                      {getDateTimeStringLocale(capture.created_at)}
+                    </Typography>
                   </Box>
 
-                  <Grower
-                    planter_photo_url={capture.planter_photo_url}
-                    planter_username={capture.planter_username}
-                    status={capture.status}
-                  />
-
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    onClick={handleSkip}
-                    className={classes.button}
-                  >
-                    Skip
-                    <SkipNextIcon />
-                  </Button>
+                  <Box className={classes.box3}>
+                    <LocationOnOutlinedIcon />
+                    <Typography variant="body1">
+                      <Country lat={capture.lat} lon={capture.lon} />
+                    </Typography>
+                  </Box>
+                  {/* <UseLocation/> */}
                 </Box>
 
-                <Box className={classes.imgBox}>
-                  {/* {treeList.slice(0, 1).map( img => { */}
-
-                  <img
-                    key={capture.id}
-                    className={classes.imgContainer}
-                    src={capture.image_url}
-                    alt={`Capture ${capture.id}`}
-                  />
-                </Box>
-              </Paper>
-            );
-          })}
+                <Grower
+                  planter_photo_url={capture.planter_photo_url}
+                  planter_username={capture.planter_username}
+                  status={capture.status}
+                />
+
+                <Button
+                  variant="outlined"
+                  color="primary"
+                  onClick={handleSkip}
+                  className={classes.button}
+                >
+                  Skip
+                  <SkipNextIcon />
+                </Button>
+              </Box>
+
+              <Box className={classes.imgBox}>
+                <img
+                  key={capture.id}
+                  className={classes.imgContainer}
+                  src={capture.image_url}
+                  alt={`Capture ${capture.id}`}
+                />
+              </Box>
+            </Paper>
+          );
+        })}
     </Box>
   );
 }