[C-2588] Update share modal and drawer to properly add user twitter h…

…andle (#3584)
AudiusProject · Jun 14, 2023 · 399d0b5 · 399d0b5
1 parent 9f30855
commit 399d0b5
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 15 deletions.
diff --git a/packages/mobile/src/components/share-drawer/ShareDrawer.tsx b/packages/mobile/src/components/share-drawer/ShareDrawer.tsx
@@ -102,7 +102,7 @@ export const ShareDrawer = () => {
 
   const handleShareToTwitter = useCallback(async () => {
     if (!content) return
-    const twitterShareUrl = getTwitterShareUrl(content)
+    const twitterShareUrl = await getTwitterShareUrl(content)
     const isSupported = await Linking.canOpenURL(twitterShareUrl)
     if (isSupported) {
       Linking.openURL(twitterShareUrl)

diff --git a/packages/mobile/src/components/share-drawer/utils.ts b/packages/mobile/src/components/share-drawer/utils.ts
@@ -1,6 +1,7 @@
 import type { ShareModalContent } from '@audius/common'
 import { makeTwitterShareUrl } from '@audius/common'
 
+import { audiusBackendInstance } from 'app/services/audius-backend-instance'
 import {
   getCollectionRoute,
   getTrackRoute,
@@ -34,43 +35,54 @@ export const getContentUrl = (content: ShareModalContent) => {
   }
 }
 
-export const getTwitterShareText = (content: ShareModalContent) => {
+const getShareHandle = async (handle: string) => {
+  const { twitterHandle } = await audiusBackendInstance.getSocialHandles(handle)
+  return twitterHandle ? `@${twitterHandle}` : handle
+}
+
+export const getTwitterShareText = async (content: ShareModalContent) => {
   switch (content.type) {
     case 'track': {
       const {
         track: { title },
         artist: { handle }
       } = content
-      return messages.trackShareText(title, handle)
+      return messages.trackShareText(title, await getShareHandle(handle))
     }
     case 'profile': {
       const {
         profile: { handle }
       } = content
-      return messages.profileShareText(handle)
+      return messages.profileShareText(await getShareHandle(handle))
     }
     case 'album': {
       const {
         album: { playlist_name },
         artist: { handle }
       } = content
-      return messages.albumShareText(playlist_name, handle)
+      return messages.albumShareText(
+        playlist_name,
+        await getShareHandle(handle)
+      )
     }
     case 'playlist': {
       const {
         playlist: { playlist_name },
         creator: { handle }
       } = content
-      return messages.playlistShareText(playlist_name, handle)
+      return messages.playlistShareText(
+        playlist_name,
+        await getShareHandle(handle)
+      )
     }
     case 'audioNftPlaylist': {
       return messages.nftPlaylistShareText
     }
   }
 }
 
-export const getTwitterShareUrl = (content: ShareModalContent) => {
+export const getTwitterShareUrl = async (content: ShareModalContent) => {
   const url = getContentUrl(content)
-  const shareText = getTwitterShareText(content)
+  const shareText = await getTwitterShareText(content)
   return makeTwitterShareUrl(url ?? null, shareText)
 }
diff --git a/packages/web/src/components/share-modal/ShareModal.tsx b/packages/web/src/components/share-modal/ShareModal.tsx
@@ -48,12 +48,12 @@ export const ShareModal = () => {
   const isOwner =
     content?.type === 'track' && account?.user_id === content.artist.user_id
 
-  const handleShareToTwitter = useCallback(() => {
+  const handleShareToTwitter = useCallback(async () => {
     if (!source || !content) return
     const isPlaylistOwner =
       content.type === 'audioNftPlaylist' &&
       account?.user_id === content.user.user_id
-    const { twitterText, link, analyticsEvent } = getTwitterShareText(
+    const { twitterText, link, analyticsEvent } = await getTwitterShareText(
       content,
       isPlaylistOwner
     )

diff --git a/packages/web/src/components/share-modal/utils.ts b/packages/web/src/components/share-modal/utils.ts
@@ -1,5 +1,6 @@
 import { ShareToTwitter, ShareModalContent } from '@audius/common'
 
+import { getTwitterHandleByUserHandle } from 'components/notification/Notification/utils'
 import {
   fullAlbumPage,
   fullPlaylistPage,
@@ -12,7 +13,12 @@ import { messages } from './messages'
 
 type ShareToTwitterEvent = Omit<ShareToTwitter, 'eventName' | 'source'>
 
-export const getTwitterShareText = (
+const getShareHandle = async (handle: string) => {
+  const twitterHandle = await getTwitterHandleByUserHandle(handle)
+  return twitterHandle ? `@${twitterHandle}` : handle
+}
+
+export const getTwitterShareText = async (
   content: ShareModalContent,
   isPlaylistOwner = false
 ) => {
@@ -25,7 +31,7 @@ export const getTwitterShareText = (
         track: { title, permalink, track_id },
         artist: { handle }
       } = content
-      twitterText = messages.trackShareText(title, handle)
+      twitterText = messages.trackShareText(title, await getShareHandle(handle))
       link = fullTrackPage(permalink)
       analyticsEvent = { kind: 'track', id: track_id, url: link }
       break
@@ -34,7 +40,7 @@ export const getTwitterShareText = (
       const {
         profile: { handle, user_id }
       } = content
-      twitterText = messages.profileShareText(handle)
+      twitterText = messages.profileShareText(await getShareHandle(handle))
       link = fullProfilePage(handle)
       analyticsEvent = { kind: 'profile', id: user_id, url: link }
       break
@@ -44,7 +50,10 @@ export const getTwitterShareText = (
         album: { playlist_name, playlist_id },
         artist: { handle }
       } = content
-      twitterText = messages.albumShareText(playlist_name, handle)
+      twitterText = messages.albumShareText(
+        playlist_name,
+        await getShareHandle(handle)
+      )
       link = fullAlbumPage(handle, playlist_name, playlist_id)
       analyticsEvent = { kind: 'album', id: playlist_id, url: link }
       break
@@ -54,7 +63,10 @@ export const getTwitterShareText = (
         playlist: { playlist_name, playlist_id },
         creator: { handle }
       } = content
-      twitterText = messages.playlistShareText(playlist_name, handle)
+      twitterText = messages.playlistShareText(
+        playlist_name,
+        await getShareHandle(handle)
+      )
       link = fullPlaylistPage(handle, playlist_name, playlist_id)
       analyticsEvent = { kind: 'playlist', id: playlist_id, url: link }
       break