beherbergung/frontend/search/components/ngo/HostOfferLookupWrapper.tsx

import React from 'react'
import { Auth, useGetOffersQuery } from "../../codegen/generates"
import testAuth from '../util/testAuth.json'
import HostOfferLookupTable from "./HostOfferLookupTable"
import { Box } from "@mui/material"
import { useTranslation } from 'react-i18next'

type HostLookupWrapperProps = Record<string, never>

const HostOfferLookupWrapper = ({}: HostLookupWrapperProps) => {
  const { t } = useTranslation()

  const staleTimeMinutes = 60  // hotfix till table settings by user (columns width, filters, sort options, …) are persisted
  const {data, isFetching, error} = useGetOffersQuery({auth: testAuth as Auth}, {staleTime: staleTimeMinutes * 60 * 1000})

  return <>
    { isFetching && <p>{ t('loading…') }</p> }
    { error && <p>{ t('An error occurred while trying to get data from the backend.') }</p> }
    { data && !data.get_offers && <p>{ t('Seems like you have no permissions. Please try to login again.') }</p> }
    { data?.get_offers && <Box sx={{
        display: 'flex',
        alignItems: 'stretch',
        flexDirection: 'column',
        height: '100vh'}}>
        <div
          style={{flex: '1 1', height: '100%'}}>
            <HostOfferLookupTable data={data}/>
        </div>
    </Box> }
  </>
}

export default HostOfferLookupWrapper