From 5ff6d712250241d4e292bce8ea228b862a893133 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Sun, 16 Oct 2022 13:19:51 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20Icons=20to=20Message=20when?=
 =?UTF-8?q?=20Bridge=20was=20used?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/Message.ts                       |   5 +-
 src/components/message/Message.tsx       |  67 +++++++++++++++++------
 src/components/message/mastodon_icon.png | Bin 0 -> 3279 bytes
 src/components/ticker/MastodonForm.tsx   |   3 +
 4 files changed, 56 insertions(+), 19 deletions(-)
 create mode 100644 src/components/message/mastodon_icon.png

diff --git a/src/api/Message.ts b/src/api/Message.ts
index 666dd897..77188ad3 100644
--- a/src/api/Message.ts
+++ b/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[]
diff --git a/src/components/message/Message.tsx b/src/components/message/Message.tsx
index 891121d6..848de1d4 100644
--- a/src/components/message/Message.tsx
+++ b/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>
diff --git a/src/components/message/mastodon_icon.png b/src/components/message/mastodon_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c3b251f2ecc0a6cc076447987cac601343758ea
GIT binary patch
literal 3279
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

literal 0
HcmV?d00001

diff --git a/src/components/ticker/MastodonForm.tsx b/src/components/ticker/MastodonForm.tsx
index e506d014..f582cddb 100644
--- a/src/components/ticker/MastodonForm.tsx
+++ b/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}