[PAY-1748][PAY-1731][PAY-1729][PAY-1730] DMs link fixes (#3946)

AudiusProject · Aug 25, 2023 · a522294 · a522294
1 parent adea357
commit a522294
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 48 deletions.
diff --git a/packages/mobile/src/components/core/Hyperlink.tsx b/packages/mobile/src/components/core/Hyperlink.tsx
@@ -52,7 +52,6 @@ export const Hyperlink = (props: HyperlinkProps) => {
     source,
     styles: stylesProp,
     style,
-    warnExternal,
     ...other
   } = props
   const styles = useStyles()
@@ -99,13 +98,13 @@ export const Hyperlink = (props: HyperlinkProps) => {
 
   const handlePress = useCallback(
     (url) => {
-      if (warnExternal && !isAudiusUrl(url)) {
+      if (!isAudiusUrl(url)) {
         openLeavingAudiusModal({ link: url })
       } else {
         openLink(url)
       }
     },
-    [openLink, warnExternal, openLeavingAudiusModal]
+    [openLink, openLeavingAudiusModal]
   )
 
   const renderLink = useCallback(

diff --git a/packages/mobile/src/screens/chat-screen/ChatMessageListItem.tsx b/packages/mobile/src/screens/chat-screen/ChatMessageListItem.tsx
@@ -322,7 +322,6 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
                       ]}
                     >
                       <Hyperlink
-                        warnExternal
                         text={message.message}
                         styles={{
                           root: [

diff --git a/packages/web/src/components/link/ExternalLink.tsx b/packages/web/src/components/link/ExternalLink.tsx
@@ -1,6 +1,6 @@
 import { MouseEvent, useCallback } from 'react'
 
-import { Name } from '@audius/common'
+import { Name, useLeavingAudiusModal } from '@audius/common'
 
 import { make, useRecord } from 'common/store/analytics/actions'
 
@@ -10,10 +10,24 @@ type ExternalLinkProps = LinkProps & {
   source?: 'profile page' | 'track page' | 'collection page'
 }
 
+const allowList = [
+  'facebook.com',
+  'www.facebook.com',
+  'instagram.com',
+  'www.instagram.com',
+  'tiktok.com',
+  'www.tiktok.com',
+  'twitter.com',
+  'www.twitter.com',
+  'x.com',
+  'www.x.com'
+]
+
 export const ExternalLink = (props: ExternalLinkProps) => {
   const { to, onClick, source, ...other } = props
 
   const record = useRecord()
+  const { onOpen: openLeavingAudiusModal } = useLeavingAudiusModal()
 
   const handleClick = useCallback(
     (event: MouseEvent<HTMLAnchorElement>) => {
@@ -27,8 +41,12 @@ export const ExternalLink = (props: ExternalLinkProps) => {
           })
         )
       }
+      if (!allowList.includes(new URL(to as string).hostname)) {
+        event.preventDefault()
+        openLeavingAudiusModal({ link: to as string })
+      }
     },
-    [onClick, record, source]
+    [onClick, record, source, openLeavingAudiusModal, to]
   )
 
   return (

diff --git a/packages/web/src/pages/chat-page/components/ChatMessageListItem.tsx b/packages/web/src/pages/chat-page/components/ChatMessageListItem.tsx
@@ -9,24 +9,20 @@ import {
   ReactionTypes,
   useProxySelector,
   formatMessageDate,
-  isAudiusUrl,
-  getPathFromAudiusUrl,
   isTrackUrl,
   isCollectionUrl,
   ChatMessageWithExtras,
   Status,
-  useCanSendMessage,
-  useLeavingAudiusModal
+  useCanSendMessage
 } from '@audius/common'
 import { IconError, IconPlus, PopupPosition } from '@audius/stems'
 import cn from 'classnames'
-import { push as pushRoute } from 'connected-react-router'
-import Linkify from 'linkify-react'
 import { find } from 'linkifyjs'
 import { useDispatch } from 'react-redux'
 
 import { useSelector } from 'common/hooks/useSelector'
 import { reactionMap } from 'components/notification/Notification/components/Reaction'
+import { UserGeneratedText } from 'components/user-generated-text'
 
 import { ReactComponent as ChatTail } from '../../../assets/img/ChatTail.svg'
 
@@ -59,7 +55,6 @@ export const ChatMessageListItem = (props: ChatMessageListItemProps) => {
   // State
   const [isReactionPopupVisible, setReactionPopupVisible] = useState(false)
   const [emptyUnfurl, setEmptyUnfurl] = useState(false)
-  const { onOpen: openLeavingAudiusModal } = useLeavingAudiusModal()
 
   // Selectors
   const userId = useSelector(getUserId)
@@ -110,19 +105,6 @@ export const ChatMessageListItem = (props: ChatMessageListItemProps) => {
     [dispatch, handleCloseReactionPopup, userId, chatId, message]
   )
 
-  const onClickInternalLink = useCallback(
-    (url: string) => {
-      dispatch(pushRoute(url))
-    },
-    [dispatch]
-  )
-  const onClickExternalLink = useCallback(
-    (url: string) => {
-      openLeavingAudiusModal({ link: url })
-    },
-    [openLeavingAudiusModal]
-  )
-
   const handleResendClicked = useCallback(() => {
     dispatch(
       sendMessage({
@@ -226,28 +208,7 @@ export const ChatMessageListItem = (props: ChatMessageListItemProps) => {
           ) : null}
           {!hideMessage ? (
             <div className={styles.text}>
-              <Linkify
-                options={{
-                  attributes: {
-                    onClick: (event: React.MouseEvent<HTMLAnchorElement>) => {
-                      const url = event.currentTarget.href
-                      event.nativeEvent.preventDefault()
-                      if (isAudiusUrl(url)) {
-                        const path = getPathFromAudiusUrl(url)
-                        onClickInternalLink(path ?? '/')
-                      } else {
-                        onClickExternalLink(url)
-                      }
-                    }
-                  },
-                  rel: 'noreferrer noopener',
-                  target: (href) => {
-                    return isAudiusUrl(href) ? '' : '_blank'
-                  }
-                }}
-              >
-                {message.message}
-              </Linkify>
+              <UserGeneratedText>{message.message}</UserGeneratedText>
             </div>
           ) : null}
         </div>

diff --git a/packages/web/src/pages/chat-page/components/LinkPreview.module.css b/packages/web/src/pages/chat-page/components/LinkPreview.module.css
@@ -40,6 +40,8 @@
 .domain {
   padding: var(--unit-1) var(--unit-4);
   background-color: var(--neutral-light-10);
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .text {
@@ -54,6 +56,8 @@
   font-weight: var(--font-bold);
   font-size: var(--font-l);
   line-height: 150%;
+  word-break: break-word;
+  hyphens: auto;
 }
 
 .description {