From 1c827e593a5c536b6cab1af168b5dcccf3f02058 Mon Sep 17 00:00:00 2001
From: Gwynn DP <gwynndp@gmail.com>
Date: Sat, 30 Oct 2021 10:23:46 -0700
Subject: [PATCH] fix: update CaptureImage to use the correct API

---
 .../CaptureMatching/CandidateImages.js        |  21 +--
 .../CaptureMatching/CaptureImage.js           | 141 ++++++++++--------
 ...atchingFrame.js => CaptureMatchingView.js} |  23 ++-
 src/components/CaptureMatching/Grower.js      |   8 +-
 src/context/AppContext.js                     |   4 +-
 5 files changed, 111 insertions(+), 86 deletions(-)
 rename src/components/CaptureMatching/{CaptureMatchingFrame.js => CaptureMatchingView.js} (89%)

diff --git a/src/components/CaptureMatching/CandidateImages.js b/src/components/CaptureMatching/CandidateImages.js
index 7e785bc0c..8f4f2d4f8 100644
--- a/src/components/CaptureMatching/CandidateImages.js
+++ b/src/components/CaptureMatching/CandidateImages.js
@@ -44,17 +44,15 @@ const useStyles = makeStyles({
   },
 });
 
-function CandidateImages(props) {
+function CandidateImages({ candidateImgData, sameTreeHandler }) {
   const classes = useStyles();
 
-  const cadidateImgData = props.cadidateImgData;
-
   const [showBox, setShowBox] = useState([]);
 
   useEffect(() => {
-    const initialCandidateData = cadidateImgData.map((tree) => tree.tree_id);
+    const initialCandidateData = candidateImgData.map((tree) => tree.tree_id);
     setShowBox(initialCandidateData);
-  }, [cadidateImgData]);
+  }, [candidateImgData]);
 
   const hideImgBox = (i) => {
     const newInitialState = showBox.filter((id) => id !== i);
@@ -67,7 +65,7 @@ function CandidateImages(props) {
 
   return (
     <Box className={classes.imageScroll}>
-      {cadidateImgData.map((tree, i) => {
+      {candidateImgData.map((tree, i) => {
         return (
           <Box className={classes.containerBox} key={tree.tree_id}>
             <Box className={classes.headerBox}>
@@ -98,14 +96,11 @@ function CandidateImages(props) {
                     {tree.captures.map((capture) => {
                       // console.log(tree.captures)
                       return (
-                        <Box
-                          style={{ height: '300px' }}
-                          key={capture.captureId}
-                        >
+                        <Box style={{ height: '300px' }} key={capture.id}>
                           <img
                             className={classes.imgContainer}
-                            src={capture.imageUrl}
-                            alt={`Candidate capture ${capture.captureId}`}
+                            src={capture.image_url}
+                            alt={`Candidate capture ${capture.id}`}
                           />
                         </Box>
                       );
@@ -119,7 +114,7 @@ function CandidateImages(props) {
                     variant="contained"
                     color="primary"
                     startIcon={<CheckIcon />}
-                    onClick={() => props.sameTreeHandler(tree.tree_id)}
+                    onClick={() => sameTreeHandler(tree.tree_id)}
                   >
                     Same Tree
                   </Button>
diff --git a/src/components/CaptureMatching/CaptureImage.js b/src/components/CaptureMatching/CaptureImage.js
index a75a0d6d6..197d3c70e 100644
--- a/src/components/CaptureMatching/CaptureImage.js
+++ b/src/components/CaptureMatching/CaptureImage.js
@@ -55,73 +55,96 @@ function CaptureImage(props) {
         captureImages={captureImages}
       />
 
-      {captureImages
-        .slice((currentPage - 1) * imgPerPage, currentPage * imgPerPage)
-        .map((capture) => {
-          return (
-            <Box
-              key={`capture_${capture.captureId}`}
-              className={classes.containerBox}
-            >
-              <Box className={classes.headerBox}>
-                <Grid
-                  container
-                  direction="row"
-                  justify="space-around"
-                  // alignItems="baseline"
-                >
-                  <Box style={{ marginTop: '15px' }}>
-                    <Typography
-                      variant="h5"
-                      style={{ width: '150px', wordWrap: 'break-word' }}
-                    >
-                      Capture {capture.captureId}
-                    </Typography>
-                    <Box display="flex">
-                      <AccessTimeIcon />
-                      <Typography variant="body1">
-                        {capture.createdAt}
+      {captureImages &&
+        captureImages
+          .slice((currentPage - 1) * imgPerPage, currentPage * imgPerPage)
+          .map((capture) => {
+            // console.log('captureImage', capture);
+            // age: null;
+            // attributes: null;
+            // created_at: '2021-05-04T11:24:43.000Z';
+            // device_identifier: null;
+            // gps_accuracy: null;
+            // id: 'c02a5ae6-3727-11ec-8d3d-0242ac130003';
+            // image_url: 'http://xxx';
+            // lat: '0';
+            // lon: '0';
+            // morphology: null;
+            // note: null;
+            // planter_id: '1';
+            // planter_photo_url: null;
+            // planter_username: 'x';
+            // reference_id: '1';
+            // status: 'approved';
+            // updated_at: '2021-05-04T11:24:43.000Z';
+            return (
+              <Box
+                key={`capture_${capture.id}`}
+                className={classes.containerBox}
+              >
+                <Box className={classes.headerBox}>
+                  <Grid
+                    container
+                    direction="row"
+                    justify="space-around"
+                    // alignItems="baseline"
+                  >
+                    <Box style={{ marginTop: '15px' }}>
+                      <Typography
+                        variant="h5"
+                        style={{ width: '150px', wordWrap: 'break-word' }}
+                      >
+                        Capture {capture.id}
                       </Typography>
-                    </Box>
+                      <Box display="flex">
+                        <AccessTimeIcon />
+                        <Typography variant="body1">
+                          {capture.created_at}
+                        </Typography>
+                      </Box>
 
-                    <Box display="flex">
-                      <LocationOnOutlinedIcon />
-                      <Typography variant="body1">USA</Typography>
+                      <Box display="flex">
+                        <LocationOnOutlinedIcon />
+                        <Typography variant="body1">USA</Typography>
+                      </Box>
+                      {/* <UseLocation/> */}
                     </Box>
-                    {/* <UseLoocation/> */}
-                  </Box>
 
-                  <Grower userPhotoUrl={capture.userPhotoUrl} />
+                    <Grower
+                      userPhotoUrl={capture.planter_photo_url}
+                      planter_username={capture.planter_username}
+                      status={capture.status}
+                    />
 
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    style={{
-                      height: '50px',
-                      width: '100px',
-                      marginTop: '10px',
-                    }}
-                    onClick={handleSkip}
-                  >
-                    Skip
-                    <SkipNextIcon />
-                  </Button>
-                </Grid>
-              </Box>
+                    <Button
+                      variant="outlined"
+                      color="primary"
+                      style={{
+                        height: '50px',
+                        width: '100px',
+                        marginTop: '10px',
+                      }}
+                      onClick={handleSkip}
+                    >
+                      Skip
+                      <SkipNextIcon />
+                    </Button>
+                  </Grid>
+                </Box>
 
-              <Box className={classes.imgBox}>
-                {/* {treeList.slice(0, 1).map( img => { */}
+                <Box className={classes.imgBox}>
+                  {/* {treeList.slice(0, 1).map( img => { */}
 
-                <img
-                  key={capture.captureId}
-                  className={classes.imgContainer}
-                  src={capture.imageUrl}
-                  alt={`Capture ${capture.captureId}`}
-                />
+                  <img
+                    key={capture.id}
+                    className={classes.imgContainer}
+                    src={capture.image_url}
+                    alt={`Capture ${capture.id}`}
+                  />
+                </Box>
               </Box>
-            </Box>
-          );
-        })}
+            );
+          })}
     </Box>
   );
 }
diff --git a/src/components/CaptureMatching/CaptureMatchingFrame.js b/src/components/CaptureMatching/CaptureMatchingView.js
similarity index 89%
rename from src/components/CaptureMatching/CaptureMatchingFrame.js
rename to src/components/CaptureMatching/CaptureMatchingView.js
index 4abe8e6e2..7963a882d 100644
--- a/src/components/CaptureMatching/CaptureMatchingFrame.js
+++ b/src/components/CaptureMatching/CaptureMatchingView.js
@@ -32,13 +32,13 @@ const useStyle = makeStyles({
 // Set API as a variable
 const CAPTURE_API = `${process.env.REACT_APP_TREETRACKER_API_ROOT}/captures`;
 
-function CaptureMachineFrame() {
+function CaptureMatchingView() {
   const classes = useStyle();
 
   const [captureImages, setCaptureImages] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
   const [loading, setLoading] = useState(false);
-  const [cadidateImgData, setCandidateImgData] = useState([]);
+  const [candidateImgData, setCandidateImgData] = useState([]);
 
   // for set how many pages we need in total for pagination
   const [noOfPages, setNoOfPages] = useState(null);
@@ -47,10 +47,11 @@ function CaptureMachineFrame() {
   const [imgCount, setImgCount] = useState(null);
 
   // To get total tree count on candidate capture image icon
-  const treesCount = cadidateImgData.length;
+  const treesCount = candidateImgData.length;
   const treeIcon = <NatureOutlinedIcon className={classes.candidateImgIcon} />;
 
   useEffect(() => {
+    console.log('loading candidate images');
     async function fetchCandidateTrees(captureId) {
       // TODO: handle errors and give user feedback
       setLoading(true);
@@ -59,13 +60,18 @@ function CaptureMachineFrame() {
           // Authorization: session.token,
         },
       }).then((res) => res.json());
+      console.log('candidates', data);
       setCandidateImgData(data.trees);
       setLoading(false);
     }
 
     setCandidateImgData([]);
 
-    if (currentPage > 0 && currentPage <= captureImages.length) {
+    if (
+      captureImages &&
+      currentPage > 0 &&
+      currentPage <= captureImages.length
+    ) {
       const captureId = captureImages[currentPage - 1].captureId;
       if (captureId) {
         fetchCandidateTrees(captureId);
@@ -74,6 +80,7 @@ function CaptureMachineFrame() {
   }, [currentPage, captureImages]);
 
   useEffect(() => {
+    console.log('loading captures');
     async function fetchCaptures() {
       // TODO: handle errors and give user feedback
       setLoading(true);
@@ -82,7 +89,8 @@ function CaptureMachineFrame() {
           // Authorization: session.token,
         },
       }).then((res) => res.json());
-      setCaptureImages(data.captures);
+      // console.log('setCaptureImages', data);
+      setCaptureImages(data);
       setLoading(false);
     }
     fetchCaptures();
@@ -162,9 +170,8 @@ function CaptureMachineFrame() {
               />
             </Box>
             <CandidateImages
-              cadidateImgData={cadidateImgData}
+              candidateImgData={candidateImgData}
               sameTreeHandler={sameTreeHandler}
-              captureImages={captureImages}
             />
           </Box>
         </Grid>
@@ -173,4 +180,4 @@ function CaptureMachineFrame() {
   );
 }
 
-export default CaptureMachineFrame;
+export default CaptureMatchingView;
diff --git a/src/components/CaptureMatching/Grower.js b/src/components/CaptureMatching/Grower.js
index 8ff8b2ebc..86faca29a 100644
--- a/src/components/CaptureMatching/Grower.js
+++ b/src/components/CaptureMatching/Grower.js
@@ -2,19 +2,19 @@ import React from 'react';
 
 import { Typography, Box } from '@material-ui/core';
 
-function Grower(props) {
+function Grower({ planter_photo_url, planter_username, status }) {
   return (
     <Box style={{ display: 'flex' }}>
       <img
-        src={props.userPhotoUrl}
+        src={planter_photo_url}
         alt=""
         style={{ borderRadius: '50%', width: '130px', height: '130px' }}
       />
       <Box style={{ margin: 'auto', paddingLeft: '10px' }}>
         <Typography variant="body1" style={{ display: 'block' }}>
-          Grower Name
+          {planter_username}
         </Typography>
-        <Typography variant="body1">grower status </Typography>
+        <Typography variant="body1">{status}</Typography>
       </Box>
     </Box>
   );
diff --git a/src/context/AppContext.js b/src/context/AppContext.js
index 3fc0f7653..bd22a4539 100644
--- a/src/context/AppContext.js
+++ b/src/context/AppContext.js
@@ -10,7 +10,7 @@ import Account from '../components/Account';
 import Home from '../components/Home/Home';
 import Users from '../components/Users';
 import SpeciesView from '../views/SpeciesView';
-import CaptureMatchingFrame from '../components/CaptureMatching/CaptureMatchingFrame';
+import CaptureMatchingView from '../components/CaptureMatching/CaptureMatchingView';
 import Unauthorized from '../components/Unauthorized';
 
 import IconSettings from '@material-ui/icons/Settings';
@@ -70,7 +70,7 @@ function getRoutes(user) {
     {
       name: 'Capture Matching',
       linkTo: '/capture-matching',
-      component: CaptureMatchingFrame,
+      component: CaptureMatchingView,
       icon: CompareIcon,
       disabled:
         process.env.REACT_APP_ENABLE_CAPTURE_MATCHING !== 'true' ||