fix: grower tooltip jumping for errors (Greenstand#678)

* fix: grower tooltip * removed error styles
gwynndp · Jun 12, 2022 · 88403b6 · 88403b6
1 parent 3ee0ecc
commit 88403b6
Showing 1 changed file with 27 additions and 37 deletions.
diff --git a/src/components/Growers/GrowerTooltip.js b/src/components/Growers/GrowerTooltip.js
@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  Box,
-  Card,
-  CardActionArea,
-  Divider,
-} from '@material-ui/core';
+import { Box, Card, CardActionArea, Divider } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import EmailIcon from '@material-ui/icons/EmailOutlined';
@@ -16,15 +11,16 @@ import OptimizedImage from '../OptimizedImage';
 import { useStyle } from './Growers.styles.js';
 
 const GrowerTooltip = ({ grower, growerClick }) => {
-    const classes = useStyle();
+  const classes = useStyle();
+  const matches = grower.imageUrl?.match(/\/\/(.*?)\/(.*)/);
   const useStyles = makeStyles(() => ({
     box: {
       display: 'flex',
       marginTop: '2px',
     },
     label: {
       marginLeft: '12px',
-    },
+    }
   }));
 
   const growerToolTipStyles = useStyles();
@@ -51,30 +47,28 @@ const GrowerTooltip = ({ grower, growerClick }) => {
                   margin: '2px',
                 }}
               >
-                {grower.imageUrl && (
+                {matches?.length > 1 ? (
                   <OptimizedImage
                     rotation={grower.imageRotation}
                     src={grower.imageUrl}
-                    style={{ 
-                      height:"24px",
-                      width:"24px" 
+                    style={{
+                      height: '24px',
+                      width: '24px',  
                     }}
                   />
-                )}
-                {!grower.imageUrl && (
-                  <Person 
-                    className={classes.person} 
+                ) : 
+                (
+                  <Person
+                    className={classes.person}
                     style={{
-                      height:"24px",
-                      width:"24px" 
-                    }} 
+                      height: '24px',
+                      width: '24px',
+                    }}
                   />
-              )}
+                )}
               </Box>
               <Box>
-                <Typography
-                  className={growerToolTipStyles.label}
-                >
+                <Typography className={growerToolTipStyles.label}>
                   {grower.firstName} {grower.lastName}
                 </Typography>
               </Box>
@@ -97,31 +91,27 @@ const GrowerTooltip = ({ grower, growerClick }) => {
               {grower.email && (
                 <Box className={growerToolTipStyles.box}>
                   <EmailIcon color="primary" />
-                  <Typography
-                    className={growerToolTipStyles.label}
-                  >
+                  <Typography className={growerToolTipStyles.label}>
                     {grower.email}
                   </Typography>
                 </Box>
               )}
               {(grower.organizaton || grower.organizationId) && (
                 <Box className={growerToolTipStyles.box}>
                   <OrgIcon color="primary" />
-                    <Box className={growerToolTipStyles.label}>
-                      <GrowerOrganization
-                        organizationName={grower.organization}
-                        assignedOrganizationId={grower.organizationId}
-                        compact={true}
-                      />
-                    </Box>
+                  <Box className={growerToolTipStyles.label}>
+                    <GrowerOrganization
+                      organizationName={grower.organization}
+                      assignedOrganizationId={grower.organizationId}
+                      compact={true}
+                    />
+                  </Box>
                 </Box>
               )}
               {grower.phone && (
                 <Box className={growerToolTipStyles.box}>
-                  <PhoneIcon color="primary"/>
-                  <Typography
-                    className={growerToolTipStyles.label}
-                  >
+                  <PhoneIcon color="primary" />
+                  <Typography className={growerToolTipStyles.label}>
                     {grower.phone}
                   </Typography>
                 </Box>