fix: add filter when retrieving beaches

Author: maximeperraultdev

frontend/cypress/e2e/main_window/search_places.spec.ts

@@ -14,7 +14,7 @@ context('Search Places', () => {
   })
 
   it('A user can search a beach and zoom on it when it is selected', () => {
-    cy.getDataCy('location-search-input').type("Plan d'eau, Étel, 56410", { delay: 400 })
+    cy.getDataCy('location-search-input').type("plan d'eau, étel, 56410", { delay: 400 })
     cy.get('.rs-auto-complete-item').first().click()
     cy.url().should('include', '/#@-356522.93,6049418.48,14.00')
   })

frontend/cypress/mappings/geoserver/beaches-search.json

@@ -1,7 +1,30 @@
 {
   "request": {
     "method": "GET",
-    "url": "/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=monitorenv:beaches&outputFormat=application/json&srsname=EPSG:4326"
+    "urlPathPattern": "/geoserver/wfs",
+    "queryParameters": {
+      "service": {
+        "equalTo": "WFS"
+      },
+      "version": {
+        "equalTo": "1.1.0"
+      },
+      "request": {
+        "equalTo": "GetFeature"
+      },
+      "typename": {
+        "equalTo": "monitorenv:beaches"
+      },
+      "outputFormat": {
+        "equalTo": "application/json"
+      },
+      "srsname": {
+        "equalTo": "EPSG:4326"
+      },
+      "CQL_FILTER": {
+        "matches": ".*plan.*eau.*étel.*56410.*"
+      }
+    }
   },
   "response": {
     "status": 200,
@@ -10,6 +33,6 @@
       "Access-Control-Allow-Origin": "*",
       "Access-Control-Allow-Methods": "*"
     },
-    "body": "{\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\",\"id\":\"beaches.1527\",\"geometry\":{\"type\":\"MultiPoint\",\"coordinates\":[[6.7288,43.3924]]},\"geometry_name\":\"geom\",\"properties\":{\"id\":1527,\"name\":\"La Galiote\",\"official_name\":\"Fréjus\",\"postcode\":\"83370\",\"insee\":\"83061\"},\"bbox\":[6.7288,43.3924,6.7288,43.3924]},{\"type\":\"Feature\",\"id\":\"beaches.789\",\"geometry\":{\"type\":\"MultiPoint\",\"coordinates\":[[-3.2027,47.6536]]},\"geometry_name\":\"geom\",\"properties\":{\"id\":789,\"name\":\"Plan D'eau\",\"official_name\":\"Étel\",\"postcode\":\"56410\",\"insee\":\"56055\"},\"bbox\":[-3.2027,47.6536,-3.2027,47.6536]},{\"type\":\"Feature\",\"id\":\"beaches.233\",\"geometry\":{\"type\":\"MultiPoint\",\"coordinates\":[[-2.347,47.2663]]},\"geometry_name\":\"geom\",\"properties\":{\"id\":233,\"name\":\"Plage Des Libraires\",\"official_name\":\"Pornichet\",\"postcode\":\"44380\",\"insee\":\"44132\"},\"bbox\":[-2.347,47.2663,-2.347,47.2663]},{\"type\":\"Feature\",\"id\":\"beaches.2009\",\"geometry\":{\"type\":\"MultiPoint\",\"coordinates\":[[55.2234,-21.0534]]},\"geometry_name\":\"geom\",\"properties\":{\"id\":2009,\"name\":\"Plage Des Roches Noires\",\"official_name\":\"Saint-Paul\",\"postcode\":\"97460\",\"insee\":\"97415\"},\"bbox\":[55.2234,-21.0534,55.2234,-21.0534]}],\"totalFeatures\":4,\"numberMatched\":4,\"numberReturned\":4,\"timeStamp\":\"2025-08-26T07:12:52.375Z\",\"crs\":{\"type\":\"name\",\"properties\":{\"name\":\"urn:ogc:def:crs:EPSG::4326\"}},\"bbox\":[-3.2027,-21.0534,55.2234,47.6536]}"
+    "body": "{\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\",\"id\":\"beaches.789\",\"geometry\":{\"type\":\"MultiPoint\",\"coordinates\":[[-3.2027,47.6536]]},\"geometry_name\":\"geom\",\"properties\":{\"id\":789,\"name\":\"Plan D'eau\",\"official_name\":\"Étel\",\"postcode\":\"56410\",\"insee\":\"56055\"},\"bbox\":[-3.2027,47.6536,-3.2027,47.6536]}],\"totalFeatures\":1,\"numberMatched\":1,\"numberReturned\":1,\"timeStamp\":\"2025-08-26T07:12:52.375Z\",\"crs\":{\"type\":\"name\",\"properties\":{\"name\":\"urn:ogc:def:crs:EPSG::4326\"}},\"bbox\":[-3.2027,47.6536,-3.2027,47.6536]}"
   }
 }

frontend/src/api/beachesAPI.ts

@@ -6,14 +6,34 @@ export function throwIrretrievableBeachesError(e) {
   throw Error(`Nous n'avons pas pu récupérer les plages: ${e}`)
 }
 
-export const getBeachesFromAPI = async () => {
+function sanitizeQuery(query: string) {
+  return query.replace(/'/g, "''")
+}
+
+export const getBeachesFromAPI = async (query: string | undefined) => {
   const geoserverURL = import.meta.env.FRONTEND_GEOSERVER_REMOTE_URL
 
+  if (!query) {
+    return Promise.resolve([])
+  }
+
+  const searchQueries = query
+    .trim()
+    .split(/[\s,.\-;:()]+/)
+    .filter(t => t.length > 0)
+
+  const conditions = searchQueries.map(searchQuery => {
+    const sanitizedQuery = sanitizeQuery(searchQuery)
+
+    return `(name ILIKE '%${sanitizedQuery}%' OR official_name ILIKE '%${sanitizedQuery}%' OR postcode ILIKE '%${sanitizedQuery}%')`
+  })
+  const cqlFilter = conditions.join(' AND ')
+
   return fetch(
     `${geoserverURL}/geoserver/wfs?service=WFS&` +
       `version=1.1.0&request=GetFeature&typename=${
         import.meta.env.FRONTEND_GEOSERVER_NAMESPACE
-      }:beaches&outputFormat=application/json&srsname=${WSG84_PROJECTION}`
+      }:beaches&outputFormat=application/json&srsname=${WSG84_PROJECTION}&CQL_FILTER=${encodeURIComponent(cqlFilter)}`
   )
     .then(response => {
       if (response.status === OK) {

frontend/src/features/LocateOnMap/SearchLocation.tsx

@@ -16,7 +16,7 @@ export function SearchLocation() {
   const locateOnMap = useAppSelector(state => state.map.locateOnMap)
   const [searchedLocation, setSearchedLocation] = useState<string | undefined>(undefined)
   const results = useGooglePlacesAPI(searchedLocation)
-  const { beaches, options: beachesOptions } = useBeaches()
+  const { beaches, options: beachesOptions } = useBeaches(searchedLocation)
 
   const handleSelectLocation = async (location: { id: string; name: string } | undefined) => {
     if (!location || !location?.id) {

frontend/src/features/LocateOnMap/hook/useBeaches.ts

@@ -6,12 +6,12 @@ type Options = {
   value: string
 }
 
-export const useBeaches = () => {
+export const useBeaches = (query: string | undefined) => {
   const [options, setOptions] = useState<Options[]>([])
   const [beaches, setBeaches] = useState<any[]>([])
 
   useEffect(() => {
-    getBeachesFromAPI()
+    getBeachesFromAPI(query)
       .then(values => {
         setBeaches(values)
         setOptions(
@@ -33,7 +33,7 @@ export const useBeaches = () => {
       .catch(() => {
         setOptions([])
       })
-  }, [])
+  }, [query])
 
   return { beaches, options }
 }