✨ Add Icons to Message when Bridge was used

src/api/Message.ts

@@ -13,8 +13,9 @@ export interface Message {
   ticker: number
   text: string
   creation_date: Date
-  tweet_id: string
-  tweet_user: string
+  twitter_url?: string
+  telegram_url?: string
+  mastodon_url?: string
   geo_information: string
   // TODO
   attachments: any[]

src/components/message/Message.tsx

@@ -8,6 +8,7 @@ import { replaceMagic } from '../../lib/replaceLinksHelper'
 import MessageModalDelete from './MessageModalDelete'
 import MessageMap from './MessageMap'
 import { Ticker } from '../../api/Ticker'
+import MastodonIcon from './mastodon_icon.png'
 
 interface Props {
   message: MessageType
@@ -21,6 +22,52 @@ const Message: FC<Props> = ({ message, ticker }) => {
   const openImageLightbox = useCallback(() => setImageLightboxOpen(true), [])
   const closeImageLightbox = useCallback(() => setImageLightboxOpen(false), [])
 
+  const twitterIcon = useCallback(() => {
+    if (message.twitter_url) {
+      return (
+        <a href={message.twitter_url} rel="noopener noreferrer" target="_blank">
+          <Icon name="twitter" />
+        </a>
+      )
+    }
+
+    return null
+  }, [message.twitter_url])
+
+  const telegramIcon = useCallback(() => {
+    if (message.telegram_url) {
+      return (
+        <a
+          href={message.telegram_url}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <Icon name="telegram" />
+        </a>
+      )
+    }
+
+    return null
+  }, [message.telegram_url])
+
+  const mastodonIcon = useCallback(() => {
+    if (message.mastodon_url) {
+      return (
+        <a
+          href={message.mastodon_url}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <Icon>
+            <Image src={MastodonIcon} />
+          </Icon>
+        </a>
+      )
+    }
+
+    return null
+  }, [message.mastodon_url])
+
   const renderAttachments = () => {
     const attachments = message.attachments
 
@@ -63,22 +110,6 @@ const Message: FC<Props> = ({ message, ticker }) => {
     )
   }
 
-  const renderTwitterIcon = () => {
-    if (message.tweet_id === '') {
-      return <Icon disabled name="twitter" />
-    }
-
-    return (
-      <a
-        href={`https://twitter.com/${message.tweet_user}/status/${message.tweet_id}`}
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        <Icon name="twitter" />
-      </a>
-    )
-  }
-
   return (
     <Card fluid>
       <Card.Content>
@@ -103,7 +134,9 @@ const Message: FC<Props> = ({ message, ticker }) => {
       {renderAttachments()}
       <MessageMap message={message} ticker={ticker} />
       <Card.Content extra>
-        {renderTwitterIcon()}
+        {twitterIcon()}
+        {telegramIcon()}
+        {mastodonIcon()}
         <Moment fromNow>{message.creation_date}</Moment>
       </Card.Content>
     </Card>

src/components/ticker/MastodonForm.tsx

@@ -58,6 +58,9 @@ const MastodonForm: FC<Props> = ({ callback, ticker }) => {
           {`"`} where you need to create an Application. After saving you see
           the required secrets and tokens.
         </Message.Content>
+        <Message.Content>
+          Required Scopes: <code>read write write:media write:statuses</code>
+        </Message.Content>
       </Message>
       <Form.Checkbox
         defaultChecked={mastodon.active}