1import { Box, Table, Thead, Tbody, Th, Td, Tr, HStack } from '@chakra-ui/react';
 2import classNames from 'classnames';
 3import { InboundCard } from 'components/inbounds-card';
 4import { handleSort } from 'components/table';
 5import { FC } from 'react';
 6import { useTranslation } from 'react-i18next';
 7import { useEffect } from 'react';
 8import { useInbounds } from 'stores';
 9import { InboundType } from 'types';
10
11type InboundsSidebarProps = {
12  inbounds: InboundType[];
13}
14
15export const InboundsSidebar: FC<InboundsSidebarProps> = ({
16  inbounds,
17}) => {
18  const {
19    onInboundsFilterChange,
20    inboundsFilters: filters,
21    selectedInbound,
22    selectInbound,
23    refetchHosts,
24  } = useInbounds();
25
26  useEffect(() => {
27    selectedInbound === undefined && selectInbound(inbounds[0]);
28  }, [selectedInbound, inbounds]);
29
30  const { t } = useTranslation();
31
32  return (
33    <Box w="full">
34      <Table orientation="vertical" zIndex="docked" >
35        <Thead zIndex="docked" position="relative" >
36          <Tr>
37            <Th
38              minW="120px"
39              pl={4}
40              pr={4}
41              cursor={'pointer'}
42              onClick={handleSort.bind(null, filters, 'tag', onInboundsFilterChange)}
43            >
44              <HStack>
45                <span>{t('inbounds')}</span>
46              </HStack>
47            </Th>
48          </Tr>
49        </Thead>
50        <Tbody>
51          {inbounds?.map((inbound, i) => {
52            const active = inbounds[i] == selectedInbound
53            return (
54              <Tr key={i}
55                className={classNames('interactive')}
56                bg={active ? 'gray.300' : undefined}
57                _dark={{ bg: active ? 'gray.700' : undefined }}
58                onClick={() => {
59                  selectInbound(inbound);
60                  refetchHosts();
61                }}>
62                <Td>
63                  <InboundCard
64                    tag={inbound.tag}
65                    nodeName={inbound.node.name}
66                    protocol={inbound.protocol}
67                  />
68                </Td>
69              </Tr>);
70          })}
71        </Tbody>
72      </Table>
73    </Box>
74  )
75}