79 lines
3.1 KiB
TypeScript
79 lines
3.1 KiB
TypeScript
import React, {useCallback, useEffect} from 'react'
|
|
import { useGetOffersQuery, useGetRwQuery } from "../../codegen/generates"
|
|
import HostOfferLookupTable, {HostOfferLookupTableDataType, HostOfferLookupTableProps} from "./HostOfferLookupTable"
|
|
import { Box } from "@mui/material"
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Login, useAuthStore } from '../Login'
|
|
import {Marker, useLeafletStore} from './LeafletStore'
|
|
import { filterUndefOrNull } from '../util/notEmpty'
|
|
import { haversine_distance } from '../util/distance'
|
|
import {marker} from "leaflet";
|
|
|
|
type HostOfferLookupWrapperProps = Partial<HostOfferLookupTableProps>
|
|
|
|
//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()
|
|
|
|
const staleTimeMinutes_ro = 5
|
|
const staleTimeMinutes_rw = 1
|
|
const queryResult_ro = useGetOffersQuery({auth}, {enabled: !!auth.jwt, staleTime: staleTimeMinutes_ro * 60 * 1000})
|
|
const queryResult_rw = useGetRwQuery({auth}, {enabled: !!auth.jwt, staleTime: staleTimeMinutes_rw * 60 * 1000})
|
|
const {data: data_ro} = queryResult_ro
|
|
const {data: data_rw} = queryResult_rw
|
|
|
|
const {setMarkers, center, setFilteredMarkers} = useLeafletStore()
|
|
useEffect(() => {
|
|
const markers = filterUndefOrNull( data_ro?.get_offers?.map(makeMarker) )
|
|
setMarkers(filterUndefOrNull(markers))
|
|
}, [data_ro, setMarkers])
|
|
|
|
const handleFilteredDataChange = useCallback(
|
|
(data: HostOfferLookupTableDataType[]) => {
|
|
// @ts-ignore
|
|
const _filteredMarkers = filterUndefOrNull( data.map(d => d && makeMarker(d)))
|
|
setFilteredMarkers(_filteredMarkers)
|
|
},
|
|
[setFilteredMarkers],
|
|
);
|
|
|
|
return <>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
alignItems: 'stretch',
|
|
flexDirection: 'column',
|
|
height: '100%'}}>
|
|
<div style={{minHeight: '2em', display: 'flex'}}>
|
|
{ (queryResult_ro.isFetching || queryResult_rw.isFetching) && t('loading…') }
|
|
{ (queryResult_ro.error || queryResult_rw.error) && t('An error occurred while trying to get data from the backend.') }
|
|
{ (data_ro && !data_ro.get_offers || data_rw && !data_rw.get_rw)
|
|
&& t('Seems like you have no permissions. Please try to login again.') }
|
|
<Login/>
|
|
</div>
|
|
{data_ro && <div
|
|
style={{flex: '1 1', height: '100%'}}>
|
|
<HostOfferLookupTable
|
|
{...props}
|
|
data_ro={data_ro.get_offers}
|
|
data_rw={data_rw?.get_rw}
|
|
refetch_rw={queryResult_rw.refetch}
|
|
onFilteredDataChange={handleFilteredDataChange}
|
|
center={center || undefined}
|
|
/>
|
|
</div>}
|
|
</Box>
|
|
</>
|
|
}
|
|
|
|
export default HostOfferLookupWrapper
|