1
  2import { t } from 'i18next';
  3import CopyToClipboard from 'react-copy-to-clipboard';
  4import { User } from 'types';
  5import {
  6  CopiedIcon,
  7  CopyIcon,
  8  QRIcon,
  9  SubscriptionLinkIcon
 10} from 'components/table';
 11import {
 12  HStack,
 13  IconButton,
 14  Tooltip,
 15} from '@chakra-ui/react';
 16import { FC, useEffect, useState } from 'react';
 17import { useUsers } from 'stores';
 18
 19type ActionButtonsProps = {
 20    user: User;
 21};
 22
 23export const ActionButtons: FC<ActionButtonsProps> = ({ user }) => {
 24  const { setQRCode, setSubLink } = useUsers();
 25
 26  const proxyLinks = user.links.join('\r\n');
 27
 28  const [copied, setCopied] = useState([-1, false]);
 29  useEffect(() => {
 30    if (copied[1]) {
 31      setTimeout(() => {
 32        setCopied([-1, false]);
 33      }, 1000);
 34    }
 35  }, [copied]);
 36  return (
 37    <HStack
 38      justifyContent="flex-end"
 39      onClick={(e) => {
 40        e.preventDefault();
 41        e.stopPropagation();
 42      }}
 43    >
 44      <CopyToClipboard
 45        text={
 46          user.subscription_url.startsWith('/')
 47            ? window.location.origin + user.subscription_url
 48            : user.subscription_url
 49        }
 50        onCopy={() => {
 51          setCopied([0, true]);
 52        }}
 53      >
 54        <div>
 55          <Tooltip
 56            label={
 57              copied[0] == 0 && copied[1]
 58                ? t('usersTable.copied')
 59                : t('usersTable.copyLink')
 60            }
 61            placement="top"
 62          >
 63            <IconButton
 64              p="0 !important"
 65              aria-label="copy subscription link"
 66              bg="transparent"
 67              _dark={{
 68                _hover: {
 69                  bg: 'gray.700',
 70                },
 71              }}
 72              size={{
 73                base: 'sm',
 74                md: 'md',
 75              }}
 76            >
 77              {copied[0] == 0 && copied[1] ? (
 78                <CopiedIcon />
 79              ) : (
 80                <SubscriptionLinkIcon />
 81              )}
 82            </IconButton>
 83          </Tooltip>
 84        </div>
 85      </CopyToClipboard>
 86      <CopyToClipboard
 87        text={proxyLinks}
 88        onCopy={() => {
 89          setCopied([1, true]);
 90        }}
 91      >
 92        <div>
 93          <Tooltip
 94            label={
 95              copied[0] == 1 && copied[1]
 96                ? t('usersTable.copied')
 97                : t('usersTable.copyConfigs')
 98            }
 99            placement="top"
100          >
101            <IconButton
102              p="0 !important"
103              aria-label="copy configs"
104              bg="transparent"
105              _dark={{
106                _hover: {
107                  bg: 'gray.700',
108                },
109              }}
110              size={{
111                base: 'sm',
112                md: 'md',
113              }}
114            >
115              {copied[0] == 1 && copied[1] ? <CopiedIcon /> : <CopyIcon />}
116            </IconButton>
117          </Tooltip>
118        </div>
119      </CopyToClipboard>
120      <Tooltip label="QR Code" placement="top">
121        <IconButton
122          p="0 !important"
123          aria-label="qr code"
124          bg="transparent"
125          _dark={{
126            _hover: {
127              bg: 'gray.700',
128            },
129          }}
130          size={{
131            base: 'sm',
132            md: 'md',
133          }}
134          onClick={() => {
135            setQRCode(user.links);
136            setSubLink(user.subscription_url);
137          }}
138        >
139          <QRIcon />
140        </IconButton>
141      </Tooltip>
142    </HStack >
143  );
144};