From cafc041aa0fc0eab846e53335db0d76472e8460b Mon Sep 17 00:00:00 2001 From: Lucas Vogel Date: Mon, 7 Aug 2023 10:12:07 +0200 Subject: [PATCH 1/3] fix(useMaplibreMap): Make sure only one map instance is created In react 18, `useEffect` calls are done twice to ensure applications are reliant to rerenders. This happens only locally, as a prevention measure. This is why it wasn't broken on deployed version but only locally. Thx to @dnsos for the tipp. We now make sure to track if a map was initialized and don't recreate an instance if so. We should make sure to test against double `useEffect` calls in the future. --- src/lib/hooks/useMaplibreMap.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/lib/hooks/useMaplibreMap.ts b/src/lib/hooks/useMaplibreMap.ts index 9f3386b4..bfefa383 100644 --- a/src/lib/hooks/useMaplibreMap.ts +++ b/src/lib/hooks/useMaplibreMap.ts @@ -10,8 +10,10 @@ export function useMaplibreMap(config: { minZoom: number }): Map | null { const map = useRef(null) + const mapIsInitialized = useRef(false) // Map setup (run only once on initial render) useEffect(() => { + if (mapIsInitialized.current) return // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore map.current = new Map({ @@ -24,6 +26,7 @@ export function useMaplibreMap(config: { minZoom: config.minZoom, maxZoom: config.maxZoom, }) + mapIsInitialized.current = true // eslint-disable-next-line react-hooks/exhaustive-deps }, []) From fcbe346a2fe448b4c7004d8e73689a8ab2804899 Mon Sep 17 00:00:00 2001 From: Lucas Vogel Date: Mon, 7 Aug 2023 11:34:55 +0200 Subject: [PATCH 2/3] refactor(Search): Remove address search component and logic --- src/components/Map/index.tsx | 12 ---- src/components/MapHeader.tsx | 13 ---- src/components/MapLayout.tsx | 15 +--- src/components/Search/Search.test.tsx | 98 --------------------------- src/components/Search/index.tsx | 84 ----------------------- src/lib/hooks/useMapSearchMarker.ts | 46 ------------- 6 files changed, 1 insertion(+), 267 deletions(-) delete mode 100644 src/components/Search/Search.test.tsx delete mode 100644 src/components/Search/index.tsx delete mode 100644 src/lib/hooks/useMapSearchMarker.ts diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx index fc13b669..bcf905c9 100644 --- a/src/components/Map/index.tsx +++ b/src/components/Map/index.tsx @@ -28,7 +28,6 @@ import { useOnMapFeatureMove } from '@lib/hooks/useOnMapFeatureMove' import { useMapUserGeolocationMarker } from '@lib/hooks/useMapUserGeolocationMarker' import { useInitialViewport } from '@lib/hooks/useInitialViewport' import { useMapHighlightMarker } from '@lib/hooks/useMapHighlightMarker' -import { useMapSearchMarker } from '@lib/hooks/useMapSearchMarker' import { useMaplibreMap } from '@lib/hooks/useMaplibreMap' import { useFiltersWithActiveProp } from '@lib/hooks/useFiltersWithActiveProp' import { @@ -47,7 +46,6 @@ interface MapType { * Also, a highlighted marker will be drawn to the map. */ highlightedCenter?: [longitude: number, latitude: number] - searchCenter?: [longitude: number, latitude: number] } const easeInOutQuad = (t: number): number => @@ -74,7 +72,6 @@ export const FacilitiesMap: FC = ({ onClickAnywhere = () => undefined, onMoveStart = () => undefined, highlightedCenter, - searchCenter, }) => { const { query, push } = useRouter() const texts = useTexts() @@ -96,15 +93,6 @@ export const FacilitiesMap: FC = ({ const [urlState, setUrlState] = useUrlState() - const highlightedSearchViewport = searchCenter - ? { - latitude: searchCenter[1], - longitude: searchCenter[0], - zoom: MAP_CONFIG.zoomedInZoom, - } - : null - useMapSearchMarker(map, highlightedSearchViewport) - const id = typeof query.id === 'string' ? parseInt(query.id, 10) : undefined const currentFacilityIdPageIsSpiderfied = id && isSpiderfied && spiderifier.current?.expandedIds.includes(id) diff --git a/src/components/MapHeader.tsx b/src/components/MapHeader.tsx index 17ce97e1..8b6ef461 100644 --- a/src/components/MapHeader.tsx +++ b/src/components/MapHeader.tsx @@ -1,23 +1,19 @@ import classNames from '@lib/classNames' -import { FeatureType } from '@lib/requests/geocode' import { useTexts } from '@lib/TextsContext' import { useUrlState } from '@lib/UrlStateContext' import { FC } from 'react' import { IconButtonLink } from './IconButton' import { House } from './icons/House' -import { Search } from './Search' interface MapHeaderPropsType { filterSidebarIsOpened: boolean listViewOpen: boolean setFilterSidebarIsOpened: (newState: boolean) => void - handleSearchResult: ((place: FeatureType) => void) | undefined } export const MapHeader: FC = ({ filterSidebarIsOpened, setFilterSidebarIsOpened, - handleSearchResult, listViewOpen, }) => { const [urlState] = useUrlState() @@ -47,7 +43,6 @@ export const MapHeader: FC = ({
= ({ > -
- -
- - ) - })} - -
- ) -} diff --git a/src/lib/hooks/useMapSearchMarker.ts b/src/lib/hooks/useMapSearchMarker.ts deleted file mode 100644 index 4b3bce2f..00000000 --- a/src/lib/hooks/useMapSearchMarker.ts +++ /dev/null @@ -1,46 +0,0 @@ -import classNames from '@lib/classNames' -import { ViewportType } from '@lib/types/map' -import { LngLatLike, Map, Marker } from 'maplibre-gl' -import { useEffect, useRef } from 'react' - -export function useMapSearchMarker( - map: Map | null, - searchViewport: ViewportType | null -): void { - const highlightedSearchMarker = useRef(null) - useEffect(() => { - if (!map) return - if (!searchViewport?.latitude) { - // Without a searchCenter we want to remove any highlightedSearchMarker: - highlightedSearchMarker && highlightedSearchMarker.current?.remove() - return - } else { - // Remove possibly existent markers: - highlightedSearchMarker.current?.remove() - - const customMarker = document.createElement('div') - customMarker.className = classNames('w-8 h-8 bg-norepeat') - customMarker.style.backgroundImage = 'url("/images/search_geopin.svg")' - - const searchCenter = [ - searchViewport.longitude, - searchViewport.latitude, - ] as LngLatLike - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - highlightedSearchMarker.current = new Marker(customMarker) - .setLngLat(searchCenter) - .addTo(map) - - map.easeTo({ - center: searchCenter, - zoom: searchViewport.zoom, - }) - } - }, [ - map, - searchViewport?.latitude, - searchViewport?.longitude, - searchViewport?.zoom, - ]) -} From b18609355f08b9cb1f92ff556667fe788842ccc7 Mon Sep 17 00:00:00 2001 From: Lucas Vogel Date: Mon, 7 Aug 2023 11:53:59 +0200 Subject: [PATCH 3/3] chore(MapLayout): Remove unused type --- src/components/MapLayout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MapLayout.tsx b/src/components/MapLayout.tsx index 9ce2b47c..45250c5d 100644 --- a/src/components/MapLayout.tsx +++ b/src/components/MapLayout.tsx @@ -1,4 +1,3 @@ -import { FeatureType } from '@lib/requests/geocode' import { FC, useEffect, useState } from 'react' import { FacilitiesMap } from './Map' import classNames from '@lib/classNames'