move action buttons into MapCard

src/components/Map/GenericMapHolder.jsx

@@ -1,11 +1,9 @@
 import React from "react";
 import { useSelector } from "react-redux";
-import { Box } from "@mui/material";
 import Grid from "@mui/material/Unstable_Grid2";
 import { styled } from "@mui/system";
 import PropTypes from "prop-types";
 
-import ActionButtons from "./ActionButtons.jsx";
 import MapLayerList from "../MapLayerList/MapLayerList.jsx";
 import { ThreeColumnGrid } from "../All/StyledComponents.jsx";
 
@@ -22,19 +20,10 @@ const ContentHolderGrid = styled(Grid)(({ theme }) => ({
   },
 }));
 
-const ContentMapBox = styled(Box)(({ theme }) => ({
-  height: "100%",
-  padding: theme.spacing(0),
-  backgroundColor: theme.palette.CRESTGridBackground.dark,
-  borderColor: theme.palette.CRESTBorderColor.main,
-  borderStyle: "solid",
-  borderWidth: "1px",
-}));
-
 const listVisibleSelector = (state) => state.mapLayerList.visible;
 
 export default function GenericMapHolder(props) {
-  const { leftColumn, mapCard, map } = props;
+  const { leftColumn, mapCard } = props;
   const layerListVisible = useSelector(listVisibleSelector);
 
   return (
@@ -73,10 +62,7 @@ export default function GenericMapHolder(props) {
         xl={layerListVisible ? 6.25 : 9}
         order={{ xs: 1, sm: 1, md: 2 }}
       >
-        <ContentMapBox>
-          {mapCard}
-          <ActionButtons map={map} />
-        </ContentMapBox>
+        {mapCard}
       </ThreeColumnGrid>
 
       {/* RIGHT COLUMN FOR LAYER LIST */}
@@ -101,5 +87,4 @@ export default function GenericMapHolder(props) {
 GenericMapHolder.propTypes = {
   leftColumn: PropTypes.node,
   mapCard: PropTypes.node,
-  map: PropTypes.object,
 };

src/components/Map/MapCard.jsx

@@ -2,9 +2,22 @@ import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { useSelector } from "react-redux";
 import { useMapEvents } from "react-leaflet";
+import { styled } from "@mui/system";
+import { Box } from "@mui/material";
+
 import LeafletMapContainer from "./LeafletMapContainer.jsx";
 import ActiveTileLayers from "./ActiveTileLayers.jsx";
 import BasemapLayer from "./BasemapLayer.jsx";
+import ActionButtons from "./ActionButtons.jsx";
+
+const ContentMapBox = styled(Box)(({ theme }) => ({
+  height: "100%",
+  padding: theme.spacing(0),
+  backgroundColor: theme.palette.CRESTGridBackground.dark,
+  borderColor: theme.palette.CRESTBorderColor.main,
+  borderStyle: "solid",
+  borderWidth: "1px",
+}));
 
 export default function MapCard({ children, map, setMap, mapEventHandlers }) {
   const selectedCenterSelector = (state) => state.mapProperties.center;
@@ -31,12 +44,15 @@ export default function MapCard({ children, map, setMap, mapEventHandlers }) {
   };
 
   return (
-    <LeafletMapContainer center={center} zoom={zoom} innerRef={setMap}>
-      {children}
-      <ActiveTileLayers />
-      <BasemapLayer map={map} />
-      <MapEventsComponent />
-    </LeafletMapContainer>
+    <ContentMapBox>
+      <LeafletMapContainer center={center} zoom={zoom} innerRef={setMap}>
+        {children}
+        <ActiveTileLayers />
+        <BasemapLayer map={map} />
+        <MapEventsComponent />
+      </LeafletMapContainer>
+      <ActionButtons map={map} />
+    </ContentMapBox>
   );
 }
 

src/pages/AnalyzeProjectSites.jsx

@@ -130,50 +130,45 @@ export default function AnalyzeProjectSite(props) {
   }
 
   return (
-    <>
-      <GenericMapHolder
-        map={map}
-        isItAGraph={analyzeAreaState.isItAGraph}
-        leftColumn={
-          <AnalyzeProjectSiteLeftColumn
-            mapActionCard={
-              <MapActionCard
-                map={map}
-                drawAreaDisabled={drawAreaDisabled}
-                setGeoToRedraw={setGeoToRedraw}
-                setErrorState={setErrorState}
-              />
-            }
-            chartCard={
-              <ChartsHolder
-                map={map}
-                featureGroupRef={leafletFeatureGroupRef}
-                setHover={setHover}
-                chartData={
-                  featuresForCurrentRegion.length > 0
-                    ? featuresForCurrentRegion
-                    : null
-                }
-              />
-            }
-            noDataState={<EmptyState />}
-          />
-        }
-        tableData="Insert Table Data Here"
-        mapCard={
-          <React.Fragment>
-            <AnalyzeProjectSitesMapCard
+    <GenericMapHolder
+      isItAGraph={analyzeAreaState.isItAGraph}
+      leftColumn={
+        <AnalyzeProjectSiteLeftColumn
+          mapActionCard={
+            <MapActionCard
               map={map}
-              setMap={setMap}
-              leafletFeatureGroupRef={leafletFeatureGroupRef}
-              setDrawAreaDisabled={setDrawAreaDisabled}
-              hover={hover}
+              drawAreaDisabled={drawAreaDisabled}
+              setGeoToRedraw={setGeoToRedraw}
               setErrorState={setErrorState}
             />
-          </React.Fragment>
-        }
-      />
-    </>
+          }
+          chartCard={
+            <ChartsHolder
+              map={map}
+              featureGroupRef={leafletFeatureGroupRef}
+              setHover={setHover}
+              chartData={
+                featuresForCurrentRegion.length > 0
+                  ? featuresForCurrentRegion
+                  : null
+              }
+            />
+          }
+          noDataState={<EmptyState />}
+        />
+      }
+      tableData="Insert Table Data Here"
+      mapCard={
+        <AnalyzeProjectSitesMapCard
+          map={map}
+          setMap={setMap}
+          leafletFeatureGroupRef={leafletFeatureGroupRef}
+          setDrawAreaDisabled={setDrawAreaDisabled}
+          hover={hover}
+          setErrorState={setErrorState}
+        />
+      }
+    />
   );
 }