From c4e090a422371e644d1ef062b909db361a07a45d Mon Sep 17 00:00:00 2001
From: Pranav Kakaraparti <pkakaraparti@ufl.edu>
Date: Sat, 12 Aug 2023 15:00:27 -0500
Subject: [PATCH] feat: show in webmap toggle, minor fix

---
 src/components/GrowerDetail.js   | 40 +++++++++++++++++++++++++++++++-
 src/components/OptimizedImage.js |  1 +
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/components/GrowerDetail.js b/src/components/GrowerDetail.js
index b48bd92a6..1049b2581 100644
--- a/src/components/GrowerDetail.js
+++ b/src/components/GrowerDetail.js
@@ -16,6 +16,7 @@ import {
   ListItem,
   ListItemAvatar,
   ListItemText,
+  Switch,
   Typography,
 } from '@material-ui/core';
 import {
@@ -148,7 +149,7 @@ const GrowerDetail = ({ open, growerId, onClose }) => {
   // log.debug('render: grower detail', growerId);
   const classes = useStyle();
   const appContext = useContext(AppContext);
-  const { growers } = useContext(GrowerContext);
+  const { growers, updateGrower } = useContext(GrowerContext);
   const { sendMessageFromGrower } = useContext(MessagingContext);
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [grower, setGrower] = useState({});
@@ -160,6 +161,9 @@ const GrowerDetail = ({ open, growerId, onClose }) => {
   const [isImageLoading, setIsImageLoading] = useState(true);
   const [errorMessage, setErrorMessage] = useState(null);
 
+  // show in webmap
+  const [showInWebmap, setShowInWebmap] = useState(false);
+
   function formatDevices(grower) {
     // deduplicate and format
     const devices = grower?.devices?.reduce((result, device) => {
@@ -182,6 +186,7 @@ const GrowerDetail = ({ open, growerId, onClose }) => {
 
   useEffect(() => {
     setErrorMessage(null);
+
     async function loadGrowerDetail() {
       if (grower && grower.grower_account_id !== growerId) {
         setGrower({});
@@ -194,6 +199,7 @@ const GrowerDetail = ({ open, growerId, onClose }) => {
         }
 
         setGrower(match);
+        setShowInWebmap(match.show_in_map);
 
         if (match?.devices?.length) {
           const devices = formatDevices(match);
@@ -201,6 +207,7 @@ const GrowerDetail = ({ open, growerId, onClose }) => {
         }
       }
     }
+
     loadGrowerDetail();
     // eslint-disable-next-line
   }, [growerId, growers]);
@@ -227,6 +234,7 @@ const GrowerDetail = ({ open, growerId, onClose }) => {
         setLoading(false);
       }
     }
+
     loadCaptures();
   }, [grower]);
 
@@ -270,6 +278,23 @@ const GrowerDetail = ({ open, growerId, onClose }) => {
     setSnackbarLabel(label);
     setSnackbarOpen(true);
   }
+
+  async function handleSwitchChange(e) {
+    const toggle = e.target.checked;
+    setShowInWebmap(toggle);
+
+    try {
+      const updatedGrower = {
+        id: grower.id,
+        show_in_map: toggle,
+      };
+      await updateGrower(updatedGrower);
+    } catch (error) {
+      setErrorMessage('Error updating grower detail');
+      setShowInWebmap(!toggle);
+    }
+  }
+
   return (
     <>
       <Drawer
@@ -407,6 +432,19 @@ const GrowerDetail = ({ open, growerId, onClose }) => {
                   </Grid>
                 )}
               <Divider />
+              <Grid
+                container
+                direction="row"
+                className={classes.box}
+                style={{
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                }}
+              >
+                <Typography variant="subtitle1">Show in Web Map</Typography>
+                <Switch checked={showInWebmap} onChange={handleSwitchChange} />
+              </Grid>
+              <Divider />
               <Grid container direction="column" className={classes.box}>
                 <Typography variant="subtitle1" className={classes.captures}>
                   Captures
diff --git a/src/components/OptimizedImage.js b/src/components/OptimizedImage.js
index 8926372a9..cf36b7e9d 100644
--- a/src/components/OptimizedImage.js
+++ b/src/components/OptimizedImage.js
@@ -67,6 +67,7 @@ export default function OptimizedImage(props) {
           src={cdnUrl || src}
           onError={({ currentTarget }) => {
             currentTarget.onerror = null;
+            currentTarget.srcset = null;
             currentTarget.src = null;
           }}
           alt=".."