telegram: now able to delete it

src/components/auth/oauth/TelegramLoginForm/index.tsx

@@ -1,24 +1,45 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
 
 import TelegramLoginButton, {
   TelegramUser,
 } from '@v9v/ts-react-telegram-login';
 
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+
+import styles from './styles.module.scss';
+
 interface TelegramLoginFormProps {
   botName: string;
+  loading?: boolean;
   onSuccess?: (token: TelegramUser) => void;
 }
 
 const TelegramLoginForm: FC<TelegramLoginFormProps> = ({
   botName,
+  loading,
   onSuccess,
 }) => {
   return (
+    <div className={styles.container}>
+      <div className={styles.text}>
+        {loading ? (
+          <LoaderCircle />
+        ) : (
+          <div>
+            После успешной авторизации аккаунт появится в настройках вашего
+            профиля
+          </div>
+        )}
+      </div>
+
+      <div className={styles.button}>
         <TelegramLoginButton
           dataOnAuth={onSuccess}
           botName={botName}
           requestAccess
         />
+      </div>
+    </div>
   );
 };
 

src/components/auth/oauth/TelegramLoginForm/styles.module.scss

@@ -0,0 +1,22 @@
+@import 'src/styles/variables';
+
+.button {
+  flex: 0 0 48px;
+}
+
+.container {
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: $gap;
+}
+
+.text {
+  text-align: center;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/constants/auth/socials.ts

@@ -3,4 +3,5 @@ import { OAuthProvider } from '~/types/auth';
 export const SOCIAL_ICONS: Record<OAuthProvider, string> = {
   vkontakte: 'vk',
   google: 'google',
+  telegram: 'telegram',
 };

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}>
+    <BetterScrollDialog width={300} onClose={onRequestClose} footer={buttons}>
-      <div>
+      <TelegramLoginForm botName={botName} onSuccess={onAttach} />
-        <TelegramLoginForm botName={botName} onSuccess={attach} />
-      </div>
     </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>

src/hooks/auth/useOAuth.ts

@@ -43,8 +43,6 @@ export const useOAuth = () => {
         setToken(result.token);
         hideModal();
       } catch (error) {
-        console.log(path(['response'], error));
-
         const needsRegister = path(['response', 'status'], error) === 428;
 
         if (needsRegister && token) {
@@ -97,6 +95,7 @@ export const useOAuth = () => {
   );
 
   const accounts = useMemo(() => data || [], [data]);
+  const refresh = useCallback(() => mutate(), []);
 
   return {
     openOauthWindow,
@@ -106,5 +105,6 @@ export const useOAuth = () => {
     dropAccount,
     accounts,
     isLoading: !data && isLoading,
+    refresh,
   };
 };

src/hooks/auth/useOauthEventListeners.ts

@@ -21,8 +21,6 @@ export const useOauthEventListeners = () => {
         return;
       }
 
-      console.log('caught event:', type, event.data);
-
       switch (type) {
         case EventMessageType.OAuthLogin:
           loginWithSocial(path(['data', 'payload', 'token'], event));

src/hooks/auth/useTelegramAccount.ts

@@ -1,13 +1,32 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 import { TelegramUser } from '@v9v/ts-react-telegram-login';
 
+import { showErrorToast } from '~/utils/errors/showToast';
+
 import { apiAttachTelegram } from '../../api/auth/index';
 
-export const useTelegramAccount = () => {
+import { useOAuth } from './useOAuth';
-  const attach = useCallback((data: TelegramUser) => {
-    apiAttachTelegram(data);
-  }, []);
 
-  return { attach };
+export const useTelegramAccount = () => {
+  const [loading, setLoading] = useState(false);
+  const { refresh } = useOAuth();
+
+  const attach = useCallback(
+    async (data: TelegramUser, callback?: () => void) => {
+      setLoading(true);
+      try {
+        await apiAttachTelegram(data);
+        await refresh();
+        callback?.();
+      } catch (error) {
+        showErrorToast(error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [],
+  );
+
+  return { attach, loading };
 };

src/types/auth/index.ts

@@ -20,7 +20,7 @@ export interface IUser {
   is_user: boolean;
 }
 
-export type OAuthProvider = 'vkontakte' | 'google';
+export type OAuthProvider = 'vkontakte' | 'google' | 'telegram';
 
 export interface ISocialAccount {
   provider: OAuthProvider;

src/utils/providers/SettingsProvider.tsx

@@ -54,7 +54,6 @@ export const useSettingsForm = (
 
         const validationErrors = getValidationErrors(error);
         if (validationErrors) {
-          console.log(validationErrors);
           setErrors(validationErrors);
         }
       }