feat: Add show_in_map toggle

src/api/growers.js

@@ -39,6 +39,7 @@ export default {
           organizationId: true,
           imageRotation: true,
           id: true,
+          show_in_map: true,
           // growerAccountUuid: true,
         },
       };

src/components/GrowerDetail.js

@@ -17,6 +17,7 @@ import {
   Divider,
   LinearProgress,
   Fab,
+  Switch,
 } from '@material-ui/core';
 import {
   Close,
@@ -410,6 +411,8 @@ const GrowerDetail = ({ open, growerId, onClose }) => {
                   </Grid>
                 )}
               <Divider />
+              <ShowInMapToggle grower={grower} />
+              <Divider />
               <Grid container direction="column" className={classes.box}>
                 <Typography variant="subtitle1" className={classes.captures}>
                   Captures
@@ -578,3 +581,34 @@ const GrowerDetail = ({ open, growerId, onClose }) => {
 };
 
 export default GrowerDetail;
+
+const ShowInMapToggle = ({ grower }) => {
+  const classes = useStyle();
+  const { updateGrower } = useContext(GrowerContext);
+  const [showInMap, setShowInMap] = useState(!!grower?.show_in_map);
+
+  React.useEffect(() => {
+    setShowInMap(!!grower?.show_in_map);
+  }, [grower?.show_in_map]);
+
+  const toggleShow = async () => {
+    const newShowState = !showInMap;
+    setShowInMap(newShowState);
+    await updateGrower({ id: grower.id, show_in_map: newShowState });
+  };
+
+  return (
+    <Grid
+      container
+      direction="row"
+      className={classes.box}
+      style={{
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      }}
+    >
+      <Typography variant="subtitle1">Show in map</Typography>
+      <Switch checked={showInMap} onChange={toggleShow} />
+    </Grid>
+  );
+};

src/context/GrowerContext.js

@@ -86,10 +86,10 @@ export function GrowerProvider(props) {
     const updatedGrower = await api.getGrower(payload.id);
     const index = growers.findIndex((p) => p.id === updatedGrower.id);
     if (index >= 0) {
-      const growers = Object.assign([], growers, {
+      const newGrowers = Object.assign([], growers, {
         [index]: updatedGrower,
       });
-      setGrowers(growers);
+      setGrowers(newGrowers);
     }
   };