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

for #4196

src/pages/p/[shortHash].tsx

@@ -0,0 +1,3 @@
+import { ArticleDetailOuterByShortHash } from '~/views/ArticleDetail'
+
+export default ArticleDetailOuterByShortHash

src/views/ArticleDetail/gql.ts

@@ -19,6 +19,7 @@ const articlePublicFragment = gql`
     title
     slug
     mediaHash
+    shortHash
     state
     cover
     summary
@@ -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
     }
   }

src/views/ArticleDetail/index.tsx

@@ -514,7 +514,9 @@ const ArticleDetail = ({
 }) => {
   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)
@@ -524,8 +526,8 @@ const ArticleDetail = ({
    */
   const isQueryByHash = !!(
     mediaHash &&
-    isMediaHashPossiblyValid(mediaHash) &&
-    !articleId
+    isMediaHashPossiblyValid(mediaHash)
+    // && !articleId
   )
 
   // backward compatible with:
@@ -537,6 +539,7 @@ const ArticleDetail = ({
     {
       variables: {
         mediaHash,
+        shortHash,
         language: routerLang || UserLanguage.ZhHant,
         includeTranslation,
       },
@@ -807,4 +810,32 @@ const ArticleDetailOuter = () => {
   return <ArticleDetail includeTranslation={includeTranslation} />
 }
 
+export const ArticleDetailOuterByShortHash = () => {
+  const { getQuery, router, routerLang } = useRoute()
+  const shortHash = getQuery('shortHash')
+
+  const resultByHash = usePublicQuery<ArticleAvailableTranslationsQuery>(
+    ARTICLE_AVAILABLE_TRANSLATIONS,
+    { variables: { mediaHash }, skip: !isQueryByHash }
+  )
+  const { data } = resultByHash // : resultByNodeId
+  const loading = resultByHash.loading // || resultByNodeId.loading
+  const includeTranslation =
+    !!routerLang &&
+    (data?.article?.availableTranslations || []).includes(routerLang)
+
+  /**
+   * Rendering
+   */
+  if (loading) {
+    return (
+      <Layout.Main aside={<AuthorSidebar.Placeholder />}>
+        <Placeholder />
+      </Layout.Main>
+    )
+  }
+
+  return <ArticleDetail includeTranslation={includeTranslation} />
+}
+
 export default ArticleDetailOuter