From 47eee7d166e42c44a30212bedb377ca2f01b9367 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 13 Mar 2023 18:26:16 +0600 Subject: [PATCH] telegram: now able to delete it --- .../auth/oauth/TelegramLoginForm/index.tsx | 33 +++++++++++++++---- .../TelegramLoginForm/styles.module.scss | 22 +++++++++++++ src/constants/auth/socials.ts | 1 + .../dialogs/TelegramAttachDialog/index.tsx | 30 +++++++++++++---- .../profile/ProfileAccounts/index.tsx | 12 +++++-- src/hooks/auth/useOAuth.ts | 4 +-- src/hooks/auth/useOauthEventListeners.ts | 2 -- src/hooks/auth/useTelegramAccount.ts | 31 +++++++++++++---- src/types/auth/index.ts | 2 +- src/utils/providers/SettingsProvider.tsx | 1 - 10 files changed, 112 insertions(+), 26 deletions(-) create mode 100644 src/components/auth/oauth/TelegramLoginForm/styles.module.scss diff --git a/src/components/auth/oauth/TelegramLoginForm/index.tsx b/src/components/auth/oauth/TelegramLoginForm/index.tsx index 67a904cf..0a4911af 100644 --- a/src/components/auth/oauth/TelegramLoginForm/index.tsx +++ b/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 = ({ botName, + loading, onSuccess, }) => { return ( - +
+
+ {loading ? ( + + ) : ( +
+ После успешной авторизации аккаунт появится в настройках вашего + профиля +
+ )} +
+ +
+ +
+
); }; diff --git a/src/components/auth/oauth/TelegramLoginForm/styles.module.scss b/src/components/auth/oauth/TelegramLoginForm/styles.module.scss new file mode 100644 index 00000000..12f263e5 --- /dev/null +++ b/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; +} diff --git a/src/constants/auth/socials.ts b/src/constants/auth/socials.ts index 3d0532f5..f9d24fd6 100644 --- a/src/constants/auth/socials.ts +++ b/src/constants/auth/socials.ts @@ -3,4 +3,5 @@ import { OAuthProvider } from '~/types/auth'; export const SOCIAL_ICONS: Record = { vkontakte: 'vk', google: 'google', + telegram: 'telegram', }; diff --git a/src/containers/dialogs/TelegramAttachDialog/index.tsx b/src/containers/dialogs/TelegramAttachDialog/index.tsx index 7a08ec36..2a284db3 100644 --- a/src/containers/dialogs/TelegramAttachDialog/index.tsx +++ b/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 = ({ }) => { const { attach } = useTelegramAccount(); + const onAttach = useCallback( + (data: TelegramUser) => attach(data, onRequestClose), + [onRequestClose], + ); + + const buttons = useMemo( + () => ( + + + + ), + [onRequestClose], + ); + if (!botName) { - // TODO: show something + onRequestClose(); return null; } return ( - -
- -
+ + ); }; diff --git a/src/containers/profile/ProfileAccounts/index.tsx b/src/containers/profile/ProfileAccounts/index.tsx index f1503d81..0c563950 100644 --- a/src/containers/profile/ProfileAccounts/index.tsx +++ b/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 = () => { 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 = () => { -
{it.name || it.id}
+
+ {it.name || it.id} - {it.id} - {it.provider} +
= () => { iconLeft="telegram" color="gray" onClick={showTelegramModal} + disabled={hasTelegram} > Телеграм diff --git a/src/hooks/auth/useOAuth.ts b/src/hooks/auth/useOAuth.ts index f85b7d45..c097b4e7 100644 --- a/src/hooks/auth/useOAuth.ts +++ b/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, }; }; diff --git a/src/hooks/auth/useOauthEventListeners.ts b/src/hooks/auth/useOauthEventListeners.ts index 320804fe..1ae5c7eb 100644 --- a/src/hooks/auth/useOauthEventListeners.ts +++ b/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)); diff --git a/src/hooks/auth/useTelegramAccount.ts b/src/hooks/auth/useTelegramAccount.ts index ca1b15ea..1a4d7ea8 100644 --- a/src/hooks/auth/useTelegramAccount.ts +++ b/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 = () => { - const attach = useCallback((data: TelegramUser) => { - apiAttachTelegram(data); - }, []); +import { useOAuth } from './useOAuth'; - 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 }; }; diff --git a/src/types/auth/index.ts b/src/types/auth/index.ts index d34c6b3d..4251a06e 100644 --- a/src/types/auth/index.ts +++ b/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; diff --git a/src/utils/providers/SettingsProvider.tsx b/src/utils/providers/SettingsProvider.tsx index 979bcc54..104e69a4 100644 --- a/src/utils/providers/SettingsProvider.tsx +++ b/src/utils/providers/SettingsProvider.tsx @@ -54,7 +54,6 @@ export const useSettingsForm = ( const validationErrors = getValidationErrors(error); if (validationErrors) { - console.log(validationErrors); setErrors(validationErrors); } }