fix: add filter when retrieving beaches

Author: maximeperraultdev

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 }
 }