telegram: add button to boris

src/components/boris/BorisContactItem/index.tsx

@@ -1,5 +1,6 @@
-import React, { FC } from 'react';
+import React, { FC, ReactNode, useCallback } from 'react';
 
+import { Group } from '~/components/containers/Group';
 import { Icon } from '~/components/input/Icon';
 
 import styles from './styles.module.scss';
@@ -9,19 +10,44 @@ interface Props {
   title: string;
   subtitle: string;
   link: string;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
 }
 
-const BorisContactItem: FC<Props> = ({ icon, title, subtitle, link }) => (
-  <a className={styles.item} href={link} target="_blank" rel="noreferrer">
-    <div className={styles.icon}>
-      <Icon icon={icon} size={32} />
-    </div>
+const BorisContactItem: FC<Props> = ({
+  icon,
+  title,
+  subtitle,
+  link,
+  prefix,
+  suffix,
+}) => {
+  const onClick = useCallback(() => {
+    if (!link) return;
 
-    <div className={styles.info}>
-      <div className={styles.title}>{title}</div>
-      <div className={styles.subtitle}>{subtitle}</div>
+    window.open(link);
+  }, []);
+
+  return (
+    <div>
+      {prefix}
+      <div
+        onClick={onClick}
+        className={styles.item}
+        role={link ? 'button' : 'none'}
+      >
+        <div className={styles.icon}>
+          <Icon icon={icon} size={32} />
+        </div>
+
+        <div className={styles.info}>
+          <div className={styles.title}>{title}</div>
+          <div className={styles.subtitle}>{subtitle}</div>
+        </div>
+      </div>
+      {suffix}
     </div>
-  </a>
-);
+  );
+};
 
 export { BorisContactItem };

src/components/boris/BorisContacts/index.tsx

@@ -1,12 +1,18 @@
 import React, { FC } from 'react';
 
 import { BorisContactItem } from '~/components/boris/BorisContactItem';
+import { Group } from '~/components/containers/Group';
+import { Padder } from '~/components/containers/Padder';
+import { Button } from '~/components/input/Button';
 
 import styles from './styles.module.scss';
 
-interface Props {}
+interface Props {
+  canConnectTelegram: boolean;
+  connectTelegram: () => void;
+}
 
-const BorisContacts: FC<Props> = () => (
+const BorisContacts: FC<Props> = ({ canConnectTelegram, connectTelegram }) => (
   <div className={styles.contacts}>
     <BorisContactItem
       icon="vk"
@@ -15,19 +21,26 @@ const BorisContacts: FC<Props> = () => (
       subtitle="паблик вконтакте"
     />
 
-    <BorisContactItem
-      icon="telegram"
-      title="Телеграм-бот"
-      link="https://t.me/vault48bot"
-      subtitle="@vault48bot"
-    />
-
     <BorisContactItem
       icon="github"
       title="Github"
       link="https://github.com/muerwre?tab=repositories&q=vault"
       subtitle="исходники Убежища"
     />
+
+    <BorisContactItem
+      icon="telegram"
+      title="Телеграм-бот"
+      link="https://t.me/vault48bot"
+      subtitle="@vault48bot"
+      suffix={
+        canConnectTelegram && (
+          <Padder>
+            <Button onClick={connectTelegram}>Получать уведомления</Button>
+          </Padder>
+        )
+      }
+    />
   </div>
 );
 

src/containers/boris/BorisSidebar/index.tsx

@@ -4,6 +4,8 @@ import { BorisContacts } from '~/components/boris/BorisContacts';
 import { BorisStats } from '~/components/boris/BorisStats';
 import { Group } from '~/components/containers/Group';
 import { SuperPowersToggle } from '~/containers/auth/SuperPowersToggle';
+import { useAuth } from '~/hooks/auth/useAuth';
+import { useTelegramAccount } from '~/hooks/auth/useTelegramAccount';
 import { BorisUsageStats } from '~/types/boris';
 
 import styles from './styles.module.scss';
@@ -14,18 +16,25 @@ interface Props {
   isLoading: boolean;
 }
 
-const BorisSidebar: FC<Props> = ({ isUser, stats, isLoading }) => (
-  <Group className={styles.container}>
-    <div className={styles.super_powers}>
-      <SuperPowersToggle />
-    </div>
+const BorisSidebar: FC<Props> = ({ isUser, stats, isLoading }) => {
+  const { connected, connect } = useTelegramAccount();
 
-    <BorisContacts />
+  return (
+    <Group className={styles.container}>
+      <div className={styles.super_powers}>
+        <SuperPowersToggle />
+      </div>
 
-    <div className={styles.wrap}>
-      <BorisStats stats={stats} isLoading={isLoading} />
-    </div>
-  </Group>
-);
+      <BorisContacts
+        canConnectTelegram={isUser && !connected}
+        connectTelegram={connect}
+      />
+
+      <div className={styles.wrap}>
+        <BorisStats stats={stats} isLoading={isLoading} />
+      </div>
+    </Group>
+  );
+};
 
 export { BorisSidebar };

src/hooks/auth/useTelegramAccount.ts

@@ -1,18 +1,21 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { TelegramUser } from '@v9v/ts-react-telegram-login';
 
+import { Dialog } from '~/constants/modal';
 import { showErrorToast } from '~/utils/errors/showToast';
 import { useNotifications } from '~/utils/providers/NotificationProvider';
 
 import { apiAttachTelegram } from '../../api/auth/index';
+import { useModal } from '../modal/useModal';
 
 import { useOAuth } from './useOAuth';
 
 export const useTelegramAccount = () => {
   const [loading, setLoading] = useState(false);
-  const { refresh } = useOAuth();
+  const { refresh, accounts } = useOAuth();
   const { refresh: refreshNotificationSettings } = useNotifications();
+  const { showModal } = useModal();
 
   const attach = useCallback(
     async (data: TelegramUser, callback?: () => void) => {
@@ -30,5 +33,12 @@ export const useTelegramAccount = () => {
     [],
   );
 
-  return { attach, loading };
+  const connect = useCallback(() => showModal(Dialog.TelegramAttach, {}), []);
+
+  const connected = useMemo(
+    () => accounts.some((it) => it.provider === 'telegram'),
+    [accounts],
+  );
+
+  return { attach, loading, connected, connect };
 };