1import React, { useEffect } from 'react'
 2import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'
 3import { InboundsHostsFilters } from './filters'
 4import { InboundsSidebar } from './inbounds-sidebar'
 5import { HostsTable } from './table'
 6import { queryIds } from 'constants/query-ids';
 7import { useQuery } from '@tanstack/react-query';
 8import { fetchInbounds, fetchInboundHosts, useInbounds } from 'stores';
 9
10export const InboundsHostsManager = () => {
11  const { selectedInbound, refetchHosts } = useInbounds();
12
13  const { data: inbounds } = useQuery({
14    queryKey: [queryIds.inbounds],
15    initialData: [],
16    queryFn: () => {
17      return fetchInbounds();
18    }
19  });
20
21  const { data: hosts } = useQuery({
22    queryKey: [queryIds.hosts, selectedInbound?.id],
23    initialData: [],
24    queryFn: () => {
25      return fetchInboundHosts(selectedInbound?.id);
26    }
27  });
28
29  useEffect(() => {
30    refetchHosts();
31  }, [selectedInbound])
32
33  return (
34    <>
35      <InboundsHostsFilters />
36      <PanelGroup direction="horizontal">
37        <Panel id="sidebar" minSize={20} order={1}>
38          <InboundsSidebar inbounds={inbounds} />
39        </Panel>
40        <PanelResizeHandle />
41        <Panel minSize={60} order={2}>
42          <HostsTable hosts={hosts} />
43        </Panel>
44      </PanelGroup>
45    </>
46  )
47}