From c0a7dc396d30d8f73236f87f910c6e8e4985bac3 Mon Sep 17 00:00:00 2001
From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com>
Date: Wed, 9 Oct 2024 17:16:23 +0200
Subject: [PATCH] Display search map bounds of user's preference

---
 .../components/Map/SearchMap/MapContainer.tsx |  3 +--
 .../src/components/Map/SearchMap/index.tsx    |  5 ++++
 .../src/components/pages/search/Search.tsx    | 12 ++++++++--
 .../src/modules/map/ListAndMapContext.tsx     | 23 ++++++++++++++++++-
 4 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Map/SearchMap/MapContainer.tsx b/frontend/src/components/Map/SearchMap/MapContainer.tsx
index eca343a8e..c597a8dca 100644
--- a/frontend/src/components/Map/SearchMap/MapContainer.tsx
+++ b/frontend/src/components/Map/SearchMap/MapContainer.tsx
@@ -1,6 +1,5 @@
 import { getMapConfig } from 'components/Map/config';
 import { MapContainer as LeafMapContainer } from 'react-leaflet';
-import React, { memo } from 'react';
 import { Map } from 'leaflet';
 
 interface Props {
@@ -28,4 +27,4 @@ const MapContainer: React.FC<Props> = ({ children, whenCreated, hasZoomControl =
   );
 };
 
-export default memo(MapContainer, () => true);
+export default MapContainer;
diff --git a/frontend/src/components/Map/SearchMap/index.tsx b/frontend/src/components/Map/SearchMap/index.tsx
index b03542993..5581f9a7c 100644
--- a/frontend/src/components/Map/SearchMap/index.tsx
+++ b/frontend/src/components/Map/SearchMap/index.tsx
@@ -13,6 +13,8 @@ import { ResetView } from 'components/Map/components/ResetView';
 import TileLayerManager from 'components/Map/components/TileLayerManager';
 import FullscreenControl from 'components/Map/components/FullScreenControl';
 import LocateControl from 'components/Map/components/LocateControl';
+import { useListAndMapContext } from 'modules/map/ListAndMapContext';
+import BoundsHandler from './BoundsHandler';
 
 export type PropsType = {
   segments?: { x: number; y: number }[];
@@ -35,6 +37,7 @@ const SearchMap: React.FC<PropsType> = props => {
   };
 
   const { setMapInstance } = useTileLayer();
+  const { searchBbox, isNavigatedByBrowser } = useListAndMapContext();
 
   return (
     <MapContainer whenCreated={setMapInstance} hasZoomControl={props.hasZoomControl}>
@@ -44,6 +47,8 @@ const SearchMap: React.FC<PropsType> = props => {
       <FilterButton openFilterMenu={props.openFilterMenu} />
       {props.hasZoomControl === true && <FullscreenControl />}
       <ResetView />
+      {/* Must be below ResetView */}
+      {isNavigatedByBrowser && <BoundsHandler bounds={searchBbox} />}
       <ScaleControl />
       <LocateControl />
       <SearchMapChildrens {...props} />
diff --git a/frontend/src/components/pages/search/Search.tsx b/frontend/src/components/pages/search/Search.tsx
index de4952c52..f6f50d8ad 100644
--- a/frontend/src/components/pages/search/Search.tsx
+++ b/frontend/src/components/pages/search/Search.tsx
@@ -93,12 +93,20 @@ export const SearchUI: React.FC<Props> = ({ language }) => {
     language,
   );
 
-  const { setPoints } = useListAndMapContext();
+  const { setPoints, setSearchBbox, isNavigatedByBrowser } = useListAndMapContext();
 
   useEffect(() => {
-    if (mapResults) setPoints(mapResults);
+    if (mapResults) {
+      setPoints(mapResults);
+    }
   }, [mapResults, setPoints]);
 
+  useEffect(() => {
+    if (bounds && !isNavigatedByBrowser) {
+      setSearchBbox(bounds);
+    }
+  }, [bounds, isNavigatedByBrowser, setSearchBbox]);
+
   const intl = useIntl();
 
   const onRemoveAllFiltersClick = () => {
diff --git a/frontend/src/modules/map/ListAndMapContext.tsx b/frontend/src/modules/map/ListAndMapContext.tsx
index d015a5327..958581bc5 100644
--- a/frontend/src/modules/map/ListAndMapContext.tsx
+++ b/frontend/src/modules/map/ListAndMapContext.tsx
@@ -1,18 +1,26 @@
 import { createContext, useContext, useState } from 'react';
+import { LatLngBounds } from 'leaflet';
+import useBrowserNavigationDetection from 'hooks/useBrowserNavigationDetection';
 import { MapResults } from '../mapResults/interface';
 
 export interface ListAndMapContext {
   hoveredCardId: string | null;
   points: MapResults;
+  searchBbox: LatLngBounds | null;
   setPoints: (value: MapResults) => void;
   setHoveredCardId: (hoveredCardId: string | null) => void;
+  setSearchBbox: (bbox: LatLngBounds | null) => void;
+  isNavigatedByBrowser: boolean;
 }
 
 const listAndMapContext = createContext<ListAndMapContext>({
   hoveredCardId: null,
   points: [],
+  searchBbox: null,
   setPoints: (value: MapResults) => value,
   setHoveredCardId: (_: string | null) => _,
+  setSearchBbox: (_: LatLngBounds | null) => _,
+  isNavigatedByBrowser: false,
 });
 
 export const useListAndMapContext = () => useContext(listAndMapContext);
@@ -20,9 +28,22 @@ export const useListAndMapContext = () => useContext(listAndMapContext);
 export const ListAndMapProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
   const [hoveredCardId, setHoveredCardId] = useState<string | null>(null);
   const [points, setPoints] = useState<MapResults>([]);
+  const [searchBbox, setSearchBbox] = useState<LatLngBounds | null>(null);
+
+  const isNavigatedByBrowser = useBrowserNavigationDetection();
 
   return (
-    <listAndMapContext.Provider value={{ hoveredCardId, setHoveredCardId, points, setPoints }}>
+    <listAndMapContext.Provider
+      value={{
+        hoveredCardId,
+        setHoveredCardId,
+        points,
+        setPoints,
+        searchBbox,
+        setSearchBbox,
+        isNavigatedByBrowser,
+      }}
+    >
       {children}
     </listAndMapContext.Provider>
   );