🔧 Refactor BoxMap into its own component

nest_frontend/components/base/BoxMap.js

@@ -0,0 +1,32 @@
+import React from "react"
+import Style from "./BoxMap.module.css"
+import BoxFull from "./BoxFull"
+import { MapContainer, TileLayer } from "react-leaflet"
+
+
+export default function BoxMap({ header, setMap, startingPosition, startingZoom, button, ...props }) {
+    return (
+        <BoxFull
+            header={header}
+            childrenClassName={Style.BoxMapContents}
+            {...props}
+        >
+            <MapContainer
+                center={startingPosition}
+                zoom={startingZoom}
+                className={Style.MapContainer}
+                whenCreated={setMap}
+            >
+                <TileLayer
+                    attribution='(c) <a href="https://osm.org/copyright">OpenStreetMap contributors</a>'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                <div className={"leaflet-top leaflet-right"}>
+                    <div className={"leaflet-control"}>
+                        {button}
+                    </div>
+                </div>
+            </MapContainer>
+        </BoxFull>
+    )
+}

nest_frontend/components/base/BoxMap.module.css

@@ -1,4 +1,4 @@
-.BoxConditionMapContents {
+.BoxMapContents {
     display: flex;
     flex-direction: column;
     padding: 0;
@@ -9,6 +9,3 @@
     height: 300px;
     border-radius: 0 0 25px 25px;
 }
-
-.Button {
-}

nest_frontend/components/interactive/BoxConditionMap.js

@@ -1,13 +1,11 @@
 import React, { useCallback, useContext, useEffect, useState } from "react"
-import BoxFull from "../base/BoxFull"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faMapPin, faPlus } from "@fortawesome/free-solid-svg-icons"
-import Style from "./BoxConditionMap.module.css"
 import ButtonIconOnly from "../base/ButtonIconOnly"
-import { MapContainer, TileLayer } from "react-leaflet"
 import useRepositoryEditor from "../../hooks/useRepositoryEditor"
 import Condition from "../../utils/Condition"
 import ContextLanguage from "../../contexts/ContextLanguage"
+import BoxMap from "../base/BoxMap"
 
 
 const STARTING_POSITION = { lat: 41.89309, lng: 12.48289 }
@@ -99,7 +97,7 @@ export default function BoxConditionMap({ ...props }) {
     }
 
     return (
-        <BoxFull
+        <BoxMap
             header={
                 <span>
                     {strings.searchBy}
@@ -109,30 +107,17 @@ export default function BoxConditionMap({ ...props }) {
                     {strings.byZone}
                 </span>
             }
-            childrenClassName={Style.BoxConditionMapContents}
+            startingPosition={STARTING_POSITION}
-            {...props}
+            startingZoom={STARTING_ZOOM}
-        >
+            setMap={setMap}
-            <MapContainer
+            button={
-                center={STARTING_POSITION}
+                <ButtonIconOnly
-                zoom={STARTING_ZOOM}
+                    icon={faPlus}
-                className={Style.MapContainer}
+                    color={"Green"}
-                whenCreated={setMap}
+                    onClick={onButtonClick}
-            >
-                <TileLayer
-                    attribution='(c) <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
-                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                 />
-                <div className={"leaflet-top leaflet-right"}>
+            }
-                    <div className={"leaflet-control"}>
+            {...props}
-                        <ButtonIconOnly
+        />
-                            className={Style.Button}
-                            icon={faPlus}
-                            color={"Green"}
-                            onClick={onButtonClick}
-                        />
-                    </div>
-                </div>
-            </MapContainer>
-        </BoxFull>
     )
 }