feat(new-article-path): Revise pathname of article detail page #4196

for #4196
thematters · Apr 30, 2024 · 484c2b9 · 484c2b9
1 parent a69af9c
commit 484c2b9
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 24 deletions.
diff --git a/src/common/utils/route.test.ts b/src/common/utils/route.test.ts
@@ -53,6 +53,18 @@ describe('utils/route/toPath', () => {
       )
     })
 
+    it('should return the short hash path when the shortHash is provided', () => {
+      const { href } = toPath({
+        page: 'articleDetail',
+        article: {
+          ...MOCK_ARTILCE,
+          shortHash: 'r5ade0on7x1g',
+        },
+      })
+
+      expect(href).toBe(`/a/r5ade0on7x1g`)
+    })
+
     it('should return the correct path with utm paramaters', () => {
       const { href } = toPath({
         page: 'articleDetail',
@@ -178,8 +190,9 @@ describe('utils/route/toPath', () => {
       expect(href2).toBe(
         `/@${MOCK_ARTILCE.author.userName}/${
           fromGlobalId(MOCK_ARTILCE.id).id
-        }-${MOCK_ARTILCE.slug}-${MOCK_ARTILCE.mediaHash}#${MOCK_COMMENT
-          .parentComment?.id}-${MOCK_COMMENT.id}`
+        }-${MOCK_ARTILCE.slug}-${MOCK_ARTILCE.mediaHash}#${
+          MOCK_COMMENT.parentComment?.id
+        }-${MOCK_COMMENT.id}`
       )
     })
 

diff --git a/src/common/utils/route.ts b/src/common/utils/route.ts
@@ -12,6 +12,8 @@ interface ArticleArgs {
   id?: string
   slug: string
   mediaHash?: string | null
+  shortHash?: string | null
+  collectionId?: string | null
   author: {
     userName?: string | null
   }
@@ -109,25 +111,30 @@ export const toPath = (
         id,
         slug,
         mediaHash,
+        shortHash,
+        collectionId,
         author: { userName },
       } = args.article
 
-      href = `/@${userName}/${slug}-${mediaHash}`
+      href = shortHash
+        ? `/a/${shortHash}`
+        : `/@${userName}/${slug}-${mediaHash}`
 
       try {
         const { id: articleId } = fromGlobalId(id as string)
-        if (id && articleId) {
+        if (id && articleId && !shortHash) {
           href = `/@${userName}/${articleId}-${slug}${
             mediaHash ? '-' + mediaHash : ''
           }`
         }
-        if (!!args.collectionId) {
-          href = `${href}?collection=${args.collectionId}`
-        }
       } catch (err) {
         // do nothing
       }
 
+      if (collectionId) {
+        href = `${href}?collection=${collectionId}`
+      }
+
       break
     }
     case 'articleHistory': {

diff --git a/src/pages/a/[shortHash].tsx b/src/pages/a/[shortHash].tsx
@@ -0,0 +1,3 @@
+import ArticleDetail from '~/views/ArticleDetail'
+
+export default ArticleDetail
diff --git a/src/views/ArticleDetail/gql.ts b/src/views/ArticleDetail/gql.ts
@@ -19,6 +19,7 @@ const articlePublicFragment = gql`
     slug
     mediaHash
     dataHash
+    shortHash
     state
     cover
     summary
@@ -97,8 +98,8 @@ const articlePublicFragment = gql`
 `
 
 export const ARTICLE_AVAILABLE_TRANSLATIONS = gql`
-  query ArticleAvailableTranslations($mediaHash: String!) {
-    article(input: { mediaHash: $mediaHash }) {
+  query ArticleAvailableTranslations($mediaHash: String, $shortHash: String) {
+    article(input: { mediaHash: $mediaHash, shortHash: $shortHash }) {
       id
       availableTranslations
     }
@@ -118,12 +119,13 @@ export const ARTICLE_AVAILABLE_TRANSLATIONS_BY_NODE_ID = gql`
 
 export const ARTICLE_DETAIL_PUBLIC = gql`
   query ArticleDetailPublic(
-    $mediaHash: String!
+    $mediaHash: String
+    $shortHash: String
     $language: UserLanguage!
     $includeTranslation: Boolean = false
     $includeCanSuperLike: Boolean = true
   ) {
-    article(input: { mediaHash: $mediaHash }) {
+    article(input: { mediaHash: $mediaHash, shortHash: $shortHash }) {
       ...ArticlePublicArticle
     }
   }
@@ -176,8 +178,12 @@ export const ARTICLE_DETAIL_PRIVATE = gql`
 `
 
 export const ARTICLE_TRANSLATION = gql`
-  query ArticleTranslation($mediaHash: String!, $language: UserLanguage!) {
-    article(input: { mediaHash: $mediaHash }) {
+  query ArticleTranslation(
+    $mediaHash: String
+    $shortHash: String
+    $language: UserLanguage!
+  ) {
+    article(input: { mediaHash: $mediaHash, shortHash: $shortHash }) {
       id
       translation(input: { language: $language }) {
         content

diff --git a/src/views/ArticleDetail/index.tsx b/src/views/ArticleDetail/index.tsx
@@ -475,6 +475,7 @@ const ArticleDetail = ({
 }) => {
   const { getQuery, router, routerLang } = useRoute()
   const mediaHash = getQuery('mediaHash')
+  const shortHash = getQuery('shortHash')
   const articleId =
     (router.query.mediaHash as string)?.match(/^(\d+)/)?.[1] || ''
   const viewer = useContext(ViewerContext)
@@ -483,11 +484,11 @@ const ArticleDetail = ({
    * fetch public data
    */
   const isQueryByHash = !!(
-    mediaHash &&
-    isMediaHashPossiblyValid(mediaHash) &&
-    !articleId
+    (shortHash || (mediaHash && isMediaHashPossiblyValid(mediaHash)))
+    // && !articleId
   )
 
+  // - `/a/:shortHash`
   // backward compatible with:
   // - `/:username:/:articleId:-:slug:-:mediaHash`
   // - `/:username:/:articleId:`
@@ -497,6 +498,7 @@ const ArticleDetail = ({
     {
       variables: {
         mediaHash,
+        shortHash,
         language: routerLang || UserLanguage.ZhHant,
         includeTranslation,
       },
@@ -557,7 +559,7 @@ const ArticleDetail = ({
       await refetchPublic()
       await loadPrivate()
     })()
-  }, [mediaHash])
+  }, [mediaHash, shortHash])
 
   // fetch private data when mediaHash of public data is changed
   useEffect(() => {
@@ -569,13 +571,13 @@ const ArticleDetail = ({
     (d) => d.publishState === 'published'
   )[0]?.mediaHash
   useEffect(() => {
-    if (!article || !latestHash) {
-      return
+    if (shortHash || !article || !latestHash) {
+      return // don't rewrite URL for shortHash
     }
 
     const newPath = toPath({
       page: 'articleDetail',
-      article: { ...article, mediaHash: latestHash },
+      article: { ...article, mediaHash: latestHash, shortHash },
     })
 
     // parse current URL: router.asPath
@@ -675,18 +677,18 @@ const ArticleDetail = ({
 const ArticleDetailOuter = () => {
   const { getQuery, router, routerLang } = useRoute()
   const mediaHash = getQuery('mediaHash')
+  const shortHash = getQuery('shortHash')
   const articleId =
     (router.query.mediaHash as string)?.match(/^(\d+)/)?.[1] || ''
 
   const isQueryByHash = !!(
-    mediaHash &&
-    isMediaHashPossiblyValid(mediaHash) &&
-    !articleId
+    (mediaHash && isMediaHashPossiblyValid(mediaHash))
+    // && !articleId
   )
 
   const resultByHash = usePublicQuery<ArticleAvailableTranslationsQuery>(
     ARTICLE_AVAILABLE_TRANSLATIONS,
-    { variables: { mediaHash }, skip: !isQueryByHash }
+    { variables: { mediaHash, shortHash }, skip: !isQueryByHash }
   )
   const resultByNodeId = usePublicQuery<ArticleAvailableTranslationsQuery>(
     ARTICLE_AVAILABLE_TRANSLATIONS_BY_NODE_ID,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import ArticleDetail from '~/views/ArticleDetail'

		export default ArticleDetail