From d942e18344cc6ce78c6c2ce93b3bd45e76adf926 Mon Sep 17 00:00:00 2001
From: TomasC <49659410+tx0c@users.noreply.github.com>
Date: Tue, 5 Mar 2024 08:31:03 +0000
Subject: [PATCH] feat(new-article-path): Revise pathname of article detail
 page #4196

for #4196
---
 src/pages/p/[shortHash].tsx       |  3 +++
 src/views/ArticleDetail/gql.ts    | 10 ++++++----
 src/views/ArticleDetail/index.tsx | 27 ++++++++++++++++-----------
 3 files changed, 25 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/p/[shortHash].tsx

diff --git a/src/pages/p/[shortHash].tsx b/src/pages/p/[shortHash].tsx
new file mode 100644
index 0000000000..5ce44354fd
--- /dev/null
+++ b/src/pages/p/[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
index 0a92901fda..8e06bfbfc8 100644
--- a/src/views/ArticleDetail/gql.ts
+++ b/src/views/ArticleDetail/gql.ts
@@ -19,6 +19,7 @@ const articlePublicFragment = gql`
     title
     slug
     mediaHash
+    shortHash
     state
     cover
     summary
@@ -94,8 +95,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
     }
@@ -115,12 +116,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
     }
   }
diff --git a/src/views/ArticleDetail/index.tsx b/src/views/ArticleDetail/index.tsx
index 2c6f27a5f9..e757e1243a 100644
--- a/src/views/ArticleDetail/index.tsx
+++ b/src/views/ArticleDetail/index.tsx
@@ -507,14 +507,16 @@ const BaseArticleDetail = ({
   )
 }
 
-const ArticleDetail = ({
+export const ArticleDetail = ({
   includeTranslation,
 }: {
   includeTranslation: boolean
 }) => {
   const { getQuery, router, routerLang } = useRoute()
   const [needRefetchData, setNeedRefetchData] = useState(false)
-  const mediaHash = getQuery('mediaHash')
+
+  const shortHash = getQuery('shortHash')
+  const mediaHash = getQuery('mediaHash') // will delete by mediaHash & by articleId logic in later PR
   const articleId =
     (router.query.mediaHash as string)?.match(/^(\d+)/)?.[1] || ''
   const viewer = useContext(ViewerContext)
@@ -523,9 +525,9 @@ const ArticleDetail = ({
    * fetch public data
    */
   const isQueryByHash = !!(
-    mediaHash &&
-    isMediaHashPossiblyValid(mediaHash) &&
-    !articleId
+    (mediaHash && isMediaHashPossiblyValid(mediaHash))
+    || (shortHash) // && looksValid(shortHash))
+    // && !articleId
   )
 
   // backward compatible with:
@@ -537,6 +539,7 @@ const ArticleDetail = ({
     {
       variables: {
         mediaHash,
+        shortHash,
         language: routerLang || UserLanguage.ZhHant,
         includeTranslation,
       },
@@ -764,21 +767,23 @@ const ArticleDetail = ({
   return <BaseArticleDetail article={article} privateFetched={privateFetched} />
 }
 
-const ArticleDetailOuter = () => {
+export const ArticleDetailOuter = () => {
   const { getQuery, router, routerLang } = useRoute()
-  const mediaHash = getQuery('mediaHash')
+
+  const shortHash = getQuery('shortHash')
+  const mediaHash = getQuery('mediaHash') // will delete by mediaHash & by articleId logic in later PR
   const articleId =
     (router.query.mediaHash as string)?.match(/^(\d+)/)?.[1] || ''
 
   const isQueryByHash = !!(
-    mediaHash &&
-    isMediaHashPossiblyValid(mediaHash) &&
-    !articleId
+    (mediaHash && isMediaHashPossiblyValid(mediaHash))
+    || shortHash
+    // && !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,