From cb792f7df848b48ef898164b0efd1d7730b4c885 Mon Sep 17 00:00:00 2001
From: Luisa Vasquez <luna.v97@gmail.com>
Date: Wed, 5 May 2021 17:34:30 -0400
Subject: [PATCH] feat: planter and tree ids link to webmap (#79)

* feat: planter and tree ids link to webmap

* Update Planters.js
---
 src/components/PlanterDetail.js       |  5 ++++-
 src/components/Planters.js            |  5 ++++-
 src/components/TreeDetailDialog.js    | 16 +++++++++++++---
 src/components/TreeTable.js           | 13 ++++++++++++-
 src/components/common/LinkToWebmap.js | 26 ++++++++++++++++++++++++++
 5 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 src/components/common/LinkToWebmap.js

diff --git a/src/components/PlanterDetail.js b/src/components/PlanterDetail.js
index bbe664924..ef583ef92 100644
--- a/src/components/PlanterDetail.js
+++ b/src/components/PlanterDetail.js
@@ -18,6 +18,7 @@ import { hasPermission, POLICIES } from '../models/auth';
 import { AppContext } from './Context';
 import EditPlanter from './EditPlanter';
 import OptimizedImage from './OptimizedImage';
+import LinkToWebmap from './common/LinkToWebmap';
 
 const useStyle = makeStyles((theme) => ({
   root: {
@@ -158,7 +159,9 @@ const PlanterDetail = (props) => {
               <Typography variant="h5" color="primary" className={classes.name}>
                 {planter.firstName} {planter.lastName}
               </Typography>
-              <Typography variant="body2">ID:{planter.id}</Typography>
+              <Typography variant="body2">
+                ID: <LinkToWebmap value={planter.id} type="user" />
+              </Typography>
             </Grid>
             <Divider />
             <Grid container direction="column" className={classes.box}>
diff --git a/src/components/Planters.js b/src/components/Planters.js
index 7bd130283..10bb14a91 100644
--- a/src/components/Planters.js
+++ b/src/components/Planters.js
@@ -22,6 +22,7 @@ import Person from '@material-ui/icons/Person';
 import Navbar from './Navbar';
 import PlanterDetail from './PlanterDetail';
 import OptimizedImage from './OptimizedImage';
+import LinkToWebmap from './common/LinkToWebmap';
 
 const log = require('loglevel').getLogger('../components/Planters');
 
@@ -323,7 +324,9 @@ function Planter(props) {
               <Typography className={classes.name}>
                 {planter.firstName} {planter.lastName}
               </Typography>
-              <Typography>ID: {planter.id}</Typography>
+              <Typography>
+                ID: <LinkToWebmap value={planter.id} type="user" />
+              </Typography>
               {planter.organization && (
                 <Typography>Organization: {planter.organization}</Typography>
               )}
diff --git a/src/components/TreeDetailDialog.js b/src/components/TreeDetailDialog.js
index 06b726cc2..1951f89e7 100644
--- a/src/components/TreeDetailDialog.js
+++ b/src/components/TreeDetailDialog.js
@@ -18,6 +18,7 @@ import Snackbar from '@material-ui/core/Snackbar';
 import FileCopy from '@material-ui/icons/FileCopy';
 import CloseIcon from '@material-ui/icons/Close';
 import OptimizedImage from './OptimizedImage';
+import LinkToWebmap from './common/LinkToWebmap';
 
 const useStyles = makeStyles((theme) => ({
   chipRoot: {
@@ -110,13 +111,18 @@ function TreeDetailDialog(props) {
       <Grid item container direction="column" spacing={4}>
         <Grid item>
           <Typography color="primary" variant="h6">
-            {`Tree ${tree.id}`}
+            Tree <LinkToWebmap value={tree.id} type="tree" />
             <CopyButton label="Tree ID" value={tree.id} />
           </Typography>
         </Grid>
         <Divider />
         {[
-          { label: 'Planter ID', value: tree.planterId, copy: true },
+          {
+            label: 'Planter ID',
+            value: tree.planterId,
+            copy: true,
+            link: true,
+          },
           {
             label: 'Planter Identifier',
             value: tree.planterIdentifier,
@@ -138,7 +144,11 @@ function TreeDetailDialog(props) {
             <Grid item>
               <Typography variant="subtitle1">{item.label}</Typography>
               <Typography variant="body1">
-                {item.value || '---'}
+                {item.link ? (
+                  <LinkToWebmap value={item.value} type="user" />
+                ) : (
+                  item.value || '---'
+                )}
                 {item.value && item.copy && (
                   <CopyButton label={item.label} value={item.value} />
                 )}
diff --git a/src/components/TreeTable.js b/src/components/TreeTable.js
index 218a5dd03..81051f1d7 100644
--- a/src/components/TreeTable.js
+++ b/src/components/TreeTable.js
@@ -18,6 +18,7 @@ import {
 import { getDateTimeStringLocale } from '../common/locale';
 import Filter, { FILTER_WIDTH } from './Filter';
 import TreeDetails from './TreeDetails.js';
+import LinkToWebmap from './common/LinkToWebmap';
 
 // change 88 to unit spacing,
 const styles = (theme) => ({
@@ -229,7 +230,7 @@ class TreeTable extends Component {
               >
                 {columns.map(({ attr, renderer }) => (
                   <TableCell key={attr}>
-                    {renderer ? renderer(tree[attr]) : tree[attr]}
+                    {formatCell(tree, attr, renderer)}
                   </TableCell>
                 ))}
               </TableRow>
@@ -254,6 +255,16 @@ class TreeTable extends Component {
   }
 }
 
+const formatCell = (tree, attr, renderer) => {
+  if (attr === 'id' || attr === 'planterId') {
+    return (
+      <LinkToWebmap value={tree[attr]} type={attr === 'id' ? 'tree' : 'user'} />
+    );
+  } else {
+    return renderer ? renderer(tree[attr]) : tree[attr];
+  }
+};
+
 const mapState = (state) => {
   const keys = Object.keys(state.trees.data);
   return {
diff --git a/src/components/common/LinkToWebmap.js b/src/components/common/LinkToWebmap.js
new file mode 100644
index 000000000..f7ca6299c
--- /dev/null
+++ b/src/components/common/LinkToWebmap.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import Link from '@material-ui/core/Link';
+import OpenInNewIcon from '@material-ui/icons/OpenInNew';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  openInNewIcon: {
+    margin: theme.spacing(-0.5, 0.5),
+  },
+}));
+
+export default function LinkToWebmap(props) {
+  const { value, type } = props;
+  const classes = useStyles();
+
+  return (
+    <Link
+      href={`${process.env.REACT_APP_WEBMAP_DOMAIN}/?${type}id=${value}`}
+      underline="always"
+      target="_blank"
+    >
+      {value}
+      <OpenInNewIcon fontSize="inherit" className={classes.openInNewIcon} />
+    </Link>
+  );
+}