1import { 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 { useEffect } from 'react';
 6import { useTranslation } from 'react-i18next';
 7import { useInbounds } from 'stores';
 8
 9export const InboundsSidebar = () => {
10  const {
11    inbounds,
12    onInboundsFilterChange,
13    inboundsFilters: filters,
14    selectedInbound,
15    selectInbound,
16    refetchInbounds
17  } = useInbounds();
18  const { t } = useTranslation();
19  useEffect(() => {
20    inbounds.length === 0 && refetchInbounds();
21  }, [inbounds.length])
22  return (
23    <Table orientation="vertical" zIndex="docked" pr="3" >
24      <Thead zIndex="docked" position="relative">
25        <Tr>
26          <Th
27            minW="120px"
28            pl={4}
29            pr={4}
30            cursor={'pointer'}
31            onClick={handleSort.bind(null, filters, 'tag', onInboundsFilterChange)}
32          >
33            <HStack>
34              <span>{t('inbounds')}</span>
35            </HStack>
36          </Th>
37        </Tr>
38      </Thead>
39      <Tbody>
40        {inbounds.map((inbound, i) => {
41          const active = inbounds[i] == selectedInbound
42          return (
43            <Tr key={i}
44              className={classNames('interactive')}
45              bg={active ? 'gray.300' : undefined}
46              _dark={{ bg: active ? 'gray.700' : undefined }}
47              onClick={() => { selectInbound(inbound) }}>
48              <Td>
49                <InboundCard
50
51                  tag={inbound.tag}
52                  nodeName={inbound.node.name}
53                  protocol={inbound.protocol}
54                />
55              </Td>
56            </Tr>);
57        })}
58      </Tbody>
59    </Table>
60  )
61}