Skip to content

Commit

Permalink
fix: update CaptureImage to use the correct API
Browse files Browse the repository at this point in the history
  • Loading branch information
@gwynndp
gwynndp committed Dec 2, 2021
1 parent 3a8198e commit 1c827e5
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 86 deletions.
21 changes: 8 additions & 13 deletions src/components/CaptureMatching/CandidateImages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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}>
Expand Down Expand Up @@ -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>
);
Expand All @@ -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>
Expand Down
141 changes: 82 additions & 59 deletions src/components/CaptureMatching/CaptureImage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
23 changes: 15 additions & 8 deletions ...s/CaptureMatching/CaptureMatchingFrame.js → ...ts/CaptureMatching/CaptureMatchingView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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();
Expand Down Expand Up @@ -162,9 +170,8 @@ function CaptureMachineFrame() {
/>
</Box>
<CandidateImages
cadidateImgData={cadidateImgData}
candidateImgData={candidateImgData}
sameTreeHandler={sameTreeHandler}
captureImages={captureImages}
/>
</Box>
</Grid>
Expand All @@ -173,4 +180,4 @@ function CaptureMachineFrame() {
);
}

export default CaptureMachineFrame;
export default CaptureMatchingView;
8 changes: 4 additions & 4 deletions src/components/CaptureMatching/Grower.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions src/context/AppContext.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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' ||
Expand Down

0 comments on commit 1c827e5

Please sign in to comment.