Skip to content

Commit

Permalink
Display search map bounds of user's preference
Browse files Browse the repository at this point in the history
  • Loading branch information
dtrucs committed Oct 17, 2024
1 parent b937dec commit c0a7dc3
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 5 deletions.
3 changes: 1 addition & 2 deletions frontend/src/components/Map/SearchMap/MapContainer.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -28,4 +27,4 @@ const MapContainer: React.FC<Props> = ({ children, whenCreated, hasZoomControl =
);
};

export default memo(MapContainer, () => true);
export default MapContainer;
5 changes: 5 additions & 0 deletions frontend/src/components/Map/SearchMap/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }[];
Expand All @@ -35,6 +37,7 @@ const SearchMap: React.FC<PropsType> = props => {
};

const { setMapInstance } = useTileLayer();
const { searchBbox, isNavigatedByBrowser } = useListAndMapContext();

return (
<MapContainer whenCreated={setMapInstance} hasZoomControl={props.hasZoomControl}>
Expand All @@ -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} />
Expand Down
12 changes: 10 additions & 2 deletions frontend/src/components/pages/search/Search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down
23 changes: 22 additions & 1 deletion frontend/src/modules/map/ListAndMapContext.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,49 @@
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);

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>
);
Expand Down

0 comments on commit c0a7dc3

Please sign in to comment.