handle filtered markers
This commit is contained in:
parent
72c1c384a1
commit
f96d01e2b8
|
@ -136,7 +136,7 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw, onFilteredDataChang
|
||||||
const [filteredData, setFilteredData] = useState<HostOfferLookupTableDataType[]>([]);
|
const [filteredData, setFilteredData] = useState<HostOfferLookupTableDataType[]>([]);
|
||||||
const [filterValue, setFilterValue] = useState<TypeFilterValue>(defaultFilterValue);
|
const [filterValue, setFilterValue] = useState<TypeFilterValue>(defaultFilterValue);
|
||||||
|
|
||||||
const filterValueChangeHandler = useCallback((_filterValue: TypeFilterValue) => {
|
const filterValueChangeHandler = useCallback((_filterValue?: TypeFilterValue) => {
|
||||||
const data = !_filterValue
|
const data = !_filterValue
|
||||||
? dataSource
|
? dataSource
|
||||||
: extendedFilter(
|
: extendedFilter(
|
||||||
|
@ -144,7 +144,7 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw, onFilteredDataChang
|
||||||
_filterValue,
|
_filterValue,
|
||||||
columnsRaw
|
columnsRaw
|
||||||
)
|
)
|
||||||
setFilterValue(_filterValue);
|
_filterValue && setFilterValue(_filterValue);
|
||||||
setFilteredData(data)
|
setFilteredData(data)
|
||||||
onFilteredDataChange && onFilteredDataChange(data)
|
onFilteredDataChange && onFilteredDataChange(data)
|
||||||
}, [dataSource])
|
}, [dataSource])
|
||||||
|
@ -160,6 +160,7 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw, onFilteredDataChang
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
data && setDataSource(data)
|
data && setDataSource(data)
|
||||||
|
filterValueChangeHandler()
|
||||||
//setDataSource((/*data_rw?.get_rw || */ data_ro?.get_offers || []).map(v => transformValue(v, columnsRaw)))
|
//setDataSource((/*data_rw?.get_rw || */ data_ro?.get_offers || []).map(v => transformValue(v, columnsRaw)))
|
||||||
}, [data_ro, data_rw]);
|
}, [data_ro, data_rw]);
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,13 @@
|
||||||
import React, { useEffect } from 'react'
|
import React, {useCallback, useEffect} from 'react'
|
||||||
import { useGetOffersQuery, useGetRwQuery } from "../../codegen/generates"
|
import { useGetOffersQuery, useGetRwQuery } from "../../codegen/generates"
|
||||||
import HostOfferLookupTable, {HostOfferLookupTableProps} from "./HostOfferLookupTable"
|
import HostOfferLookupTable, {HostOfferLookupTableDataType, HostOfferLookupTableProps} from "./HostOfferLookupTable"
|
||||||
import { Box } from "@mui/material"
|
import { Box } from "@mui/material"
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { Login, useAuthStore } from '../Login'
|
import { Login, useAuthStore } from '../Login'
|
||||||
import { useLeafletStore } from './LeafletStore'
|
import {Marker, useLeafletStore} from './LeafletStore'
|
||||||
import { filterUndefOrNull } from '../util/notEmpty'
|
import { filterUndefOrNull } from '../util/notEmpty'
|
||||||
import { haversine_distance } from '../util/distance'
|
import { haversine_distance } from '../util/distance'
|
||||||
|
import {marker} from "leaflet";
|
||||||
|
|
||||||
type HostOfferLookupWrapperProps = Partial<HostOfferLookupTableProps>
|
type HostOfferLookupWrapperProps = Partial<HostOfferLookupTableProps>
|
||||||
|
|
||||||
|
@ -14,6 +15,16 @@ function floor(v: number|undefined) {
|
||||||
return v && Math.floor(v)
|
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 HostOfferLookupWrapper = (props: HostOfferLookupWrapperProps) => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const auth = useAuthStore()
|
const auth = useAuthStore()
|
||||||
|
@ -25,20 +36,27 @@ const HostOfferLookupWrapper = (props: HostOfferLookupWrapperProps) => {
|
||||||
const {data: data_ro} = queryResult_ro
|
const {data: data_ro} = queryResult_ro
|
||||||
const {data: data_rw} = queryResult_rw
|
const {data: data_rw} = queryResult_rw
|
||||||
|
|
||||||
const {setMarkers, center} = useLeafletStore()
|
const {setMarkers, center, setFilteredMarkers} = useLeafletStore()
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const markers = data_ro?.get_offers?.map(row => (row.id && row.place_lon && row.place_lat
|
const markers = filterUndefOrNull( data_ro?.get_offers?.map(makeMarker) )
|
||||||
&& ({id: row.id,
|
|
||||||
lat: row.place_lat,
|
|
||||||
lng: row.place_lon,
|
|
||||||
radius: 1000, // TODO
|
|
||||||
content: 'TODO'}) || undefined))
|
|
||||||
setMarkers(filterUndefOrNull(markers))
|
setMarkers(filterUndefOrNull(markers))
|
||||||
}, [data_ro])
|
}, [data_ro])
|
||||||
|
|
||||||
const data_ro_withDistance = data_ro?.get_offers?.map(r => ({...r,
|
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))}))
|
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 <>
|
return <>
|
||||||
<Box sx={{
|
<Box sx={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
@ -59,6 +77,7 @@ const HostOfferLookupWrapper = (props: HostOfferLookupWrapperProps) => {
|
||||||
data_ro={data_ro_withDistance}
|
data_ro={data_ro_withDistance}
|
||||||
data_rw={data_rw?.get_rw}
|
data_rw={data_rw?.get_rw}
|
||||||
refetch_rw={queryResult_rw.refetch}
|
refetch_rw={queryResult_rw.refetch}
|
||||||
|
onFilteredDataChange={handleFilteredDataChange}
|
||||||
/>
|
/>
|
||||||
</div>}
|
</div>}
|
||||||
</Box>
|
</Box>
|
||||||
|
|
|
@ -14,11 +14,15 @@ export interface LeafletState {
|
||||||
setCenter: (center: L.LatLng) => void
|
setCenter: (center: L.LatLng) => void
|
||||||
markers: Marker[]
|
markers: Marker[]
|
||||||
setMarkers: (markers: Marker[]) => void
|
setMarkers: (markers: Marker[]) => void
|
||||||
|
filteredMarkers: Marker[]
|
||||||
|
setFilteredMarkers: (filteredMarkers: Marker[]) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useLeafletStore = create<LeafletState>(set => ({
|
export const useLeafletStore = create<LeafletState>(set => ({
|
||||||
center: null,
|
center: null,
|
||||||
setCenter: center => set( _orig => ({center}) ),
|
setCenter: center => set( _orig => ({center}) ),
|
||||||
markers: [],
|
markers: [],
|
||||||
setMarkers: markers => set( _orig => ({markers}) )
|
setMarkers: markers => set( _orig => ({markers}) ),
|
||||||
|
filteredMarkers: [],
|
||||||
|
setFilteredMarkers: filteredMarkers => set( _orig => ({filteredMarkers}) )
|
||||||
}))
|
}))
|
||||||
|
|
Loading…
Reference in New Issue
Block a user