fix(Notice): Improve Navigation Logic in Notice Components

thematters · Jan 17, 2025 · 13ca85e · 13ca85e
1 parent 18eb4eb
commit 13ca85e
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 14 deletions.
diff --git a/src/components/Notice/NoticeComment.tsx b/src/components/Notice/NoticeComment.tsx
@@ -2,8 +2,15 @@ import gql from 'graphql-tag'
 import { FormattedMessage, useIntl } from 'react-intl'
 
 import { PATHS } from '~/common/enums'
-import { toPath } from '~/common/utils'
-import { LinkWrapper, Media, MomentDetailDialog, toast } from '~/components'
+import { MOMENT_DIGEST_REFERRER } from '~/common/enums/moment'
+import { sessionStorage, toPath } from '~/common/utils'
+import {
+  LinkWrapper,
+  Media,
+  MomentDetailDialog,
+  toast,
+  useRoute,
+} from '~/components'
 import { CommentContent } from '~/components/Comment/Content'
 import { NoticeCommentFragment } from '~/gql/graphql'
 
@@ -57,6 +64,7 @@ const NoticeComment = ({
   comment: NoticeCommentFragment | null
 }) => {
   const intl = useIntl()
+  const { router } = useRoute()
 
   const article =
     comment?.node.__typename === 'Article' ? comment.node : undefined
@@ -65,6 +73,15 @@ const NoticeComment = ({
   const moment =
     comment?.node.__typename === 'Moment' ? comment.node : undefined
 
+  const setReferrer = () => {
+    sessionStorage.set(MOMENT_DIGEST_REFERRER, true)
+  }
+
+  const goToMomentDetail = () => {
+    setReferrer()
+    router.push(path.href)
+  }
+
   if (!comment) {
     return null
   }
@@ -158,11 +175,17 @@ const NoticeComment = ({
     return (
       <>
         <Media at="sm">
-          <LinkWrapper {...path}>
+          <a
+            href={path.href}
+            onClick={(e) => {
+              e.preventDefault()
+              goToMomentDetail()
+            }}
+          >
             <section>
               <NoticeContentDigest content={comment.content || ''} />
             </section>
-          </LinkWrapper>
+          </a>
         </Media>
         <Media greaterThan="sm">
           <MomentDetailDialog shortHash={moment.shortHash}>

diff --git a/src/components/Notice/NoticeMomentTitle.tsx b/src/components/Notice/NoticeMomentTitle.tsx
@@ -1,9 +1,15 @@
 import gql from 'graphql-tag'
-import Link from 'next/link'
 import { useIntl } from 'react-intl'
 
 import { TEST_ID } from '~/common/enums'
-import { stripHtml, toPath, truncateNoticeTitle } from '~/common/utils'
+import { MOMENT_DIGEST_REFERRER } from '~/common/enums/moment'
+import {
+  sessionStorage,
+  stripHtml,
+  toPath,
+  truncateNoticeTitle,
+} from '~/common/utils'
+import { useRoute } from '~/components'
 import { NoticeMomentTitleFragment } from '~/gql/graphql'
 
 import { Media, MomentDetailDialog } from '..'
@@ -15,6 +21,7 @@ const NoticeMomentTitle = ({
   moment: NoticeMomentTitleFragment
 }) => {
   const intl = useIntl()
+  const { router } = useRoute()
 
   const path = toPath({
     page: 'momentDetail',
@@ -30,17 +37,29 @@ const NoticeMomentTitle = ({
         .repeat(Math.min(3, moment.assets.length))
     : ''
 
+  const goToMomentDetail = () => {
+    setReferrer()
+    router.push(path.href)
+  }
+
+  const setReferrer = () => {
+    sessionStorage.set(MOMENT_DIGEST_REFERRER, true)
+  }
+
   return (
     <>
       <Media at="sm">
-        <Link {...path}>
-          <a
-            className={styles.noticeMomentTitle}
-            data-test-id={TEST_ID.NOTICE_MOMENT_TITLE}
-          >
-            {title} {images}
-          </a>
-        </Link>
+        <a
+          href={path.href}
+          className={styles.noticeMomentTitle}
+          data-test-id={TEST_ID.NOTICE_MOMENT_TITLE}
+          onClick={(e) => {
+            e.preventDefault()
+            goToMomentDetail()
+          }}
+        >
+          {title} {images}
+        </a>
       </Media>
       <Media greaterThan="sm" className={styles.noticeMomentTitleContainer}>
         <MomentDetailDialog shortHash={moment.shortHash}>