Define an explicit hasZoomControl prop for Map components instead o…

…f dealing with `type`
GeotrekCE · Jul 24, 2023 · 6428471 · 6428471
1 parent b124543
commit 6428471
Show file tree

Hide file tree

Showing 11 changed files with 17 additions and 19 deletions.
diff --git a/frontend/src/components/Map/DetailsMap/DetailsMap.tsx b/frontend/src/components/Map/DetailsMap/DetailsMap.tsx
@@ -66,7 +66,7 @@ export type PropsType = {
   trekGeoJSON?: string;
   pointsReference?: Coordinate2D[] | null;
   hideMap?: () => void;
-  type: 'DESKTOP' | 'MOBILE';
+  hasZoomControl: boolean;
   openFilterMenu?: () => void;
   hasFilters?: boolean;
   arrivalLocation?: Coordinate2D;
@@ -159,7 +159,7 @@ export const DetailsMap: React.FC<PropsType> = props => {
         minZoom={
           navigator.onLine ? undefined : Math.min(...(mapConfig?.zoomAvailableOffline ?? []))
         }
-        zoomControl={props.type === 'DESKTOP'}
+        zoomControl={props.hasZoomControl}
         whenCreated={setMapInstance}
         bounds={bounds}
       >

diff --git a/frontend/src/components/Map/SearchMap/MapContainer.tsx b/frontend/src/components/Map/SearchMap/MapContainer.tsx
@@ -5,22 +5,22 @@ import { Map } from 'leaflet';
 
 interface Props {
   whenCreated: (map: Map) => void;
-  type: string;
+  hasZoomControl?: boolean;
   children: React.ReactNode;
 }
 
-const MapContainer: React.FC<Props> = ({ children, whenCreated, type }) => {
+const MapContainer: React.FC<Props> = ({ children, whenCreated, hasZoomControl = false }) => {
   const mapConfig = getMapConfig();
 
   return (
     <LeafMapContainer
+      className="w-full h-full"
       center={mapConfig.searchMapCenter as [number, number]}
       zoom={mapConfig.searchMapZoom}
       maxZoom={mapConfig.maximumZoomLevel}
       whenCreated={whenCreated}
       scrollWheelZoom
-      style={{ height: '100%', width: '100%' }}
-      zoomControl={type === 'DESKTOP'}
+      zoomControl={hasZoomControl}
       id="search_map"
     >
       {children}

diff --git a/frontend/src/components/Map/SearchMap/SearchMapChildrens.tsx b/frontend/src/components/Map/SearchMap/SearchMapChildrens.tsx
@@ -14,7 +14,6 @@ import { useListAndMapContext } from '../../../modules/map/ListAndMapContext';
 export type PropsType = {
   segments?: { x: number; y: number }[];
   hideMap?: () => void;
-  type: 'DESKTOP' | 'MOBILE';
   openFilterMenu?: () => void;
   hasFilters?: boolean;
   arrivalLocation?: { x: number; y: number };

diff --git a/frontend/src/components/Map/SearchMap/index.tsx b/frontend/src/components/Map/SearchMap/index.tsx
@@ -16,7 +16,7 @@ import TileLayerManager from '../components/TileLayerManager';
 export type PropsType = {
   segments?: { x: number; y: number }[];
   hideMap?: () => void;
-  type: 'DESKTOP' | 'MOBILE';
+  hasZoomControl?: boolean;
   openFilterMenu?: () => void;
   hasFilters?: boolean;
   arrivalLocation?: { x: number; y: number };
@@ -37,7 +37,7 @@ const SearchMap: React.FC<PropsType> = props => {
   const { setMapInstance } = useTileLayer();
 
   return (
-    <MapContainer whenCreated={setMapInstance} type={props.type}>
+    <MapContainer whenCreated={setMapInstance} hasZoomControl={props.hasZoomControl}>
       {props.onMove && <MoveHandler onMove={props.onMove} />}
       <TileLayerManager />
       <BackButton icon={<ArrowLeft size={24} />} onClick={hideMap} />

diff --git a/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx b/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx
@@ -41,7 +41,7 @@ interface TouristicContentGeometryNullable {
 export type PropsType = {
   touristicContentGeometry: TouristicContentGeometryNullable;
   hideMap?: () => void;
-  type: 'DESKTOP' | 'MOBILE';
+  hasZoomControl: boolean;
   bbox: Bbox;
 };
 
@@ -63,6 +63,7 @@ export const TouristicContentMap: React.FC<PropsType> = props => {
   return (
     <>
       <MapContainer
+        className="w-full h-full"
         scrollWheelZoom
         maxZoom={
           navigator.onLine
@@ -72,9 +73,8 @@ export const TouristicContentMap: React.FC<PropsType> = props => {
         minZoom={
           navigator.onLine ? undefined : Math.min(...(mapConfig?.zoomAvailableOffline ?? []))
         }
-        style={{ height: '100%', width: '100%' }}
         whenCreated={setMapInstance}
-        zoomControl={props.type === 'DESKTOP'}
+        zoomControl={props.hasZoomControl}
         bounds={center}
         attributionControl={false}
       >

diff --git a/frontend/src/components/pages/details/Details.tsx b/frontend/src/components/pages/details/Details.tsx
@@ -590,7 +590,7 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ slug, parentId, langu
                 )}
               >
                 <DetailsMapDynamicComponent
-                  type={isMobile ? 'MOBILE' : 'DESKTOP'}
+                  hasZoomControl={!isMobile}
                   hideMap={hideMobileMap}
                   title={details.title}
                   arrivalLocation={details.trekArrival}

diff --git a/frontend/src/components/pages/search/Search.tsx b/frontend/src/components/pages/search/Search.tsx
@@ -260,7 +260,7 @@ export const SearchUI: React.FC<Props> = ({ language }) => {
             <Loader loaded={!isMapLoading} className="absolute inset-0 z-map" />
             {!isMobile && (
               <SearchMapDynamicComponent
-                type="DESKTOP"
+                hasZoomControl
                 onMove={handleMoveMap}
                 shouldUseClusters
                 shouldUsePopups
@@ -279,7 +279,6 @@ export const SearchUI: React.FC<Props> = ({ language }) => {
         >
           <SearchMapDynamicComponent
             hideMap={hideMobileMap}
-            type="MOBILE"
             openFilterMenu={displayMenu}
             hasFilters={numberSelected > 0}
             shouldUseClusters

diff --git a/frontend/src/components/pages/site/OutdoorCourseUI.tsx b/frontend/src/components/pages/site/OutdoorCourseUI.tsx
@@ -396,7 +396,7 @@ export const OutdoorCourseUIWithoutContext: React.FC<Props> = ({ outdoorCourseUr
                 )}
               >
                 <DetailsMapDynamicComponent
-                  type={isMobile ? 'MOBILE' : 'DESKTOP'}
+                  hasZoomControl={!isMobile}
                   outdoorGeometry={{
                     geometry: outdoorCourseContent.geometry,
                     pictogramUri: '',

diff --git a/frontend/src/components/pages/site/OutdoorSiteUI.tsx b/frontend/src/components/pages/site/OutdoorSiteUI.tsx
@@ -522,7 +522,7 @@ const OutdoorSiteUIWithoutContext: React.FC<Props> = ({ outdoorSiteUrl, language
                 <DetailsMapDynamicComponent
                   courses={outdoorSiteContent?.courses}
                   experiences={outdoorSiteContent?.children}
-                  type={isMobile ? 'MOBILE' : 'DESKTOP'}
+                  hasZoomControl={!isMobile}
                   outdoorGeometry={{
                     geometry: outdoorSiteContent.geometry,
                     pictogramUri: '',

diff --git a/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx b/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx
@@ -310,7 +310,7 @@ export const TouristicContentUI: React.FC<TouristicContentUIProps> = ({
               )}
             >
               <TouristicContentMapDynamicComponent
-                type={isMobile ? 'MOBILE' : 'DESKTOP'}
+                hasZoomControl={!isMobile}
                 bbox={touristicContent.bbox}
                 touristicContentGeometry={{
                   geometry: touristicContent.geometry,

diff --git a/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx b/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx
@@ -376,7 +376,7 @@ export const TouristicEventUIWithoutContext: React.FC<Props> = ({
                 )}
               >
                 <DetailsMapDynamicComponent
-                  type={isMobile ? 'MOBILE' : 'DESKTOP'}
+                  hasZoomControl={!isMobile}
                   eventGeometry={{
                     geometry: touristicEventContent.geometry,
                     pictogramUri: touristicEventContent.category.pictogramUri,