Skip to content

Commit

Permalink
fix: api request for Capture Detail from Capture Match vs. other tools (
Browse files Browse the repository at this point in the history 
Greenstand#775)
  • Loading branch information
@gwynndp
gwynndp authored Aug 22, 2022
1 parent 5a0471d commit 64d47bc
Show file tree
Hide file tree
Showing 9 changed files with 172 additions and 117 deletions.
4 changes: 2 additions & 2 deletions src/api/treeTrackerApi.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ export default {
},
getCaptureById(id) {
try {
const query = `${TREETRACKER_API}/captures/${id}`;
const query = `${API_ROOT}/api/${getOrganization()}trees/${id}`;

return fetch(query, {
headers: {
Expand Down Expand Up @@ -463,7 +463,7 @@ export default {
try {
const query = `${API_ROOT}/api/${getOrganization()}organizations?filter[where][type]=O&filter[order]=name`;

console.log('GET ORGANIZATIONS -----', query);
log.debug('GET ORGANIZATIONS -----', query);

return fetch(query, {
method: 'GET',
Expand Down
158 changes: 97 additions & 61 deletions src/components/CaptureDetailDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ import CopyNotification from './common/CopyNotification';
import { CopyButton } from './common/CopyButton';
import { Link } from '@material-ui/core';
import Country from './common/Country';
import * as loglevel from 'loglevel';

const log = loglevel.getLogger('../context/CaptureDetailDialog');

const useStyles = makeStyles((theme) => ({
chipRoot: {
Expand Down Expand Up @@ -85,12 +88,11 @@ const useStyles = makeStyles((theme) => ({
}));

function CaptureDetailDialog(props) {
// console.log('render: capture detail dialog');
const { open, capture, onClose } = props;
const { open, captureId, onClose } = props;
const cdContext = useContext(CaptureDetailContext);
const [snackbarOpen, setSnackbarOpen] = useState(false);
const [snackbarLabel, setSnackbarLabel] = useState('');
const [renderCapture, setRenderCapture] = useState(capture);
const [renderCapture, setRenderCapture] = useState(null);
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
const [screenHeight, setScreenHeight] = useState(window.innerHeight);
const resizeWindow = useCallback(() => {
Expand All @@ -100,8 +102,11 @@ function CaptureDetailDialog(props) {
const classes = useStyles();

useEffect(() => {
cdContext.getCaptureDetail(capture?.id);
}, [capture]);
// prevent request because it will fail without a valid id
if (captureId) {
cdContext.getCaptureDetail(captureId);
}
}, [captureId]);

useEffect(() => {
window.addEventListener('resize', resizeWindow);
Expand All @@ -114,12 +119,38 @@ function CaptureDetailDialog(props) {
* Render the most complete capture detail we have
*/
useEffect(() => {
if (cdContext.capture) {
setRenderCapture(cdContext.capture);
} else {
setRenderCapture(capture);
const current = cdContext.capture;
if (current) {
// map the keys from legacy to new api keys
setRenderCapture({
status:
current.status ||
(current.active && current.approved
? 'approved'
: current.active && !current.approved
? 'pending'
: 'rejected'),
id: current.id || current.uuid,
reference_id: current.reference_id || current.id,
grower_account_id: current.grower_account_id || current.planterId,
wallet: current.wallet || current.planterIdentifier,
device_identifier:
current.device_identifier || current.deviceIdentifier,
image_url: current.image_url || current.imageUrl,
lat: current.lat || current.latitude,
lon: current.lon || current.longitude,
age: current.age,
captureApprovalTag: current.captureApprovalTag || null,
morphology: current.morphology || null,
note: current.note,
rejectionReason: current.rejectionReason || null,
species_id: current.species_id || current.speciesId,
token_id: current.token_id || current.tokenId,
created_at: current.created_at || current.timeCreated,
updated_at: current.updated_at || current.timeUpdated,
});
}
}, [cdContext.capture, capture]);
}, [cdContext.capture]);

function handleClose() {
setSnackbarOpen(false);
Expand All @@ -146,8 +177,8 @@ function CaptureDetailDialog(props) {
}

const countryInfo = useMemo(
() => <Country lat={capture?.latitude} lon={capture?.longitude} />,
[capture?.latitude, capture?.longitude]
() => <Country lat={capture?.lat} lon={capture?.lon} />,
[capture?.lat, capture?.lon]
);

return (
Expand All @@ -157,10 +188,11 @@ function CaptureDetailDialog(props) {
<Grid item>
<Box m={4}>
<Typography color="primary" variant="h6">
Capture <LinkToWebmap value={capture.id} type="tree" />
Capture{' '}
<LinkToWebmap value={capture.reference_id} type="tree" />
<CopyButton
label="Capture ID"
value={capture.id}
value={capture.reference_id}
confirmCopy={confirmCopy}
/>
</Typography>
Expand All @@ -184,8 +216,8 @@ function CaptureDetailDialog(props) {
link: true,
},
{
label: 'Grower Identifier',
value: capture.planterIdentifier,
label: 'Wallet',
value: capture.wallet,
copy: true,
},
{
Expand All @@ -194,10 +226,10 @@ function CaptureDetailDialog(props) {
copy: true,
},
{ label: 'Created', value: dateCreated.toLocaleString() },
{ label: 'Note', value: renderCapture?.note },
{ label: 'Note', value: capture?.note },
{
label: 'Original Image URL',
value: renderCapture?.image_url,
value: capture?.image_url,
copy: true,
link: true,
image: true,
Expand All @@ -210,7 +242,7 @@ function CaptureDetailDialog(props) {
// a link is either a GrowerID (item.image == false) or OriginalImage (item.image == true)
item.image ? (
<Link
href={renderCapture?.imageUrl}
href={capture?.image_url}
underline="always"
target="_blank"
>
Expand All @@ -235,7 +267,7 @@ function CaptureDetailDialog(props) {
<Grid>
<Typography variant="subtitle1">Country</Typography>
<Typography variant="body1">
{capture?.latitude && capture?.longitude && countryInfo}
{capture?.lat && capture?.lon && countryInfo}
</Typography>
</Grid>
</Grid>
Expand All @@ -244,12 +276,14 @@ function CaptureDetailDialog(props) {
<Typography className={classes.subtitle}>
Verification Status
</Typography>
{!capture.approved && capture.active ? (
{capture.status === 'pending' ? (
<Chip
label={verificationStates.AWAITING}
className={classes.awaitingChip}
/>
) : capture.active && capture.approved ? (
) : capture.status === 'approved' ||
capture.status === 'planted' ||
capture.status === 'active' ? (
<Chip
label={verificationStates.APPROVED}
className={classes.approvedChip}
Expand Down Expand Up @@ -290,11 +324,11 @@ function CaptureDetailDialog(props) {
<Grid item className={classes.box}>
<Typography className={classes.subtitle}>Capture Token</Typography>
<Typography variant="body1">
{getTokenStatus(capture.tokenId)}
{capture && capture.tokenId && (
{getTokenStatus(capture.token_id)}
{capture && capture.token_id && (
<CopyButton
label="Capture Token"
value={capture.tokenId}
value={capture.token_id}
confirmCopy={confirmCopy}
/>
)}
Expand All @@ -310,43 +344,45 @@ function CaptureDetailDialog(props) {
}

return (
<>
<Dialog
open={open}
onClose={handleClose}
style={{ width: screenWidth - 340 }}
BackdropProps={{
classes: {
root: classes.dialog,
},
}}
maxWidth="md"
>
<OptimizedImage
src={renderCapture?.image_url}
width={screenHeight * 0.9}
style={{ maxWidth: '100%' }}
objectFit="contain"
fixed
/>
</Dialog>
<Drawer
anchor="right"
open={open}
className={classes.drawer}
onClose={handleClose}
>
<Grid className={classes.root}>
<Grid container direction="column">
<Tags
capture={renderCapture}
species={cdContext.species}
captureTags={cdContext.tags}
/>
renderCapture && (
<>
<Dialog
open={open}
onClose={handleClose}
style={{ width: screenWidth - 340 }}
BackdropProps={{
classes: {
root: classes.dialog,
},
}}
maxWidth="md"
>
<OptimizedImage
src={renderCapture?.image_url}
width={screenHeight * 0.9}
style={{ maxWidth: '100%' }}
objectFit="contain"
fixed
/>
</Dialog>
<Drawer
anchor="right"
open={open}
className={classes.drawer}
onClose={handleClose}
>
<Grid className={classes.root}>
<Grid container direction="column">
<Tags
capture={renderCapture}
species={cdContext.species}
captureTags={cdContext.tags}
/>
</Grid>
</Grid>
</Grid>
</Drawer>
</>
</Drawer>
</>
)
);
}

Expand Down
21 changes: 12 additions & 9 deletions src/components/CaptureMatching/CaptureMatchingView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,7 +317,7 @@ function CaptureMatchingView() {
abortController,
filterParameters
);
// log.debug('fetchCptures data', currentPage, data);
// log.debug('fetchCaptures data', currentPage, data);
if (data?.captures?.length > 0) {
setCaptureImage(data.captures[0]);
setNoOfPages(data.count);
Expand Down Expand Up @@ -564,9 +564,10 @@ function CaptureMatchingView() {
className={classes.captureImageHeaderBox}
>
<Box className={classes.box2}>
<Tooltip title={captureImage.id} interactive>
<Tooltip title={captureImage.reference_id} interactive>
<Typography variant="h5">
Capture {(captureImage.id + '').substring(0, 10) + '...'}
Capture{' '}
{(captureImage.reference_id + '').substring(0, 10) + '...'}
</Typography>
</Tooltip>
<Box className={classes.captureImageCaptureInfo}>
Expand Down Expand Up @@ -643,7 +644,7 @@ function CaptureMatchingView() {
key={captureImage.id}
className={classes.captureImageImgContainer}
src={captureImage.image_url}
alt={`Capture ${captureImage.id}`}
alt={`Capture ${captureImage.reference_id}`}
objectFit="contain"
width={screenWidth * 0.5}
fixed
Expand Down Expand Up @@ -827,11 +828,13 @@ function CaptureMatchingView() {
</Grid>
</Drawer>
<CaptureDetailProvider>
<CaptureDetailDialog
open={isDetailsPaneOpen}
capture={captureImage}
onClose={closeDrawer}
/>
{isDetailsPaneOpen && (
<CaptureDetailDialog
open={isDetailsPaneOpen}
captureId={captureImage?.reference_id}
onClose={closeDrawer}
/>
)}
</CaptureDetailProvider>
<GrowerProvider>
<GrowerDetail
Expand Down
28 changes: 18 additions & 10 deletions src/components/Captures/CaptureTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,19 +112,20 @@ const CaptureTable = () => {
order,
orderBy,
captures,
capture,
captureCount,
isLoading,
setPage,
setRowsPerPage,
setOrder,
setOrderBy,
setCapture,
getCaptureAsync,
} = useContext(CapturesContext);
const speciesContext = useContext(SpeciesContext);
const tagsContext = useContext(TagsContext);
const [isDetailsPaneOpen, setIsDetailsPaneOpen] = useState(false);
const [captureDetail, setCaptureDetail] = useState({
id: null,
isDetailsPaneOpen: false,
onClose: closeDrawer,
});
const [speciesLookup, setSpeciesLookup] = useState({});
const [tagLookup, setTagLookup] = useState({});
const [captureTagLookup, setCaptureTagLookup] = useState({});
Expand Down Expand Up @@ -182,8 +183,11 @@ const CaptureTable = () => {
};

const toggleDrawer = (id) => {
getCaptureAsync(id);
setIsDetailsPaneOpen(!isDetailsPaneOpen);
setCaptureDetail({
...captureDetail,
id,
isDetailsPaneOpen: true,
});
};

const createToggleDrawerHandler = (id) => {
Expand All @@ -193,9 +197,13 @@ const CaptureTable = () => {
};

const closeDrawer = () => {
setIsDetailsPaneOpen(false);
setDisableHoverListener(false);
setCapture({});

setCaptureDetail({
...captureDetail,
id: null,
isDetailsPaneOpen: false,
});
};

const handleOpenExport = () => {
Expand Down Expand Up @@ -348,8 +356,8 @@ const CaptureTable = () => {
{tablePagination()}
<CaptureDetailProvider>
<CaptureDetailDialog
open={isDetailsPaneOpen}
capture={capture}
open={captureDetail.isDetailsPaneOpen}
captureId={captureDetail.id}
onClose={closeDrawer}
/>
</CaptureDetailProvider>
Expand Down
Loading

0 comments on commit 64d47bc

Please sign in to comment.