From f78c1872a075da41ef932d6e952b963235f3c5e3 Mon Sep 17 00:00:00 2001
From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com>
Date: Wed, 9 Oct 2024 10:25:10 +0200
Subject: [PATCH 1/7] Remove scrollRestoration to top from trek detail page

---
 frontend/src/pages/trek/[slug].tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/trek/[slug].tsx b/frontend/src/pages/trek/[slug].tsx
index 4ee37dc52..f4557ae8b 100644
--- a/frontend/src/pages/trek/[slug].tsx
+++ b/frontend/src/pages/trek/[slug].tsx
@@ -1,7 +1,6 @@
 import { GetServerSideProps, NextPage } from 'next';
 import router, { useRouter } from 'next/router';
 import { DetailsUI } from 'components/pages/details';
-import { useEffect } from 'react';
 import { dehydrate, QueryCache, QueryClient } from '@tanstack/react-query';
 import { getDetails, getTrekFamily } from 'modules/details/connector';
 import { isUrlString } from 'modules/utils/string';
@@ -34,7 +33,10 @@ export const getServerSideProps: GetServerSideProps = async context => {
       queryFn: () => getCommonDictionaries(locale),
     });
 
-    await queryClient.prefetchQuery({ queryKey: ['details', id, locale], queryFn: () => getDetails(id, locale, commonDictionaries) });
+    await queryClient.prefetchQuery({
+      queryKey: ['details', id, locale],
+      queryFn: () => getDetails(id, locale, commonDictionaries),
+    });
 
     const details = queryClient.getQueryData<Details>(['details', id, locale]);
 
@@ -44,7 +46,6 @@ export const getServerSideProps: GetServerSideProps = async context => {
     });
 
     if (details !== undefined) {
-
       const redirect = redirectIfWrongUrl(
         id,
         details.title,
@@ -54,9 +55,9 @@ export const getServerSideProps: GetServerSideProps = async context => {
       );
       if (redirect)
         return {
-      redirect,
-    };
-  }
+          redirect,
+        };
+    }
 
     return {
       props: {
@@ -81,11 +82,6 @@ const Trek: NextPage<Props> = ({ errorCode }) => {
   const { slug, parentId } = query;
   const language = locale ?? getDefaultLanguage();
 
-  useEffect(() => {
-    // Force to scroll top on page refresh
-    window.history.scrollRestoration = 'manual';
-  }, []);
-
   if (errorCode === 404) return <Custom404 />;
 
   return <DetailsUI slug={slug} parentId={parentId} language={language} />;

From e4f785b5836774d8097d05ddc021bae72abb7e7b Mon Sep 17 00:00:00 2001
From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com>
Date: Wed, 9 Oct 2024 10:32:11 +0200
Subject: [PATCH 2/7] Active nextconfig scrollRestoration feature

---
 frontend/next.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/next.config.js b/frontend/next.config.js
index b054c39b8..43634f9b3 100644
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -69,6 +69,7 @@ const nextConfig = {
   },
   experimental: {
     instrumentationHook: true,
+    scrollRestoration: true,
   },
 };
 

From a61d69f4261d58a620ed7d1954d187e235448fba Mon Sep 17 00:00:00 2001
From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com>
Date: Wed, 9 Oct 2024 10:46:26 +0200
Subject: [PATCH 3/7] Simplify CSS for search positions element

---
 frontend/src/components/Header/Header.tsx       | 17 ++---------------
 frontend/src/components/pages/search/Search.tsx | 12 +++---------
 .../search/components/FilterBar/FilterField.tsx |  2 +-
 .../pages/search/components/FilterBar/index.tsx |  2 +-
 4 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
index 9cf67ebc1..0bf049306 100644
--- a/frontend/src/components/Header/Header.tsx
+++ b/frontend/src/components/Header/Header.tsx
@@ -3,7 +3,6 @@ import { FormattedMessage } from 'react-intl';
 import { routes } from 'services/routes';
 
 import { Link } from 'components/Link';
-import { Display } from 'hooks/useHideOnScrollDown';
 
 import InlineMenu from 'components/InlineMenu';
 import { GoToSearchButton } from 'components/GoToSearchButton';
@@ -15,11 +14,6 @@ import { useHeader } from './useHeader';
 export const Header: React.FC = () => {
   const menuNode = useRef<HTMLDivElement | null>(null);
   const { config, menuItems, isDesktopMenu, intl } = useHeader(menuNode);
-  /**
-   * Disabled for now to handle the map on the search page
-   */
-  // const headerState = useHideOnScrollDown(sizes.desktopHeader);
-  const headerState: Display = 'DISPLAYED';
 
   const headerTop = config.headerTopHtml[intl.locale] ?? config.headerTopHtml.default;
   const headerBottom = config.headerBottomHtml[intl.locale] ?? config.headerBottomHtml.default;
@@ -31,14 +25,7 @@ export const Header: React.FC = () => {
           <HtmlParser template={headerTop} />
         </div>
       )}
-      <header
-        className={cn(
-          'sticky z-header bg-primary1',
-          headerState === 'DISPLAYED' ? 'top-0' : '-top-desktopHeader',
-        )}
-        role="banner"
-        id="header"
-      >
+      <header className="sticky z-header bg-primary1 top-0" role="banner" id="header">
         <div className="h-11 desktop:h-desktopHeader flex justify-between  items-center sticky z-header px-3 shadow-sm shrink-0 transition-all duration-300 delay-100">
           <Link href={routes.HOME} className="flex items-center">
             <div className="shrink-0" id="header_logo">
@@ -75,7 +62,7 @@ export const Header: React.FC = () => {
         <BurgerMenu
           className={cn(isDesktopMenu && 'hidden')}
           config={config.menu}
-          displayState={headerState}
+          displayState="DISPLAYED"
           menuItems={menuItems}
         />
       </header>
diff --git a/frontend/src/components/pages/search/Search.tsx b/frontend/src/components/pages/search/Search.tsx
index f49e19537..6c86567c7 100644
--- a/frontend/src/components/pages/search/Search.tsx
+++ b/frontend/src/components/pages/search/Search.tsx
@@ -151,10 +151,7 @@ export const SearchUI: React.FC<Props> = ({ language }) => {
         />
       )}
 
-      <div
-        className="flex flex-col h-[calc(100vh-theme(height.desktopHeader))]"
-        id="search_container"
-      >
+      <div className="flex flex-col" id="search_container">
         {!isMobile && (
           <FilterBarNew
             dateFilter={dateFilter}
@@ -166,11 +163,8 @@ export const SearchUI: React.FC<Props> = ({ language }) => {
             language={language}
           />
         )}
-        <div className="flex flex-row flex-1 overflow-y-hidden">
-          <div
-            id="search_resultCardList"
-            className="flex flex-col w-full desktop:w-1/2 overflow-y-scroll"
-          >
+        <div className="flex flex-row flex-1">
+          <div id="search_resultCardList" className="flex flex-col w-full desktop:w-1/2">
             <div className="p-4 flex-1">
               <Loader loaded={!isLoading}>
                 <div className="flex flex-col desktop:flex-row desktop:justify-between">
diff --git a/frontend/src/components/pages/search/components/FilterBar/FilterField.tsx b/frontend/src/components/pages/search/components/FilterBar/FilterField.tsx
index 72aae1994..2c5c8f754 100644
--- a/frontend/src/components/pages/search/components/FilterBar/FilterField.tsx
+++ b/frontend/src/components/pages/search/components/FilterBar/FilterField.tsx
@@ -98,7 +98,7 @@ const FilterField: React.FC<Props> = ({
       />
       <div
         className={cn(
-          'fixed left-0 right-0 bg-white p-8 shadow-inner z-[101]',
+          'fixed left-0 right-0 top-headerAndFilterBar bg-white p-8 shadow-inner z-[101]',
           expanded ? 'block' : 'hidden',
         )}
       >
diff --git a/frontend/src/components/pages/search/components/FilterBar/index.tsx b/frontend/src/components/pages/search/components/FilterBar/index.tsx
index 19452779b..38d7774a3 100644
--- a/frontend/src/components/pages/search/components/FilterBar/index.tsx
+++ b/frontend/src/components/pages/search/components/FilterBar/index.tsx
@@ -36,7 +36,7 @@ const FilterBar: React.FC<Props> = ({
   const { FILTERS_CATEGORIES } = useFilterBar();
 
   return (
-    <div className="flex items-center shadow-lg bg-white z-20 border-l border-gresySoft">
+    <div className="sticky top-desktopHeader flex items-center shadow-lg bg-white z-20 border-l border-gresySoft">
       <div className="inline-block ml-4 mr-4 flex items-center">
         <Filter size={24} className="text-primary1" aria-hidden />
         <span className="uppercase text-primary1 ml-2">

From 467bde78d975bc79125088abcc209a7d771321a7 Mon Sep 17 00:00:00 2001
From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com>
Date: Wed, 9 Oct 2024 17:10:52 +0200
Subject: [PATCH 4/7] Create useBrowserNavigationDetection hook

---
 .../hooks/useBrowserNavigationDetection.ts    | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 frontend/src/hooks/useBrowserNavigationDetection.ts

diff --git a/frontend/src/hooks/useBrowserNavigationDetection.ts b/frontend/src/hooks/useBrowserNavigationDetection.ts
new file mode 100644
index 000000000..33b78e8ce
--- /dev/null
+++ b/frontend/src/hooks/useBrowserNavigationDetection.ts
@@ -0,0 +1,38 @@
+import { useRouter } from 'next/router';
+import { useEffect, useRef, useState } from 'react';
+
+// Returns “true” if the page is displayed using the browser's "back" or "forward" buttons
+const useBrowserNavigationDetection = () => {
+  const router = useRouter();
+  const isNavigatedByBrowserRef = useRef(false);
+  const [isNavigatedByBrowser, setNavigatedByBrowser] = useState(false);
+
+  useEffect(() => {
+    router.beforePopState(() => {
+      isNavigatedByBrowserRef.current = true;
+      return true;
+    });
+
+    const handleRouteChangeStart = () => {
+      // the router.beforePopState() method is always triggered first
+      // so we have to play with ref to wait for “routeChangeStart” to be triggered
+      if (isNavigatedByBrowserRef.current) {
+        setNavigatedByBrowser(true);
+        isNavigatedByBrowserRef.current = false;
+      } else {
+        setNavigatedByBrowser(false);
+      }
+    };
+
+    router.events.on('routeChangeStart', handleRouteChangeStart);
+
+    return () => {
+      router.beforePopState(() => true);
+      router.events.off('routeChangeStart', handleRouteChangeStart);
+    };
+  }, [router]);
+
+  return isNavigatedByBrowser;
+};
+
+export default useBrowserNavigationDetection;

From 830ac956b81164d5ae21e53037b1b4930db8757d Mon Sep 17 00:00:00 2001
From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com>
Date: Wed, 9 Oct 2024 17:15:09 +0200
Subject: [PATCH 5/7] UseBbox returns a bounds props instead of bboxSate

---
 frontend/src/components/pages/search/Search.tsx     | 13 +++++++++++--
 .../components/pages/search/components/useBbox.ts   | 10 +++++-----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/pages/search/Search.tsx b/frontend/src/components/pages/search/Search.tsx
index 6c86567c7..de4952c52 100644
--- a/frontend/src/components/pages/search/Search.tsx
+++ b/frontend/src/components/pages/search/Search.tsx
@@ -47,7 +47,7 @@ export const SearchUI: React.FC<Props> = ({ language }) => {
   const { subMenuState, selectFilter, hideSubMenu, currentFilterId } = useFilterSubMenu();
   const { menuState, displayMenu, hideMenu, filtersList } = useFilterMenu(selectFilter);
 
-  const { bboxState, handleMoveMap } = useBbox();
+  const { bounds, handleMoveMap } = useBbox();
 
   const isMobile = useMediaPredicate('(max-width: 1024px)');
 
@@ -75,7 +75,16 @@ export const SearchUI: React.FC<Props> = ({ language }) => {
     mobileMapState,
     displayMobileMap,
     hideMobileMap,
-  } = useTrekResults({ filtersState, textFilterState, bboxState, dateFilter, page }, language);
+  } = useTrekResults(
+    {
+      filtersState,
+      textFilterState,
+      bboxState: bounds?.toBBoxString() ?? null,
+      dateFilter,
+      page,
+    },
+    language,
+  );
 
   const { pageTitle, resultsTitle } = useTitle(filtersState, searchResults?.resultsNumber);
 
diff --git a/frontend/src/components/pages/search/components/useBbox.ts b/frontend/src/components/pages/search/components/useBbox.ts
index 5502f27f9..8a5e75f5f 100644
--- a/frontend/src/components/pages/search/components/useBbox.ts
+++ b/frontend/src/components/pages/search/components/useBbox.ts
@@ -3,19 +3,19 @@ import { getGlobalConfig } from 'modules/utils/api.config';
 import { useState } from 'react';
 
 interface ReturnType {
-  bboxState: string | null;
+  bounds: LatLngBounds | null;
   handleMoveMap: (bounds: LatLngBounds) => void;
 }
 
 const useBbox = (): ReturnType => {
-  const [bboxState, setBboxState] = useState<string | null>(null);
+  const [bounds, setBboxState] = useState<LatLngBounds | null>(null);
 
-  const handleMoveMap = (bounds: LatLngBounds) => {
-    if (getGlobalConfig().enableSearchByMap) setBboxState(bounds.toBBoxString());
+  const handleMoveMap = (nextBounds: LatLngBounds) => {
+    if (getGlobalConfig().enableSearchByMap) setBboxState(nextBounds);
   };
 
   return {
-    bboxState,
+    bounds,
     handleMoveMap,
   };
 };

From 1e40d636236b46cf78c2576e4b850076f1b04890 Mon Sep 17 00:00:00 2001
From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com>
Date: Thu, 10 Oct 2024 12:22:28 +0200
Subject: [PATCH 6/7] Create BoundsHandler component

---
 .../Map/SearchMap/BoundsHandler.tsx           | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 frontend/src/components/Map/SearchMap/BoundsHandler.tsx

diff --git a/frontend/src/components/Map/SearchMap/BoundsHandler.tsx b/frontend/src/components/Map/SearchMap/BoundsHandler.tsx
new file mode 100644
index 000000000..b2eecdd71
--- /dev/null
+++ b/frontend/src/components/Map/SearchMap/BoundsHandler.tsx
@@ -0,0 +1,21 @@
+import { LatLngBounds } from 'leaflet';
+import { useEffect } from 'react';
+import { useMap } from 'react-leaflet';
+
+interface Props {
+  bounds: LatLngBounds | null;
+}
+
+const BoundsHandler: React.FC<Props> = ({ bounds }) => {
+  const map = useMap();
+
+  useEffect(() => {
+    if (bounds) {
+      map.fitBounds(bounds);
+    }
+  }, [bounds, map]);
+
+  return null;
+};
+
+export default BoundsHandler;

From ba39b89fceac277a5e710e9446bc27a06a7e8352 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 7/7] 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>
   );