diff --git a/src/api/Ticker.ts b/src/api/Ticker.ts index 2dc22960..dda6df95 100644 --- a/src/api/Ticker.ts +++ b/src/api/Ticker.ts @@ -38,13 +38,14 @@ export interface TickerInformation { export interface TickerTelegram { active: boolean + connected: boolean bot_username: string channel_name: string } export interface TickerTelegramFormData { active: boolean - channel_name: string + channel_name?: string } export interface TickerTwitter { @@ -76,9 +77,8 @@ export interface TickerMastodonFormData { export interface TickerTwitterFormData { active: boolean - disconnect: boolean - token: string - secret: string + token?: string + secret?: string } export interface TickerLocation { @@ -197,6 +197,15 @@ export function useTickerApi(token: string) { }).then(response => response.json()) } + const deleteTickerTwitter = ( + ticker: Ticker + ): Promise> => { + return fetch(`${ApiUrl}/admin/tickers/${ticker.id}/twitter`, { + headers: headers, + method: 'delete', + }).then(response => response.json()) + } + const putTickerTelegram = ( data: TickerTelegramFormData, ticker: Ticker @@ -208,6 +217,15 @@ export function useTickerApi(token: string) { }).then(response => response.json()) } + const deleteTickerTelegram = ( + ticker: Ticker + ): Promise> => { + return fetch(`${ApiUrl}/admin/tickers/${ticker.id}/telegram`, { + headers: headers, + method: 'delete', + }).then(response => response.json()) + } + return { deleteTicker, deleteTickerUser, @@ -221,6 +239,8 @@ export function useTickerApi(token: string) { putTickerMastodon, deleteTickerMastodon, putTickerTwitter, + deleteTickerTwitter, putTickerTelegram, + deleteTickerTelegram, } } diff --git a/src/components/ticker/TelegramCard.tsx b/src/components/ticker/TelegramCard.tsx index 31f5d675..cdddd7d5 100644 --- a/src/components/ticker/TelegramCard.tsx +++ b/src/components/ticker/TelegramCard.tsx @@ -1,6 +1,8 @@ -import React, { FC } from 'react' +import { useQueryClient } from '@tanstack/react-query' +import React, { FC, useCallback } from 'react' import { Button, Card, Container, Icon } from 'semantic-ui-react' -import { Ticker } from '../../api/Ticker' +import { Ticker, useTickerApi } from '../../api/Ticker' +import useAuth from '../useAuth' import TelegramModalForm from './TelegramModalForm' interface Props { @@ -8,9 +10,25 @@ interface Props { } const TelegramCard: FC = ({ ticker }) => { + const { token } = useAuth() + const { deleteTickerTelegram, putTickerTelegram } = useTickerApi(token) + const queryClient = useQueryClient() + const telegram = ticker.telegram - return telegram.active ? ( + const handleToggle = useCallback(() => { + putTickerTelegram({ active: !telegram.active }, ticker).finally(() => + queryClient.invalidateQueries(['ticker', ticker.id]) + ) + }, [putTickerTelegram, queryClient, telegram.active, ticker]) + + const handleDisconnect = useCallback(() => { + deleteTickerTelegram(ticker).finally(() => { + queryClient.invalidateQueries(['ticker', ticker.id]) + }) + }, [deleteTickerTelegram, queryClient, ticker]) + + return telegram.connected ? ( @@ -21,18 +39,29 @@ const TelegramCard: FC = ({ ticker }) => { Bot: {telegram.bot_username} - + {telegram.active ? (