Merge pull request #4449 from thematters/develop

Release: v5.0.2

lang/default.json

@@ -730,10 +730,6 @@
     "defaultMessage": "Please set your transcation password.",
     "description": "PAYMENT_PASSWORD_NOT_SET"
   },
-  "Ayepqz": {
-    "defaultMessage": "Remove",
-    "description": "src/components/Tag/index.tsx"
-  },
   "B2As08": {
     "defaultMessage": "That's all",
     "description": "src/components/Interaction/InfiniteScroll/EndOfResults/index.tsx"

lang/en.json

@@ -730,10 +730,6 @@
     "defaultMessage": "Please set your transcation password.",
     "description": "PAYMENT_PASSWORD_NOT_SET"
   },
-  "Ayepqz": {
-    "defaultMessage": "Remove",
-    "description": "src/components/Tag/index.tsx"
-  },
   "B2As08": {
     "defaultMessage": "That's all",
     "description": "src/components/Interaction/InfiniteScroll/EndOfResults/index.tsx"

lang/zh-Hans.json

@@ -730,10 +730,6 @@
     "defaultMessage": "请先设定交易密码",
     "description": "PAYMENT_PASSWORD_NOT_SET"
   },
-  "Ayepqz": {
-    "defaultMessage": "移除",
-    "description": "src/components/Tag/index.tsx"
-  },
   "B2As08": {
     "defaultMessage": "没有更多",
     "description": "src/components/Interaction/InfiniteScroll/EndOfResults/index.tsx"

lang/zh-Hant.json

@@ -730,10 +730,6 @@
     "defaultMessage": "請先設定交易密碼",
     "description": "PAYMENT_PASSWORD_NOT_SET"
   },
-  "Ayepqz": {
-    "defaultMessage": "移除",
-    "description": "src/components/Tag/index.tsx"
-  },
   "B2As08": {
     "defaultMessage": "沒有更多",
     "description": "src/components/Interaction/InfiniteScroll/EndOfResults/index.tsx"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "codebase of Matters' website",
   "author": "Matters <[email protected]>",
   "engines": {

src/components/Context/index.ts

@@ -1,5 +1,4 @@
 export * from './ActiveCommentEditor'
-export * from './ArticleAppreciation'
 export * from './CommentDrafts'
 export * from './DraftDetailState'
 export * from './Features'

src/components/Dialogs/TagListDialog/index.tsx

@@ -1,6 +1,6 @@
 import { FormattedMessage } from 'react-intl'
 
-import { Dialog, Tag, useDialogSwitch } from '~/components'
+import { Dialog, ListTag, useDialogSwitch } from '~/components'
 import { DigestTagFragment } from '~/gql/graphql'
 
 import styles from './styles.module.css'
@@ -41,9 +41,8 @@ const BaseDialog = ({ tags, children }: TagListDialogProps) => {
           <ul className={styles.tags}>
             {tags.map((tag) => (
               <li key={tag.id}>
-                <Tag
+                <ListTag
                   tag={tag}
-                  type="list"
                   hasCount={false}
                   textIconProps={{ color: 'black', weight: 'medium' }}
                 />

src/components/Editor/Sidebar/Tags/index.tsx

@@ -5,8 +5,8 @@ import { analytics } from '~/common/utils'
 import {
   EditorSearchSelectDialog,
   Icon,
+  InlineTag,
   // SearchSelectNode,
-  Tag,
 } from '~/components'
 import { SearchSelectNode } from '~/components/Forms/SearchSelectForm'
 import { DigestTagFragment } from '~/gql/graphql'
@@ -63,10 +63,8 @@ const SidebarTags = ({
             <ul className={styles.list}>
               {tags.map((tag) => (
                 <li key={tag.id}>
-                  <Tag
+                  <InlineTag
                     tag={tag}
-                    type="inline"
-                    is="span"
                     onRemoveTag={() => {
                       editTags(tags.filter((t) => t.content !== tag.content))
                       analytics.trackEvent('click_button', {

src/components/Editor/TagCustomStagingArea/RecommendedTags/index.tsx

@@ -1,6 +1,6 @@
 import { FormattedMessage } from 'react-intl'
 
-import { Tag } from '~/components'
+import { InlineTag } from '~/components'
 import { SelectTag } from '~/components/SearchSelect/SearchingArea'
 import { EditorRecommendedTagsQuery } from '~/gql/graphql'
 
@@ -30,10 +30,8 @@ const RecommendedTags: React.FC<RecommendedTagsProps> = ({
       <ul className={styles.tagList}>
         {tags.map((tag) => (
           <li key={tag.id}>
-            <Tag
+            <InlineTag
               tag={tag}
-              type="inline"
-              is="span"
               onClick={!disabled ? () => onAddTag(tag) : undefined}
             />
           </li>

src/components/Editor/TagCustomStagingArea/SelectedTags/index.tsx

@@ -1,4 +1,4 @@
-import { Tag, Translate } from '~/components'
+import { InlineTag, Translate } from '~/components'
 import { SelectTag } from '~/components/SearchSelect/SearchingArea'
 import { EditorRecommendedTagsQuery } from '~/gql/graphql'
 
@@ -23,13 +23,7 @@ const SelectedTags: React.FC<SelectedTagsProps> = ({ tags, onRemoveTag }) => {
       <ul className={styles.tagList}>
         {tags.map((tag) => (
           <li key={tag.id}>
-            <Tag
-              tag={tag}
-              type="inline"
-              active
-              is="span"
-              onRemoveTag={() => onRemoveTag(tag)}
-            />
+            <InlineTag tag={tag} active onRemoveTag={() => onRemoveTag(tag)} />
           </li>
         ))}
       </ul>

src/components/Editor/TagCustomStagingArea/gql.ts

@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 
-import { Tag } from '~/components'
+import { ListTag } from '~/components/Tag'
 
 export const EDITOR_RECOMMENDED_TAGS = gql`
   query EditorRecommendedTags($userName: String!) {
@@ -16,5 +16,5 @@ export const EDITOR_RECOMMENDED_TAGS = gql`
       }
     }
   }
-  ${Tag.fragments.tag}
+  ${ListTag.fragments.tag}
 `

src/components/Notice/NoticeTag.tsx

@@ -2,7 +2,7 @@ import gql from 'graphql-tag'
 
 import { toPath } from '~/common/utils'
 import { LinkWrapper } from '~/components'
-import { Tag } from '~/components/Tag'
+import { ListTag } from '~/components/Tag'
 import { NoticeTagFragment } from '~/gql/graphql'
 
 import styles from './styles.module.css'
@@ -34,7 +34,7 @@ NoticeTag.fragments = {
       id
       ...DigestTag
     }
-    ${Tag.fragments.tag}
+    ${ListTag.fragments.tag}
   `,
 }
 

src/components/SearchSelect/SearchSelectNode/Tag/index.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import { ReactComponent as IconCircleCheckFill } from '@/public/static/icons/24px/circle-check-fill.svg'
 import { ReactComponent as IconCircleEmpty } from '@/public/static/icons/24px/circle-empty.svg'
 import { TEST_ID } from '~/common/enums'
-import { Card, Icon, Tag } from '~/components'
+import { Card, Icon, ListTag } from '~/components'
 import { DigestTagFragment } from '~/gql/graphql'
 
 import styles from '../styles.module.css'
@@ -33,7 +33,7 @@ const SearchSelectTag: React.FC<SearchSelectTagProps> = ({
       testId={TEST_ID.SEARCH_RESULTS_ITEM}
     >
       <section className={nodeClass}>
-        <Tag tag={tag} type="list" hasCount is="span" />
+        <ListTag tag={tag} hasCount is="span" />
 
         <span className={styles.iconSelect}>
           {inStagingArea && selected && (

src/components/SearchSelect/SearchingArea/EditorSearchingArea.tsx

@@ -182,15 +182,13 @@ const EditorSearchingArea: React.FC<SearchingAreaProps> = ({
     // Used to match links of the format like👇
     // https://matters.town/a/{shortHash}
     const regex = new RegExp(
-      `^https://${process.env.NEXT_PUBLIC_SITE_DOMAIN}/a/[a-zA-Z0-9]+$`
+      `^https://${process.env.NEXT_PUBLIC_SITE_DOMAIN}/a/[a-zA-Z0-9]+`
     )
     if (searchType === 'Article' && isUrl(key) && regex.test(key)) {
       const urlObj = parseURL(key)
       const shortHash = urlObj.pathname.split('/a/')[1].split('?')[0]
       setMode('article_url')
-      lazyArticleUrlQuery({
-        variables: { shortHash },
-      })
+      lazyArticleUrlQuery({ variables: { shortHash } })
     } else {
       const type = searchType
       lazySearch({

src/components/SearchSelect/SearchingArea/gql.ts

@@ -1,6 +1,8 @@
 import gql from 'graphql-tag'
 
-import { ArticleDigestDropdown, Tag, UserDigest } from './internal'
+import { ArticleTag } from '~/components/Tag'
+
+import { ArticleDigestDropdown, UserDigest } from './internal'
 
 export const SELECT_SEARCH = gql`
   query SelectSearch(
@@ -48,7 +50,7 @@ export const SELECT_SEARCH = gql`
   }
   ${UserDigest.Mini.fragments.user}
   ${ArticleDigestDropdown.fragments.article}
-  ${Tag.fragments.tag}
+  ${ArticleTag.fragments.tag}
 `
 
 export const LIST_VIEWER_ARTICLES = gql`

src/components/SearchSelect/SearchingArea/index.tsx

@@ -175,15 +175,13 @@ const SearchingArea: React.FC<SearchingAreaProps> = ({
     // Used to match links of the format like👇
     // https://matters.town/a/{shortHash}
     const regex = new RegExp(
-      `^https://${process.env.NEXT_PUBLIC_SITE_DOMAIN}/a/[a-zA-Z0-9]+$`
+      `^https://${process.env.NEXT_PUBLIC_SITE_DOMAIN}/a/[a-zA-Z0-9]+`
     )
     if (searchType === 'Article' && isUrl(key) && regex.test(key)) {
       const urlObj = parseURL(key)
       const shortHash = urlObj.pathname.split('/a/')[1].split('?')[0]
       setMode('article_url')
-      lazyArticleUrlQuery({
-        variables: { shortHash },
-      })
+      lazyArticleUrlQuery({ variables: { shortHash } })
     } else {
       const type = searchType === 'Invitee' ? 'User' : searchType
       lazySearch({

src/components/Tag/ArticleTag/ArticleTag.test.tsx

@@ -0,0 +1,20 @@
+import mockRouter from 'next-router-mock'
+import { describe, expect, it, vi } from 'vitest'
+
+import { render, screen } from '~/common/utils/test'
+import { ArticleTag } from '~/components'
+import { MOCK_TAG } from '~/stories/mocks'
+
+describe('<ArticleTag>', () => {
+  it('should render an ArticleTag', () => {
+    const handleClick = vi.fn()
+    render(<ArticleTag tag={MOCK_TAG} onClick={handleClick} />)
+
+    const $name = screen.getByText(new RegExp(MOCK_TAG.content, 'i'))
+    expect($name).toBeInTheDocument()
+
+    $name.click()
+    expect(mockRouter.asPath).toContain(MOCK_TAG.slug)
+    expect(handleClick).toBeCalledTimes(1)
+  })
+})

src/components/Tag/ArticleTag/index.tsx

@@ -0,0 +1,65 @@
+import classNames from 'classnames'
+import gql from 'graphql-tag'
+import Link from 'next/link'
+
+import { ReactComponent as IconHashTag } from '@/public/static/icons/24px/hashtag.svg'
+import { clampTag, toPath } from '~/common/utils'
+import { Icon, TextIcon, TextIconProps } from '~/components'
+import { DigestTagFragment } from '~/gql/graphql'
+
+import styles from './styles.module.css'
+
+interface ArticleTagProps {
+  tag: DigestTagFragment
+  textIconProps?: TextIconProps
+  canClamp?: boolean
+  onClick?: () => void
+}
+
+export const ArticleTag = ({
+  tag,
+  textIconProps: customTextIconProps,
+  canClamp = false,
+  onClick,
+}: ArticleTagProps) => {
+  const tagClasses = classNames({
+    [styles.article]: 'article',
+    [styles.clickable]: !!onClick,
+  })
+
+  const tagName = canClamp ? clampTag(tag.content) : tag.content
+
+  const path = toPath({
+    page: 'tagDetail',
+    tag,
+  })
+
+  const textIconProps: TextIconProps = {
+    size: 14,
+    spacing: 0,
+    weight: 'normal',
+    icon: <Icon icon={IconHashTag} color="greyDarker" />,
+    ...customTextIconProps,
+  }
+
+  return (
+    <Link {...path} legacyBehavior>
+      <a className={tagClasses} onClick={onClick}>
+        <TextIcon {...textIconProps} size={textIconProps.size} allowUserSelect>
+          <span className={styles.name}>{tagName}</span>
+        </TextIcon>
+      </a>
+    </Link>
+  )
+}
+
+ArticleTag.fragments = {
+  tag: gql`
+    fragment DigestTag on Tag {
+      id
+      content
+      numArticles
+      numAuthors
+    }
+  `,
+}