Merge pull request #384 from systemli/streamline-twitter-telegram-cards

✨ Streamline Twitter & Telegram Cards

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<Response<TickerResponseData>> => {
+    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<Response<TickerResponseData>> => {
+    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,
   }
 }

src/components/ticker/TelegramCard.tsx

@@ -1,16 +1,34 @@
-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 {
   ticker: Ticker
 }
 
 const TelegramCard: FC<Props> = ({ 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 ? (
     <Container>
       <Card fluid>
         <Card.Content>
@@ -21,18 +39,29 @@ const TelegramCard: FC<Props> = ({ ticker }) => {
           <Card.Meta>Bot: {telegram.bot_username}</Card.Meta>
         </Card.Content>
         <Card.Content extra>
-          <TelegramModalForm
-            ticker={ticker}
-            trigger={
+          <Button.Group compact size="tiny">
+            {telegram.active ? (
               <Button
-                color="blue"
-                compact
-                content="Configure"
-                icon="telegram"
-                size="tiny"
+                color="yellow"
+                content="Disable"
+                icon="pause"
+                onClick={handleToggle}
               />
-            }
-          />
+            ) : (
+              <Button
+                color="green"
+                content="Enable"
+                icon="play"
+                onClick={handleToggle}
+              />
+            )}
+            <Button
+              color="red"
+              content="Disconnect"
+              icon="delete"
+              onClick={handleDisconnect}
+            />
+          </Button.Group>
         </Card.Content>
       </Card>
     </Container>

src/components/ticker/TwitterCard.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import TwitterLogin from 'react-twitter-auth'
-import { Button, Card, Container, Icon } from 'semantic-ui-react'
+import { Button, Card, Container, Icon, Image } from 'semantic-ui-react'
 import { ApiUrl } from '../../api/Api'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
@@ -18,46 +18,43 @@ interface TwitterAuthResponseData {
 const TwitterCard: FC<Props> = ({ ticker }) => {
   const queryClient = useQueryClient()
   const { token } = useAuth()
-  const { putTickerTwitter } = useTickerApi(token)
+  const { deleteTickerTwitter, putTickerTwitter } = useTickerApi(token)
 
   const twitter = ticker.twitter || {}
   const requestTokenUrl = `${ApiUrl}/admin/auth/twitter/request_token?callback=${encodeURI(
     window.location.origin
   )}`
   const loginUrl = `${ApiUrl}/admin/auth/twitter`
 
-  const updateTickerTwitter = useCallback(
-    (active: boolean, token = '', secret = '', disconnect = false) => {
-      const formData = {
-        active,
-        disconnect,
-        token,
-        secret,
-      }
+  const handleToggle = useCallback(() => {
+    putTickerTwitter({ active: !twitter.active }, ticker).finally(() =>
+      queryClient.invalidateQueries(['ticker', ticker.id])
+    )
+  }, [putTickerTwitter, twitter.active, ticker, queryClient])
 
-      putTickerTwitter(formData, ticker).then(() =>
-        queryClient.invalidateQueries(['ticker', ticker.id])
-      )
-    },
-    [ticker, putTickerTwitter, queryClient]
-  )
-
-  const toggleActive = useCallback(() => {
-    updateTickerTwitter(!twitter.active)
-  }, [twitter.active, updateTickerTwitter])
-
-  const connect = useCallback(
+  const handleConnect = useCallback(
     (response: any) => {
       response.json().then((data: TwitterAuthResponseData) => {
-        updateTickerTwitter(true, data.access_token, data.access_secret)
+        putTickerTwitter(
+          {
+            active: true,
+            token: data.access_token,
+            secret: data.access_secret,
+          },
+          ticker
+        ).finally(() => {
+          queryClient.invalidateQueries(['ticker', ticker.id])
+        })
       })
     },
-    [updateTickerTwitter]
+    [putTickerTwitter, queryClient, ticker]
   )
 
-  const disconnect = useCallback(() => {
-    updateTickerTwitter(false, '', '', true)
-  }, [updateTickerTwitter])
+  const handleDisconnect = useCallback(() => {
+    deleteTickerTwitter(ticker).finally(() => {
+      queryClient.invalidateQueries(['ticker', ticker.id])
+    })
+  }, [deleteTickerTwitter, queryClient, ticker])
 
   const alertError = useCallback((error: string) => {
     alert(error)
@@ -67,6 +64,9 @@ const TwitterCard: FC<Props> = ({ ticker }) => {
     <Container>
       <Card fluid>
         <Card.Content>
+          {twitter.image_url != '' && (
+            <Image floated="right" size="mini" src={twitter.image_url} />
+          )}
           <Card.Header>
             <Icon
               color={twitter.active ? 'green' : 'red'}
@@ -92,21 +92,21 @@ const TwitterCard: FC<Props> = ({ ticker }) => {
                 color="yellow"
                 content="Disable"
                 icon="pause"
-                onClick={toggleActive}
+                onClick={handleToggle}
               />
             ) : (
               <Button
                 color="green"
                 content="Enable"
                 icon="play"
-                onClick={toggleActive}
+                onClick={handleToggle}
               />
             )}
             <Button
               color="red"
               content="Disconnect"
               icon="delete"
-              onClick={disconnect}
+              onClick={handleDisconnect}
             />
           </Button.Group>
         </Card.Content>
@@ -125,7 +125,7 @@ const TwitterCard: FC<Props> = ({ ticker }) => {
             className="ui button blue tiny compact"
             loginUrl={loginUrl}
             onFailure={alertError}
-            onSuccess={connect}
+            onSuccess={handleConnect}
             requestTokenUrl={requestTokenUrl}
             showIcon={false}
           >