From cc57f0d66d57c655e825df19b954bddd83ddea33 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 18 May 2021 16:53:42 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Refactor=20BoxMap=20into=20its?=
 =?UTF-8?q?=20own=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nest_frontend/components/base/BoxMap.js       | 32 +++++++++++++++
 .../BoxMap.module.css}                        |  5 +--
 .../components/interactive/BoxConditionMap.js | 41 ++++++-------------
 3 files changed, 46 insertions(+), 32 deletions(-)
 create mode 100644 nest_frontend/components/base/BoxMap.js
 rename nest_frontend/components/{interactive/BoxConditionMap.module.css => base/BoxMap.module.css} (79%)

diff --git a/nest_frontend/components/base/BoxMap.js b/nest_frontend/components/base/BoxMap.js
new file mode 100644
index 0000000..cf8cf43
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/nest_frontend/components/interactive/BoxConditionMap.module.css b/nest_frontend/components/base/BoxMap.module.css
similarity index 79%
rename from nest_frontend/components/interactive/BoxConditionMap.module.css
rename to nest_frontend/components/base/BoxMap.module.css
index dcb726c..8a33217 100644
--- a/nest_frontend/components/interactive/BoxConditionMap.module.css
+++ b/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 {
-}
\ No newline at end of file
diff --git a/nest_frontend/components/interactive/BoxConditionMap.js b/nest_frontend/components/interactive/BoxConditionMap.js
index 0cf8bdc..1315b4e 100644
--- a/nest_frontend/components/interactive/BoxConditionMap.js
+++ b/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}
-            {...props}
-        >
-            <MapContainer
-                center={STARTING_POSITION}
-                zoom={STARTING_ZOOM}
-                className={Style.MapContainer}
-                whenCreated={setMap}
-            >
-                <TileLayer
-                    attribution='(c) <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
-                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            startingPosition={STARTING_POSITION}
+            startingZoom={STARTING_ZOOM}
+            setMap={setMap}
+            button={
+                <ButtonIconOnly
+                    icon={faPlus}
+                    color={"Green"}
+                    onClick={onButtonClick}
                 />
-                <div className={"leaflet-top leaflet-right"}>
-                    <div className={"leaflet-control"}>
-                        <ButtonIconOnly
-                            className={Style.Button}
-                            icon={faPlus}
-                            color={"Green"}
-                            onClick={onButtonClick}
-                        />
-                    </div>
-                </div>
-            </MapContainer>
-        </BoxFull>
+            }
+            {...props}
+        />
     )
 }