Merge pull request #683 from thematters/feat/new-article-url

feat: handle short hash article url
thematters · May 3, 2024 · 898ee2d · 898ee2d
2 parents 0f4fc3f + aaf577a
commit 898ee2d
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 35 deletions.
diff --git a/src/components/IcymiTopic/AddArticle/index.tsx b/src/components/IcymiTopic/AddArticle/index.tsx
@@ -1,9 +1,16 @@
+import type ApolloClient from 'apollo-client'
+
 import * as React from 'react'
 import { Input, message } from 'antd'
+import _get from 'lodash/get'
+import { ApolloConsumer } from 'react-apollo'
 
 import { toGlobalId } from '../../../utils'
 import ErrorMessage from '../../ErrorMessage'
 import withAddArticle, { ChildProps } from './withAddArticle'
+import { PATH_REGEXP } from '../../../constants'
+
+import QUERY_ARTICLE from '../../../gql/queries/articleId.gql'
 
 const { Search } = Input
 
@@ -20,32 +27,46 @@ class AddArticle extends React.Component<ChildProps, AddArticleState> {
     error: null,
   }
 
-  private _getArticleId = (input: string): string | null => {
-    let _input = input
-    const isLink = input.startsWith('http')
+  private _getArticleId = async (
+    input: string,
+    client: ApolloClient<any>
+  ): Promise<string | null> => {
+    const isLink = input.startsWith('http') && input.includes('matters.town')
     if (isLink) {
-      _input =
-        input
-          .split('#')[0]
-          .split('?')[0]
-          .split('/')
-          .slice(-1)[0]
-          .split('-')[0] ?? ''
+      const path = input.split('matters.town')[1]
+      if (PATH_REGEXP.articleDetail.test(path)) {
+        const mediaHash = path.split('#')[0].split('?')[0].split('-').pop()
+        const { data } = await client.query({
+          query: QUERY_ARTICLE,
+          variables: { input: { mediaHash } },
+        })
+        return _get(data, 'article.id') ?? null
+      }
+
+      if (PATH_REGEXP.articleDetailShortHash.test(path)) {
+        const shortHash = path.split('/a/')[1]
+        const { data } = await client.query({
+          query: QUERY_ARTICLE,
+          variables: { input: { shortHash } },
+        })
+        return _get(data, 'article.id') ?? null
+      }
     }
-    const id = parseInt(_input)
+    const id = parseInt(input)
     if (id) {
       return toGlobalId({ type: 'Article', id })
     } else {
       return null
     }
   }
 
-  private _onSubmit = async () => {
+  private _onSubmit = async (client: ApolloClient<any>) => {
     this.setState({ loading: true, error: null })
 
     const { mutate, id, articleIds } = this.props
     const { articleInput } = this.state
-    const articleId = this._getArticleId(articleInput)
+
+    const articleId = await this._getArticleId(articleInput, client)
 
     if (articleId && !articleIds.includes(articleId)) {
       try {
@@ -86,17 +107,21 @@ class AddArticle extends React.Component<ChildProps, AddArticleState> {
     }
 
     return (
-      <Search
-        onChange={this._onChange}
-        onSearch={this._onSubmit}
-        value={articleInput}
-        // url max length
-        maxLength={2048}
-        placeholder="輸入文章ID或連結"
-        size="small"
-        enterButton="添加"
-        disabled={loading || this.props.disabled}
-      />
+      <ApolloConsumer>
+        {(client) => (
+          <Search
+            onChange={this._onChange}
+            onSearch={() => this._onSubmit(client)}
+            value={articleInput}
+            // url max length
+            maxLength={2048}
+            placeholder="輸入文章ID或連結"
+            size="small"
+            enterButton="添加"
+            disabled={loading || this.props.disabled}
+          />
+        )}
+      </ApolloConsumer>
     )
   }
 }

diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx
@@ -1,3 +1,5 @@
+import type ApolloClient from 'apollo-client'
+
 import * as React from 'react'
 import { withRouter, RouteComponentProps } from 'react-router-dom'
 import { Row, Col, Input, Button, message } from 'antd'
@@ -11,7 +13,8 @@ import { getSearchKey, getParsedQS } from '../../utils'
 import './style.less'
 import { PATH_REGEXP } from '../../constants'
 import gql from 'graphql-tag'
-import ApolloClient from 'apollo-client'
+
+import QUERY_ARTICLE from '../../gql/queries/articleId.gql'
 
 type SearchBarProps = {
   placeholder: string
@@ -29,14 +32,6 @@ const QUERY_USER = gql`
   }
 `
 
-const QUERY_ARTICLE = gql`
-  query OSSQueryArticle($input: ArticleInput!) {
-    article(input: $input) {
-      id
-    }
-  }
-`
-
 class SearchBar extends React.Component<
   RouteComponentProps & SearchBarProps,
   SearchBarState
@@ -82,6 +77,21 @@ class SearchBar extends React.Component<
       })
       const articleId = _get(data, 'article.id')
 
+      if (articleId) {
+        history.push(`/articles/${articleId}`)
+      } else {
+        message.error('請輸入正確的文章連結')
+      }
+    }
+    const isShortHashArticleLink = PATH_REGEXP.articleDetailShortHash.test(path)
+    if (isShortHashArticleLink) {
+      const shortHash = path.split('/a/')[1]
+      const { data } = await client.query({
+        query: QUERY_ARTICLE,
+        variables: { input: { shortHash } },
+      })
+      const articleId = _get(data, 'article.id')
+
       if (articleId) {
         history.push(`/articles/${articleId}`)
       } else {

diff --git a/src/constants/route.ts b/src/constants/route.ts
@@ -84,6 +84,7 @@ export const PAGE_TITLE = {
 }
 
 export const PATH_REGEXP = {
-  articleDetail: /^\/@([^@\/]+?)\/.*-([^-\/]+?)(?:\/)?$/i,
-  user: /^\/@([^@\/]+?)(?:\/)?$/i,
+  articleDetail: /^\/@([^@/]+?)\/.*-([^-/]+?)(?:\/)?$/i,
+  articleDetailShortHash: /^\/a\/[a-zA-Z0-9]+$/i,
+  user: /^\/@([^@/]+?)(?:\/)?$/i,
 }
diff --git a/src/gql/queries/articleId.gql b/src/gql/queries/articleId.gql
@@ -0,0 +1,5 @@
+query OSSQueryArticle($input: ArticleInput!) {
+  article(input: $input) {
+    id
+  }
+}