From f96d01e2b896263c5eb40827bb6373fd8ba36f77 Mon Sep 17 00:00:00 2001 From: winzlieb Date: Mon, 14 Mar 2022 23:34:12 +0100 Subject: [PATCH] handle filtered markers --- .../components/ngo/HostOfferLookupTable.tsx | 5 ++- .../components/ngo/HostOfferLookupWrapper.tsx | 39 ++++++++++++++----- .../search/components/ngo/LeafletStore.tsx | 6 ++- 3 files changed, 37 insertions(+), 13 deletions(-) diff --git a/frontend/search/components/ngo/HostOfferLookupTable.tsx b/frontend/search/components/ngo/HostOfferLookupTable.tsx index 2ec642b..cdb8f34 100644 --- a/frontend/search/components/ngo/HostOfferLookupTable.tsx +++ b/frontend/search/components/ngo/HostOfferLookupTable.tsx @@ -136,7 +136,7 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw, onFilteredDataChang const [filteredData, setFilteredData] = useState([]); const [filterValue, setFilterValue] = useState(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]); diff --git a/frontend/search/components/ngo/HostOfferLookupWrapper.tsx b/frontend/search/components/ngo/HostOfferLookupWrapper.tsx index 831b5cb..23af1fa 100644 --- a/frontend/search/components/ngo/HostOfferLookupWrapper.tsx +++ b/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 @@ -14,6 +15,16 @@ function floor(v: number|undefined) { return v && Math.floor(v) } +//type HostOfferLookupTableDataRowType = NonNullable[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 <> { data_ro={data_ro_withDistance} data_rw={data_rw?.get_rw} refetch_rw={queryResult_rw.refetch} + onFilteredDataChange={handleFilteredDataChange} /> } diff --git a/frontend/search/components/ngo/LeafletStore.tsx b/frontend/search/components/ngo/LeafletStore.tsx index ac53dc5..ec9b811 100644 --- a/frontend/search/components/ngo/LeafletStore.tsx +++ b/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(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}) ) }))