handle filtered markers

frontend/search/components/ngo/HostOfferLookupTable.tsx

@@ -136,7 +136,7 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw, onFilteredDataChang
   const [filteredData, setFilteredData] = useState<HostOfferLookupTableDataType[]>([]);
   const [filterValue, setFilterValue] = useState<TypeFilterValue>(defaultFilterValue);
 
-  const filterValueChangeHandler = useCallback((_filterValue: TypeFilterValue) => {
+  const filterValueChangeHandler = useCallback((_filterValue?: TypeFilterValue) => {
     const data = !_filterValue
       ? dataSource
       : extendedFilter(
@@ -144,7 +144,7 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw, onFilteredDataChang
         _filterValue,
         columnsRaw
       )
-    setFilterValue(_filterValue);
+    _filterValue && setFilterValue(_filterValue);
     setFilteredData(data)
     onFilteredDataChange && onFilteredDataChange(data)
   }, [dataSource])
@@ -160,6 +160,7 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw, onFilteredDataChang
 
     // @ts-ignore
     data && setDataSource(data)
+    filterValueChangeHandler()
     //setDataSource((/*data_rw?.get_rw || */ data_ro?.get_offers || []).map(v => transformValue(v, columnsRaw)))
   }, [data_ro, data_rw]);
 

frontend/search/components/ngo/HostOfferLookupWrapper.tsx

@@ -1,12 +1,13 @@
-import React, { useEffect } from 'react'
+import React, {useCallback, useEffect} from 'react'
 import { useGetOffersQuery, useGetRwQuery } from "../../codegen/generates"
-import HostOfferLookupTable, {HostOfferLookupTableProps} from "./HostOfferLookupTable"
+import HostOfferLookupTable, {HostOfferLookupTableDataType, HostOfferLookupTableProps} from "./HostOfferLookupTable"
 import { Box } from "@mui/material"
 import { useTranslation } from 'react-i18next'
 import { Login, useAuthStore } from '../Login'
-import { useLeafletStore } from './LeafletStore'
+import {Marker, useLeafletStore} from './LeafletStore'
 import { filterUndefOrNull } from '../util/notEmpty'
 import { haversine_distance } from '../util/distance'
+import {marker} from "leaflet";
 
 type HostOfferLookupWrapperProps = Partial<HostOfferLookupTableProps>
 
@@ -14,6 +15,16 @@ function floor(v: number|undefined) {
   return v && Math.floor(v)
 }
 
+//type HostOfferLookupTableDataRowType = NonNullable<HostOfferLookupTableDataType>[number]
+const makeMarker: (row: { id?: string | null; place_lon?: number | null; place_lat?: number | null }) => Marker | undefined =
+  ({ id, place_lon, place_lat }) => id && place_lon && place_lat && ({
+    id: id,
+    lat: place_lat,
+    lng: place_lon,
+    radius: 1000,  // TODO
+    content: 'TODO'
+  }) || undefined;
+
 const HostOfferLookupWrapper = (props: HostOfferLookupWrapperProps) => {
   const { t } = useTranslation()
   const auth = useAuthStore()
@@ -25,20 +36,27 @@ const HostOfferLookupWrapper = (props: HostOfferLookupWrapperProps) => {
   const {data: data_ro} = queryResult_ro
   const {data: data_rw} = queryResult_rw
 
-  const {setMarkers, center} = useLeafletStore()
+  const {setMarkers, center, setFilteredMarkers} = useLeafletStore()
   useEffect(() => {
-    const markers = data_ro?.get_offers?.map(row => (row.id && row.place_lon && row.place_lat
-                                                            && ({id: row.id,
-                                                                 lat: row.place_lat,
-                                                                 lng: row.place_lon,
-                                                                 radius: 1000,  // TODO
-                                                                 content: 'TODO'}) || undefined))
+    const markers = filterUndefOrNull( data_ro?.get_offers?.map(makeMarker) )
+
+
     setMarkers(filterUndefOrNull(markers))
   }, [data_ro])
 
   const data_ro_withDistance = data_ro?.get_offers?.map(r => ({...r,
                                                                place_distance: floor(haversine_distance(center?.lat, center?.lng, r.place_lat, r.place_lon))}))
 
+  const handleFilteredDataChange = useCallback(
+    (data:  HostOfferLookupTableDataType[]) => {
+      // @ts-ignore
+      const _filteredMarkers = filterUndefOrNull( data.map(d => d && makeMarker(d)))
+      console.log({_filteredMarkers})
+      //setFilteredMarkers(_filteredMarkers)
+    },
+    [setFilteredMarkers],
+  );
+
   return <>
     <Box sx={{
         display: 'flex',
@@ -59,6 +77,7 @@ const HostOfferLookupWrapper = (props: HostOfferLookupWrapperProps) => {
               data_ro={data_ro_withDistance}
               data_rw={data_rw?.get_rw}
               refetch_rw={queryResult_rw.refetch}
+              onFilteredDataChange={handleFilteredDataChange}
             />
         </div>}
     </Box>

frontend/search/components/ngo/LeafletStore.tsx

@@ -14,11 +14,15 @@ export interface LeafletState {
   setCenter: (center: L.LatLng) => void
   markers: Marker[]
   setMarkers: (markers: Marker[]) => void
+  filteredMarkers: Marker[]
+  setFilteredMarkers: (filteredMarkers: Marker[]) => void
 }
 
 export const useLeafletStore = create<LeafletState>(set => ({
   center: null,
   setCenter: center => set( _orig => ({center}) ),
   markers: [],
-  setMarkers: markers => set( _orig => ({markers}) )
+  setMarkers: markers => set( _orig => ({markers}) ),
+  filteredMarkers: [],
+  setFilteredMarkers: filteredMarkers => set( _orig => ({filteredMarkers}) )
 }))