fix(notice): correct moment notices

lang/default.json

@@ -743,6 +743,9 @@
     "defaultMessage": "Articles",
     "description": "src/views/Follow/Tabs/index.tsx"
   },
+  "AeVndq": {
+    "defaultMessage": "mentioned you in a comment at {commentMoment}"
+  },
   "AlHYvk": {
     "defaultMessage": "{type} edited"
   },
@@ -1616,6 +1619,9 @@
     "defaultMessage": "Back",
     "description": "src/components/Forms/PaymentForm"
   },
+  "Qlzm0s": {
+    "defaultMessage": "mentioned you in a moment at"
+  },
   "QvPc1q": {
     "defaultMessage": "Upload Cover"
   },
@@ -1954,9 +1960,6 @@
   "WxhsrG": {
     "defaultMessage": "Please connect email"
   },
-  "X9a1XW": {
-    "defaultMessage": "mentioned you in a moment comment at {commentMoment}"
-  },
   "XH1s8E": {
     "defaultMessage": "Delete {commentType}",
     "description": "src/components/CircleComment/DropdownActions/DeleteComment/Dialog.tsx"
@@ -2425,9 +2428,6 @@
     "defaultMessage": "Pending",
     "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"
   },
-  "fkQOxQ": {
-    "defaultMessage": "mentioned you in moment"
-  },
   "fnv5rD": {
     "defaultMessage": "like article (current {total} likes)"
   },

lang/en.json

@@ -743,6 +743,9 @@
     "defaultMessage": "Articles",
     "description": "src/views/Follow/Tabs/index.tsx"
   },
+  "AeVndq": {
+    "defaultMessage": "mentioned you in a comment at {commentMoment}"
+  },
   "AlHYvk": {
     "defaultMessage": "{type} edited"
   },
@@ -1616,6 +1619,9 @@
     "defaultMessage": "Back",
     "description": "src/components/Forms/PaymentForm"
   },
+  "Qlzm0s": {
+    "defaultMessage": "mentioned you in a moment at"
+  },
   "QvPc1q": {
     "defaultMessage": "Upload Cover"
   },
@@ -1954,9 +1960,6 @@
   "WxhsrG": {
     "defaultMessage": "Please connect email"
   },
-  "X9a1XW": {
-    "defaultMessage": "mentioned you in a moment comment at {commentMoment}"
-  },
   "XH1s8E": {
     "defaultMessage": "Delete {commentType}",
     "description": "src/components/CircleComment/DropdownActions/DeleteComment/Dialog.tsx"
@@ -2425,9 +2428,6 @@
     "defaultMessage": "Pending",
     "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"
   },
-  "fkQOxQ": {
-    "defaultMessage": "mentioned you in moment"
-  },
   "fnv5rD": {
     "defaultMessage": "like article (current {total} likes)"
   },

lang/zh-Hans.json

@@ -743,6 +743,9 @@
     "defaultMessage": "只看文章",
     "description": "src/views/Follow/Tabs/index.tsx"
   },
+  "AeVndq": {
+    "defaultMessage": "在动态留言中提及了你 {commentMoment}"
+  },
   "AlHYvk": {
     "defaultMessage": "{type}已编辑"
   },
@@ -1616,6 +1619,9 @@
     "defaultMessage": "上一步",
     "description": "src/components/Forms/PaymentForm"
   },
+  "Qlzm0s": {
+    "defaultMessage": "在动态中提及了你"
+  },
   "QvPc1q": {
     "defaultMessage": "上传封面"
   },
@@ -1954,9 +1960,6 @@
   "WxhsrG": {
     "defaultMessage": "请先绑定邮箱"
   },
-  "X9a1XW": {
-    "defaultMessage": "在 {commentMoment} 留言中提到了你"
-  },
   "XH1s8E": {
     "defaultMessage": "刪除{commentType}",
     "description": "src/components/CircleComment/DropdownActions/DeleteComment/Dialog.tsx"
@@ -2425,9 +2428,6 @@
     "defaultMessage": "邀请中",
     "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"
   },
-  "fkQOxQ": {
-    "defaultMessage": "在动态中提及了你"
-  },
   "fnv5rD": {
     "defaultMessage": "赞赏作品（当前 {total} 次赞赏）"
   },

lang/zh-Hant.json

@@ -743,6 +743,9 @@
     "defaultMessage": "只看文章",
     "description": "src/views/Follow/Tabs/index.tsx"
   },
+  "AeVndq": {
+    "defaultMessage": "在動態留言中提及了你 {commentMoment}"
+  },
   "AlHYvk": {
     "defaultMessage": "{type}已編輯"
   },
@@ -1616,6 +1619,9 @@
     "defaultMessage": "上一步",
     "description": "src/components/Forms/PaymentForm"
   },
+  "Qlzm0s": {
+    "defaultMessage": "在動態中提及了你"
+  },
   "QvPc1q": {
     "defaultMessage": "上傳封面"
   },
@@ -1954,9 +1960,6 @@
   "WxhsrG": {
     "defaultMessage": "請先綁定電子郵件"
   },
-  "X9a1XW": {
-    "defaultMessage": "在 {commentMoment} 留言中提到了你"
-  },
   "XH1s8E": {
     "defaultMessage": "刪除{commentType}",
     "description": "src/components/CircleComment/DropdownActions/DeleteComment/Dialog.tsx"
@@ -2425,9 +2428,6 @@
     "defaultMessage": "邀請中",
     "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"
   },
-  "fkQOxQ": {
-    "defaultMessage": "在動態中提及了你"
-  },
   "fnv5rD": {
     "defaultMessage": "讚賞作品（當前 {total} 次讚賞）"
   },

src/common/enums/test.ts

@@ -117,6 +117,7 @@ export enum TEST_ID {
   NOTICE_COMMENT_MENTIONED_YOU = 'notice/comment-mentioned-you',
   NOTICE_COMMENT_PINNED = 'notice/comment-pinned',
   NOTICE_ARTICLE_NEW_COMMENT = 'notice/article-new-comment',
+  NOTICE_MOMENT_NEW_COMMENT = 'notice/moment-new-comment',
   NOTICE_COMMENT_LIKED = 'notice/comment-liked',
   NOTICE_SUBSCRIBED_ARTICLE_NEW_COMMENT = 'notice/subscribed-article-new-comment',
   NOTICE_CIRCLE_NEW_BROADCAST = 'notice/circle-new-broadcast',

src/common/utils/text/index.ts

@@ -1,4 +1,5 @@
 export * from './article'
+export * from './moment'
 export * from './tag'
 export * from './user'
 

src/common/utils/text/moment.test.ts

@@ -2,19 +2,21 @@ import { describe, expect, it } from 'vitest'
 
 import { UserLanguage } from '~/gql/graphql'
 
-import { truncateTitle } from './moment'
+import { truncateMomentTitle } from './moment'
 
-describe('utils/text/moment/truncateTitle', () => {
+describe('utils/text/moment/truncateMomentTitle', () => {
   it('should not truncate if under 10 characters', () => {
-    expect(truncateTitle('這篇文章真的很厲害！', 10, UserLanguage.ZhHans)).toBe(
-      '這篇文章真的很厲害！'
+    expect(
+      truncateMomentTitle('這篇文章真的很厲害！', 10, UserLanguage.ZhHans)
+    ).toBe('這篇文章真的很厲害！')
+    expect(truncateMomentTitle('很厲害！', 10, UserLanguage.ZhHant)).toBe(
+      '很厲害！'
     )
-    expect(truncateTitle('很厲害！', 10, UserLanguage.ZhHant)).toBe('很厲害！')
   })
 
   it('should truncate if over 10 characters', () => {
     expect(
-      truncateTitle(
+      truncateMomentTitle(
         '這篇文章真的很厲害，大家應該都來看一下！',
         10,
         UserLanguage.ZhHant
@@ -24,34 +26,38 @@ describe('utils/text/moment/truncateTitle', () => {
 
   it('should truncate when the title is over 10 characters and the mentions are at the end', () => {
     expect(
-      truncateTitle(
+      truncateMomentTitle(
         '這篇文章真的很厲害，大家應該都來看一下 @user1 @user2',
         10,
         UserLanguage.ZhHant
       )
     ).toBe('這篇文章真的很厲害，...@user1 @user2')
     expect(
-      truncateTitle(
+      truncateMomentTitle(
         '這篇文章真的很厲害，大家應該都來看一下！ @user1 @user2',
         10,
         UserLanguage.ZhHant
       )
     ).toBe('這篇文章真的很厲害，...@user1 @user2')
     expect(
-      truncateTitle('這是一個時刻！！！！！！！@jj', 10, UserLanguage.ZhHant)
+      truncateMomentTitle(
+        '這是一個時刻！！！！！！！@jj',
+        10,
+        UserLanguage.ZhHant
+      )
     ).toBe('這是一個時刻！！！！...@jj')
   })
 
   it('should truncate if over 10 characters with tagged users in the middle or the beginning', () => {
     expect(
-      truncateTitle(
+      truncateMomentTitle(
         '我和 @zhangsan 在台北一起去吃吃吃！',
         10,
         UserLanguage.ZhHans
       )
     ).toBe('我和 @zhangsan 在台北一起去...')
     expect(
-      truncateTitle(
+      truncateMomentTitle(
         '@zhangsan 和我在台北一起去吃吃吃！',
         10,
         UserLanguage.ZhHans
@@ -61,7 +67,7 @@ describe('utils/text/moment/truncateTitle', () => {
 
   it('should truncate characters to when the mention is a bit spread out', () => {
     expect(
-      truncateTitle(
+      truncateMomentTitle(
         '我和 @zhangsan 還有 @yp 在台北一起去吃吃吃！',
         10,
         UserLanguage.ZhHans
@@ -70,13 +76,15 @@ describe('utils/text/moment/truncateTitle', () => {
   })
 
   it('should truncate characters to under 10 words for english', () => {
-    expect(truncateTitle('This is a very long sentence.')).toBe('This is a...')
-    expect(truncateTitle('Hello, world.')).toBe('Hello,...')
+    expect(truncateMomentTitle('This is a very long sentence.')).toBe(
+      'This is a...'
+    )
+    expect(truncateMomentTitle('Hello, world.')).toBe('Hello,...')
   })
 
   it('should truncate if over 10 characters with tagged users and remaining length is 0 while having english characters', () => {
     expect(
-      truncateTitle('This is a craaaazy article here! @user1 @user2')
+      truncateMomentTitle('This is a craaaazy article here! @user1 @user2')
     ).toBe('This is a...@user1 @user2')
   })
 })

src/common/utils/text/moment.ts

@@ -8,7 +8,7 @@ import { UserLanguage } from '~/gql/graphql'
  * @param locale - The locale to determine the truncation rules. Defaults to 'en'.
  * @returns The truncated title with preserved tagged users.
  */
-export const truncateTitle = (
+export const truncateMomentTitle = (
   title: string,
   maxLength: number = 10,
   locale: UserLanguage = UserLanguage.En

src/components/Notice/CommentNotice/ArticleNewCommentNotice.tsx

@@ -24,6 +24,7 @@ const ArticleNewCommentNotice = ({
     notice.comment?.node.__typename === 'Article'
       ? notice.comment.node
       : undefined
+
   return (
     <NoticeDigest
       notice={notice}

src/components/Notice/CommentNotice/CommentLikedNotice.tsx

@@ -17,12 +17,18 @@ const CommentLikedNotice = ({ notice }: { notice: CommentNoticeFragment }) => {
     return null
   }
 
+  const commentMoment =
+    notice.comment.node.__typename === 'Moment'
+      ? notice.comment.node
+      : undefined
+
   return (
     <NoticeDigest
       notice={notice}
       action={
         <FormattedMessage defaultMessage="liked your comment" id="ZNK0I9" />
       }
+      title={commentMoment && <NoticeMomentTitle moment={commentMoment} />}
       content={<NoticeComment comment={notice.comment} />}
       testId={TEST_ID.NOTICE_COMMENT_LIKED}
     />

src/components/Notice/CommentNotice/CommentMentionedYouNotice.tsx

@@ -1,11 +1,8 @@
 import gql from 'graphql-tag'
-import { useContext } from 'react'
-import { FormattedMessage, useIntl } from 'react-intl'
+import { FormattedMessage } from 'react-intl'
 
 import { TEST_ID } from '~/common/enums'
-import { stripHtml, toPath } from '~/common/utils'
-import { truncateTitle } from '~/common/utils/text/moment'
-import { LanguageContext } from '~/components/Context'
+import { toPath } from '~/common/utils'
 import { CommentMentionedYouNoticeFragment } from '~/gql/graphql'
 
 import NoticeActorAvatar from '../NoticeActorAvatar'
@@ -22,9 +19,6 @@ const CommentMentionedYouNotice = ({
 }: {
   notice: CommentMentionedYouNoticeFragment
 }) => {
-  const { lang } = useContext(LanguageContext)
-  const intl = useIntl()
-
   if (!notice.actors) {
     return null
   }
@@ -47,42 +41,17 @@ const CommentMentionedYouNotice = ({
     return null
   }
 
-  const circleCommentPath = toPath({
-    page: 'commentDetail',
-    comment: latestComment,
-    article: commentArticle,
-    circle: commentCircle,
-  })
-
   return (
     <>
       {commentMoment && (
         <NoticeDigest
           notice={notice}
           action={
             <FormattedMessage
-              defaultMessage="mentioned you in a moment comment at {commentMoment}"
-              id="X9a1XW"
+              defaultMessage="mentioned you in a comment at {commentMoment}"
+              id="AeVndq"
               values={{
-                commentMoment: (
-                  <NoticeMomentTitle
-                    moment={commentMoment}
-                    title={`${truncateTitle(
-                      stripHtml(commentMoment.content || ''),
-                      10,
-                      lang
-                    )} ${
-                      commentMoment.assets?.length
-                        ? intl
-                            .formatMessage({
-                              defaultMessage: `[image]`,
-                              id: 'W3tqQO',
-                            })
-                            .repeat(Math.min(3, commentMoment.assets.length))
-                        : ''
-                    }`}
-                  />
-                ),
+                commentMoment: <NoticeMomentTitle moment={commentMoment} />,
               }}
             />
           }
@@ -119,7 +88,12 @@ const CommentMentionedYouNotice = ({
                 commentCircle: (
                   <NoticeCircleName
                     circle={commentCircle}
-                    path={circleCommentPath}
+                    path={toPath({
+                      page: 'commentDetail',
+                      comment: latestComment,
+                      article: commentArticle,
+                      circle: commentCircle,
+                    })}
                   />
                 ),
               }}