feat: add location search to new map

ONEARMY · Sep 17, 2024 · 055430a · 055430a
1 parent b4b49fe
commit 055430a
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 8 deletions.
diff --git a/packages/cypress/src/integration/map.spec.ts b/packages/cypress/src/integration/map.spec.ts
@@ -88,11 +88,19 @@ describe('[Map]', () => {
         .should('have.attr', 'href')
         .and('include', `/u/${userId}`)
     })
-    cy.get('[data-cy=FilterList-ButtonRight]').last().click().click().click()
+    cy.get('[data-cy=FilterList-ButtonRight]').last().click().click()
     cy.get('[data-cy=MapListFilter]').last().click()
 
     cy.step('Mobile list view can be hidden')
     cy.get('[data-cy="ShowMapButton"]').click()
     cy.get('[data-cy="CardList-mobile"]').should('not.be.visible')
+
+    cy.step('The whole map can be searched')
+    cy.get('[data-cy="ShowMobileListButton"]').click()
+    cy.get('[data-cy=osm-geocoding]').last().click().type('london')
+    cy.wait(2000) // Needed for location response
+    cy.contains('London, Greater London, England, United Kingdom').click()
+    cy.wait(2000) // Needed for animation
+    cy.get('.icon-cluster-text').contains('3')
   })
 })
diff --git a/src/pages/Maps/Content/MapView/MapWithList.tsx b/src/pages/Maps/Content/MapView/MapWithList.tsx
@@ -44,11 +44,12 @@ interface IProps {
   center: ILatLng
   mapRef: React.RefObject<MapType>
   notification?: string
-  pins: IMapPin[]
-  zoom: number
   onBlur: () => void
   onPinClicked: (pin: IMapPin) => void
+  onLocationChange: (latlng: ILatLng) => void
+  pins: IMapPin[]
   setZoom: (arg: number) => void
+  zoom: number
 }
 
 export const MapWithList = (props: IProps) => {
@@ -58,10 +59,11 @@ export const MapWithList = (props: IProps) => {
     mapRef,
     notification,
     onBlur,
+    onLocationChange,
     onPinClicked,
     pins,
-    zoom,
     setZoom,
+    zoom,
   } = props
 
   const [activePinFilters, setActivePinFilters] = useState<string[]>([])
@@ -136,7 +138,9 @@ export const MapWithList = (props: IProps) => {
           pins={pins}
           activePinFilters={activePinFilters}
           availableFilters={availableFilters}
+          onBlur={onBlur}
           onFilterChange={onFilterChange}
+          onLocationChange={onLocationChange}
           filteredPins={filteredPins}
           viewport="desktop"
         />
@@ -171,11 +175,14 @@ export const MapWithList = (props: IProps) => {
           </Button>
         </Flex>
         <MapWithListHeader
-          pins={pins}
           activePinFilters={activePinFilters}
           availableFilters={availableFilters}
-          onFilterChange={onFilterChange}
           filteredPins={filteredPins}
+          onBlur={onBlur}
+          onFilterChange={onFilterChange}
+          onLocationChange={onLocationChange}
+          pins={pins}
+          setShowMobileList={setShowMobileList}
           viewport="mobile"
         />
       </Box>
@@ -193,6 +200,8 @@ export const MapWithList = (props: IProps) => {
         onclick={() => onBlur()}
         ondragend={handleLocationFilter}
         onzoomend={handleLocationFilter}
+        onresize={handleLocationFilter}
+        useFlyTo
       >
         <Flex
           sx={{

diff --git a/src/pages/Maps/Content/MapView/MapWithListHeader.tsx b/src/pages/Maps/Content/MapView/MapWithListHeader.tsx
@@ -1,14 +1,18 @@
-import { CardList, FilterList } from 'oa-components'
-import { Flex, Heading } from 'theme-ui'
+import { CardList, FilterList, OsmGeocoding } from 'oa-components'
+import { Box, Flex, Heading } from 'theme-ui'
 
+import type { ILatLng } from 'oa-shared'
 import type { IMapPin } from 'src/models'
 
 interface IProps {
   activePinFilters: string[]
   availableFilters: any
   filteredPins: IMapPin[] | null
+  onBlur: () => void
   onFilterChange: (label: string) => void
+  onLocationChange: (latlng: ILatLng) => void
   pins: IMapPin[]
+  setShowMobileList?: (set: boolean) => void
   viewport: 'desktop' | 'mobile'
 }
 
@@ -17,8 +21,11 @@ export const MapWithListHeader = (props: IProps) => {
     activePinFilters,
     availableFilters,
     filteredPins,
+    onBlur,
     onFilterChange,
+    onLocationChange,
     pins,
+    setShowMobileList,
     viewport,
   } = props
   const isMobile = viewport === 'mobile'
@@ -45,6 +52,21 @@ export const MapWithListHeader = (props: IProps) => {
           {pins && `${pins.length} members (and counting...)`}
         </Heading>
 
+        <Box sx={{ paddingX: 4 }}>
+          <OsmGeocoding
+            callback={({ lat, lon }) => {
+              if (lat && lon) {
+                onLocationChange({ lat, lng: lon })
+                onBlur()
+                setShowMobileList && setShowMobileList(false)
+              }
+            }}
+            countrycodes=""
+            acceptLanguage="en"
+            placeholder="Search for a place"
+          />
+        </Box>
+
         <FilterList
           activeFilters={activePinFilters}
           availableFilters={availableFilters}

diff --git a/src/pages/Maps/Maps.tsx b/src/pages/Maps/Maps.tsx
@@ -184,6 +184,7 @@ const MapsPage = observer(() => {
           center={center}
           mapRef={newMapRef}
           notification={notification}
+          onLocationChange={(latlng) => setCenter(latlng)}
           onPinClicked={(pin) => {
             getPinByUserId(pin._id)
           }}