Merge pull request #188 from technologiestiftung/refactor/remove-loca…

…tion-search

refactor(Search): Remove address search component and logic

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<MapType> = ({
   onClickAnywhere = () => undefined,
   onMoveStart = () => undefined,
   highlightedCenter,
-  searchCenter,
 }) => {
   const { query, push } = useRouter()
   const texts = useTexts()
@@ -96,15 +93,6 @@ export const FacilitiesMap: FC<MapType> = ({
 
   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)

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<MapHeaderPropsType> = ({
   filterSidebarIsOpened,
   setFilterSidebarIsOpened,
-  handleSearchResult,
   listViewOpen,
 }) => {
   const [urlState] = useUrlState()
@@ -47,7 +43,6 @@ export const MapHeader: FC<MapHeaderPropsType> = ({
       <div
         className={classNames(
           `flex fixed top-4 right-4 transition-transform z-30 md:gap-5`,
-          `w-full max-w-[calc(100vw-2rem)] md:max-w-xs lg:max-w-sm justify-between`,
           filterSidebarIsOpened
             ? `2xl:-translate-x-sidebarW`
             : `2xl:translate-x-0`
@@ -64,14 +59,6 @@ export const MapHeader: FC<MapHeaderPropsType> = ({
         >
           <House />
         </IconButtonLink>
-        <div
-          className={classNames(
-            'w-full',
-            listViewOpen && 'opacity-0 lg:opacity-100'
-          )}
-        >
-          <Search onSelectResult={handleSearchResult} />
-        </div>
 
         <button
           onClick={() => setFilterSidebarIsOpened(!filterSidebarIsOpened)}

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'
@@ -30,14 +29,11 @@ export const MapLayout: FC<{
   const [mapCenter, setMapCenter] = useState<
     [lng: number, lat: number] | undefined
   >()
-  const [searchCenter, setSearchCenter] = useState<
-    [lng: number, lat: number] | undefined
-  >()
   const [selectedFacilities, setSelectedFacilities] = useState<
     MinimalRecordType[]
   >([])
   const [filterSidebarIsOpened, setFilterSidebarIsOpened] = useState(false)
-  const [urlState, setUrlState] = useUrlState()
+  const [urlState] = useUrlState()
   const [hasScrolled, setHasScrolled] = useState<boolean>(false)
   const isMobile = useIsMobile()
 
@@ -64,14 +60,6 @@ export const MapLayout: FC<{
     if (!records) return
   }
 
-  const handleSearchResult = (place: FeatureType): void => {
-    setSearchCenter(place.center)
-    setUrlState({
-      longitude: place.center[0],
-      latitude: place.center[1],
-    })
-  }
-
   useEffect(() => {
     setSelectedFacilities([])
     if (!query.id || typeof query.id !== 'string') {
@@ -105,7 +93,6 @@ export const MapLayout: FC<{
                 setSelectedFacilities([])
               }}
               highlightedCenter={mapCenter}
-              searchCenter={searchCenter}
             />
             {[selectedFacilities[0]].filter(Boolean).map(({ id }) => (
               <div
@@ -166,7 +153,6 @@ export const MapLayout: FC<{
         </aside>
         {!isFallback && showMapUi && (
           <MapHeader
-            handleSearchResult={handleSearchResult}
             filterSidebarIsOpened={filterSidebarIsOpened}
             setFilterSidebarIsOpened={setFilterSidebarIsOpened}
             listViewOpen={listViewOpen}

src/lib/hooks/useMaplibreMap.ts

@@ -10,8 +10,10 @@ export function useMaplibreMap(config: {
   minZoom: number
 }): Map | null {
   const map = useRef<Map>(null)
+  const mapIsInitialized = useRef<boolean>(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
   }, [])