fix(capture-match): display candidate images and reduce # of vertical…

… scroll containers:
nmcharlton · Dec 2, 2021 · 09b88ca · 09b88ca
1 parent 1c827e5
commit 09b88ca
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 24 deletions.
diff --git a/src/components/CaptureMatching/CandidateImages.js b/src/components/CaptureMatching/CandidateImages.js
@@ -9,7 +9,10 @@ import theme from '../common/theme';
 
 const useStyles = makeStyles({
   containerBox: {
-    margin: theme.spacing(5),
+    marginTop: 0,
+    marginRight: theme.spacing(5),
+    marginBottom: theme.spacing(5),
+    marginLeft: theme.spacing(5),
     paddingBottom: theme.spacing(2),
     background: '#fff',
     borderRadius: '4px',
@@ -20,8 +23,7 @@ const useStyles = makeStyles({
   },
 
   imgContainer: {
-    width: '350px',
-    height: 'auto',
+    height: '100%',
     padding: '5px',
     objectFit: 'cover',
     paddingBottom: '10px',
@@ -32,10 +34,11 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'row',
     overflowX: 'auto',
+    overflowY: 'hidden',
   },
 
   imageScroll: {
-    height: '100vh',
+    height: '76vh',
     overflow: 'scroll',
   },
 
@@ -63,11 +66,15 @@ function CandidateImages({ candidateImgData, sameTreeHandler }) {
     setShowBox([...showBox, i]);
   };
 
+  console.log('candidates', candidateImgData);
+  console.log('showBox', showBox);
+  console.log('candidateImgData[0].captures', candidateImgData[0].captures);
+
   return (
     <Box className={classes.imageScroll}>
       {candidateImgData.map((tree, i) => {
         return (
-          <Box className={classes.containerBox} key={tree.tree_id}>
+          <Box className={classes.containerBox} key={`${i}-${tree.tree_id}`}>
             <Box className={classes.headerBox}>
               <Grid
                 container
@@ -94,7 +101,6 @@ function CandidateImages({ candidateImgData, sameTreeHandler }) {
                 {typeof tree.captures === 'object' ? (
                   <Box className={classes.gridList} cols={3}>
                     {tree.captures.map((capture) => {
-                      // console.log(tree.captures)
                       return (
                         <Box style={{ height: '300px' }} key={capture.id}>
                           <img

diff --git a/src/components/CaptureMatching/CaptureImage.js b/src/components/CaptureMatching/CaptureImage.js
@@ -25,7 +25,7 @@ const useStyles = makeStyles({
 
   imgContainer: {
     width: '100%',
-    height: 'auto',
+    height: '51vh',
     objectFit: 'cover',
     marginTop: '20px',
   },

diff --git a/src/components/CaptureMatching/CaptureMatchingView.js b/src/components/CaptureMatching/CaptureMatchingView.js
@@ -25,7 +25,7 @@ const useStyle = makeStyles({
   },
 
   candidateIconBox: {
-    marginLeft: theme.spacing(5),
+    margin: theme.spacing(5),
   },
 });
 
@@ -39,29 +39,26 @@ function CaptureMatchingView() {
   const [currentPage, setCurrentPage] = useState(1);
   const [loading, setLoading] = useState(false);
   const [candidateImgData, setCandidateImgData] = useState([]);
-
-  // for set how many pages we need in total for pagination
-  const [noOfPages, setNoOfPages] = useState(null);
-
-  // for get the total imag count for header Icon
-  const [imgCount, setImgCount] = useState(null);
-
+  const [noOfPages, setNoOfPages] = useState(null); //for pagination
+  const [imgCount, setImgCount] = useState(null); //for header icon
+  const [treesCount, setTreesCount] = useState(0);
   // To get total tree count on candidate capture image icon
-  const treesCount = candidateImgData.length;
+  // const treesCount = candidateImgData.length;
   const treeIcon = <NatureOutlinedIcon className={classes.candidateImgIcon} />;
 
   useEffect(() => {
     console.log('loading candidate images');
     async function fetchCandidateTrees(captureId) {
+      console.log('fetchCandidateTrees()');
       // TODO: handle errors and give user feedback
       setLoading(true);
       const data = await fetch(`${CAPTURE_API}/${captureId}/potential_trees`, {
         headers: {
           // Authorization: session.token,
         },
       }).then((res) => res.json());
-      console.log('candidates', data);
-      setCandidateImgData(data.trees);
+      setCandidateImgData(data);
+      setTreesCount(data.length);
       setLoading(false);
     }
 
@@ -72,7 +69,8 @@ function CaptureMatchingView() {
       currentPage > 0 &&
       currentPage <= captureImages.length
     ) {
-      const captureId = captureImages[currentPage - 1].captureId;
+      const captureId = captureImages[currentPage - 1].id;
+      console.log('captureId', captureId);
       if (captureId) {
         fetchCandidateTrees(captureId);
       }
@@ -89,7 +87,6 @@ function CaptureMatchingView() {
           // Authorization: session.token,
         },
       }).then((res) => res.json());
-      // console.log('setCaptureImages', data);
       setCaptureImages(data);
       setLoading(false);
     }
@@ -115,7 +112,7 @@ function CaptureMatchingView() {
   // Same Tree Capture function
   const sameTreeHandler = (treeId) => {
     // TODO: handle errors and give user feedback
-    const captureId = captureImages[currentPage - 1].captureId;
+    const captureId = captureImages[currentPage - 1].id;
     fetch(`${CAPTURE_API}/${captureId}`, {
       method: 'PATCH',
       headers: {
@@ -145,7 +142,11 @@ function CaptureMatchingView() {
   }, []);
 
   return (
-    <>
+    <Grid
+      container
+      direction="column"
+      style={{ flexWrap: 'nowrap', height: '100%', overflow: 'hidden' }}
+    >
       <Navbar />
       <Box className={classes.container}>
         <Grid container direction="row">
@@ -162,7 +163,7 @@ function CaptureMatchingView() {
           />
 
           <Box style={{ width: '50%' }}>
-            <Box p={2} className={classes.candidateIconBox}>
+            <Box className={classes.candidateIconBox}>
               <CurrentCaptureNumber
                 text={`Candidate Match${treesCount !== 1 && 'es'}`}
                 treeIcon={treeIcon}
@@ -176,7 +177,7 @@ function CaptureMatchingView() {
           </Box>
         </Grid>
       </Box>
-    </>
+    </Grid>
   );
 }