telegram: now able to delete it

src/containers/dialogs/TelegramAttachDialog/index.tsx

@@ -1,5 +1,9 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 
+import { TelegramUser } from '@v9v/ts-react-telegram-login';
+
+import { Padder } from '~/components/containers/Padder';
+import { Button } from '~/components/input/Button';
 import { useTelegramAccount } from '~/hooks/auth/useTelegramAccount';
 import { DialogComponentProps } from '~/types/modal';
 
@@ -15,16 +19,30 @@ const TelegramAttachDialog: FC<TelegramAttachDialogProps> = ({
 }) => {
   const { attach } = useTelegramAccount();
 
+  const onAttach = useCallback(
+    (data: TelegramUser) => attach(data, onRequestClose),
+    [onRequestClose],
+  );
+
+  const buttons = useMemo(
+    () => (
+      <Padder>
+        <Button stretchy onClick={onRequestClose}>
+          Отмена
+        </Button>
+      </Padder>
+    ),
+    [onRequestClose],
+  );
+
   if (!botName) {
-    // TODO: show something
+    onRequestClose();
     return null;
   }
 
   return (
-    <BetterScrollDialog width={300} onClose={onRequestClose}>
-      <div>
-        <TelegramLoginForm botName={botName} onSuccess={attach} />
-      </div>
+    <BetterScrollDialog width={300} onClose={onRequestClose} footer={buttons}>
+      <TelegramLoginForm botName={botName} onSuccess={onAttach} />
     </BetterScrollDialog>
   );
 };

src/containers/profile/ProfileAccounts/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Fragment, useCallback } from 'react';
+import React, { FC, Fragment, useCallback, useMemo } from 'react';
 
 import { Superpower } from '~/components/boris/Superpower';
 import { Group } from '~/components/containers/Group';
@@ -18,6 +18,11 @@ const ProfileAccounts: FC<ProfileAccountsProps> = () => {
   const { isLoading, accounts, dropAccount, openOauthWindow } = useOAuth();
   const { showModal } = useModal();
 
+  const hasTelegram = useMemo(
+    () => accounts.some((acc) => acc.provider === 'telegram'),
+    [accounts],
+  );
+
   const showTelegramModal = useCallback(
     () => showModal(Dialog.TelegramAttach, {}),
     [],
@@ -64,7 +69,9 @@ const ProfileAccounts: FC<ProfileAccountsProps> = () => {
                   </div>
                 </div>
 
-                <div className={styles.account__name}>{it.name || it.id}</div>
+                <div className={styles.account__name}>
+                  {it.name || it.id} - {it.id} - {it.provider}
+                </div>
 
                 <div className={styles.account__drop}>
                   <Icon
@@ -86,6 +93,7 @@ const ProfileAccounts: FC<ProfileAccountsProps> = () => {
             iconLeft="telegram"
             color="gray"
             onClick={showTelegramModal}
+            disabled={hasTelegram}
           >
             Телеграм
           </Button>