1import { InboundsHostsFilters } from './filters'
 2import { InboundsSidebar } from './inbounds-sidebar'
 3import { HostsTable } from './table'
 4import { queryIds } from 'constants/query-ids';
 5import { useQuery } from '@tanstack/react-query';
 6import { fetchInbounds, fetchInboundHosts, useInbounds } from 'stores';
 7import { Grid, GridItem, } from '@chakra-ui/react';
 8import { useTranslation } from 'react-i18next';
 9import { Callout } from 'components/callout';
10
11export const InboundsHostsManager = () => {
12  const { selectedInbound } = useInbounds();
13
14  const { data: inbounds } = useQuery({
15    queryKey: [queryIds.inbounds],
16    initialData: [],
17    queryFn: () => {
18      return fetchInbounds();
19    }
20  });
21
22  const { data: hosts } = useQuery({
23    queryKey: [queryIds.hosts, selectedInbound?.id],
24    initialData: [],
25    queryFn: () => {
26      return fetchInboundHosts(selectedInbound?.id);
27    }
28  });
29
30  const { t } = useTranslation('noInboundsCallout');
31
32  return inbounds.length === 0 ?
33    <Callout header={t('noInboundsCallout.header')} body={t('noInboundsCallout.body')} />
34    : (
35      <>
36        <InboundsHostsFilters />
37        <Grid
38          templateColumns='repeat(4, 1fr)'
39          gap="3"
40          h="10rem"
41        >
42          <GridItem colSpan={1}>
43            <InboundsSidebar inbounds={inbounds} />
44          </GridItem>
45          <GridItem colSpan={3}>
46            <HostsTable hosts={hosts} />
47          </GridItem>
48        </Grid>
49      </>
50
51    )
52}