Merge pull request #2946 from thematters/develop

Release: v4.11.0

.husky/pre-commit

@@ -2,4 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 npm run format -- --list-different && \
-npm run lint
+npm run lint

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <[email protected]>",

src/common/enums/errorCode.ts

@@ -62,6 +62,7 @@ export const ERROR_CODES = {
 
   // Verification Code
   CODE_INVALID: 'CODE_INVALID',
+  CODE_INACTIVE: 'CODE_INACTIVE',
   CODE_EXPIRED: 'CODE_EXPIRED',
 
   // GQL

src/common/enums/payment.ts

@@ -32,6 +32,12 @@ export enum PAYMENT_CURRENCY {
   USDT = 'USDT',
 }
 
+export enum QUOTE_CURRENCY {
+  TWD = 'TWD',
+  HKD = 'HKD',
+  USD = 'USD',
+}
+
 export enum CHAIN {
   POLYGON = 'Polygon',
 }

src/common/enums/route.ts

@@ -83,8 +83,6 @@ export const ROUTES: {
   { key: 'FOLLOW', pathname: '/follow' },
   { key: 'AUTHORS', pathname: '/authors' },
   { key: 'SEARCH', pathname: '/search' },
-  { key: 'SETTINGS', pathname: '/settings' },
-
   // experient page for recommendation engine testing
   { key: 'RECOMMENDATION', pathname: '/recommendation' },
 

src/common/enums/text.ts

@@ -60,8 +60,9 @@ export const TEXT = {
     circleEdited: '圍爐已更新',
     clear: '清空',
     close: '關閉',
-    CODE_EXPIRED: '驗證碼已過期',
-    CODE_INVALID: '驗證碼不正確',
+    CODE_EXPIRED: '驗證碼已過期，請重新發送',
+    CODE_INACTIVE: '驗證碼已失效，請使用最新驗證碼或重新發送',
+    CODE_INVALID: '驗證碼不正確，請檢查輸入內容或重新發送',
     collectedOnly: '只看衍生作品',
     COMMENT_NOT_FOUND: '評論不存在',
     comment: '評論',
@@ -102,7 +103,7 @@ export const TEXT = {
     editUserProfile: '編輯資料',
     email: '電子信箱',
     emptySearchResults: '不好意思，什麼都沒搜到',
-    enterCustomAmount: '輸入自訂金額',
+    enterCustomAmount: '輸入金額',
     enterDisplayName: '請輸入姓名',
     enterEmail: '請輸入電子信箱',
     enterNewEmail: '請輸入新電子信箱',
@@ -165,6 +166,7 @@ export const TEXT = {
     hintPaymentPointer: '錢包地址以“$”開頭',
     hintTerm: '我們的用戶協議和隱私政策發生了更改，請閱讀並同意後繼續使用。',
     hintUserName: '4-15 個字元，僅支持英文、數字或下劃線',
+    hintVerificationCode: '驗證碼有效期 20 分鐘',
     history: '足跡',
     hkd: '港幣',
     hottest: '熱門',
@@ -450,8 +452,9 @@ export const TEXT = {
     circleEdited: '围炉已更新',
     clear: '清空',
     close: '关闭',
-    CODE_EXPIRED: '验证码已过期',
-    CODE_INVALID: '验证码不正确',
+    CODE_EXPIRED: '验证码已过期，请重新发送',
+    CODE_INACTIVE: '验证码已失效，请使用最新验证码或重新发送',
+    CODE_INVALID: '验证码不正确，请检查输入内容或重新发送',
     collectedOnly: '只看衍生作品',
     COMMENT_NOT_FOUND: '评论不存在',
     comment: '评论',
@@ -492,7 +495,7 @@ export const TEXT = {
     editUserProfile: '编辑资料',
     email: '邮箱',
     emptySearchResults: '不好意思，什么都没搜到',
-    enterCustomAmount: '输入自订金额',
+    enterCustomAmount: '输入金额',
     enterDisplayName: '请输入姓名',
     enterEmail: '请输入邮箱',
     enterNewEmail: '请输入新邮箱',
@@ -555,6 +558,7 @@ export const TEXT = {
     hintPaymentPointer: '钱包地址以“$”开头',
     hintTerm: '我们的用户协议和隐私政策发生了更改，请阅读并同意后继续使用。',
     hintUserName: '4-15 个字符，仅支持英文、数字或下划线',
+    hintVerificationCode: '验证码有效期 20 分钟',
     history: '足迹',
     hkd: '港币',
     hottest: '热门',
@@ -840,8 +844,11 @@ export const TEXT = {
     circleEdited: 'Circle Edited',
     clear: 'Clear',
     close: 'Cancel',
-    CODE_EXPIRED: 'Verification code expired',
-    CODE_INVALID: 'Invalid verification code',
+    CODE_EXPIRED: 'Verification code expired, try resend',
+    CODE_INACTIVE:
+      'Verification code is no longer valid. Please use the latest code we sent, or try resend',
+    CODE_INVALID:
+      'Incorrect verification code. Please check your input, or try resend',
     collapseComment: 'Collapse response',
     collectedOnly: 'Articles Only',
     COMMENT_NOT_FOUND: 'Response not found',
@@ -961,6 +968,7 @@ export const TEXT = {
     hintUserDescription: 'Recommended within 50 words and 200 words maximum.',
     hintUserName:
       'Must be between 4-15 characters long. Only English alphabets, numbers and underline are accepted.',
+    hintVerificationCode: 'Code will expire after 20 minutes',
     history: 'History',
     hkd: 'HKD',
     hottest: 'Trending',

src/components/ArticleDigest/DropdownActions/RemoveTagButton.tsx

@@ -7,7 +7,6 @@ import {
   TextIcon,
   Translate,
   useMutation,
-  useRoute,
 } from '~/components'
 import updateTagArticlesCount from '~/components/GQL/updates/tagArticlesCount'
 
@@ -44,16 +43,19 @@ const fragments = {
   `,
 }
 
-const RemoveTagButton = ({ article }: { article: RemoveTagButtonArticle }) => {
-  const { getQuery } = useRoute()
-  const id = getQuery('tagId')
-
+const RemoveTagButton = ({
+  article,
+  tagId,
+}: {
+  article: RemoveTagButtonArticle
+  tagId: string
+}) => {
   const [deleteArticlesTags] = useMutation<DeleteArticlesTags>(
     DELETE_ARTICLES_TAGS,
     {
-      variables: { id, articles: [article.id] },
+      variables: { id: tagId, articles: [article.id] },
       update: (cache) => {
-        updateTagArticlesCount({ cache, type: 'decrement', id })
+        updateTagArticlesCount({ cache, type: 'decrement', id: tagId })
       },
     }
   )

src/components/ArticleDigest/DropdownActions/SetTagSelectedButton.tsx

@@ -1,13 +1,6 @@
 import gql from 'graphql-tag'
 
-import {
-  IconAdd24,
-  Menu,
-  TextIcon,
-  Translate,
-  useMutation,
-  useRoute,
-} from '~/components'
+import { IconAdd24, Menu, TextIcon, Translate, useMutation } from '~/components'
 
 import { ADD_TOAST } from '~/common/enums'
 
@@ -46,11 +39,11 @@ const fragments = {
 
 const SetTagSelectedButton = ({
   article,
+  tagId,
 }: {
   article: SetTagSelectedButtonArticle
+  tagId: string
 }) => {
-  const { getQuery } = useRoute()
-  const tagId = getQuery('tagId')
   const [update] = useMutation<SetTagSelected>(SET_TAG_SELECTED, {
     variables: { id: tagId, articles: [article.id] },
   })

src/components/ArticleDigest/DropdownActions/SetTagUnselectedButton.tsx

@@ -8,7 +8,6 @@ import {
   TextIcon,
   Translate,
   useMutation,
-  useRoute,
 } from '~/components'
 
 import { ADD_TOAST } from '~/common/enums'
@@ -52,11 +51,11 @@ const fragments = {
 
 const SetTagUnselectedButton = ({
   article,
+  tagId,
 }: {
   article: SetTagUnselectedButtonArticle
+  tagId: string
 }) => {
-  const { getQuery } = useRoute()
-  const tagId = getQuery('tagId')
   const [update] = useMutation<SetTagUnselected>(SET_TAG_UNSELECTED, {
     variables: { id: tagId, articles: [article.id] },
     update: (cache) => {
@@ -65,7 +64,11 @@ const SetTagUnselectedButton = ({
         const {
           TAG_ARTICLES_PUBLIC: query,
         } = require('~/components/GQL/queries/tagArticles')
-        const variables = { id: tagId, selected: true }
+        const variables = {
+          id: tagId,
+          selected: true,
+          sortBy: 'byCreatedAtDesc',
+        }
         const data = cache.readQuery<TagArticlesPublic>({ query, variables })
         const node = _get(data, 'node', {}) as TagArticlesPublic_node_Tag
         if (

src/components/ArticleDigest/DropdownActions/index.tsx

@@ -1,7 +1,5 @@
-import _find from 'lodash/find'
 import _isEmpty from 'lodash/isEmpty'
 import _pickBy from 'lodash/pickBy'
-import _some from 'lodash/some'
 import { useContext } from 'react'
 
 import {
@@ -16,7 +14,6 @@ import {
   Menu,
   ShareDialog,
   Translate,
-  useRoute,
   ViewerContext,
 } from '~/components'
 
@@ -54,8 +51,12 @@ export interface DropdownActionsControls {
   // based on type
   inCard?: boolean
   inUserArticles?: boolean
-  inTagDetailLatest?: boolean
-  inTagDetailSelected?: boolean
+
+  // tag
+  tagDetailId?: string
+  hasSetTagSelected?: boolean
+  hasSetTagUnselected?: boolean
+  hasRemoveTag?: boolean
 
   morePublicActions?: React.ReactNode
 }
@@ -73,7 +74,7 @@ interface Controls {
   hasSticky: boolean
   hasArchive: boolean
   hasSetTagSelected: boolean
-  hasSetTagUnSelected: boolean
+  hasSetTagUnselected: boolean
   hasRemoveTag: boolean
   hasEdit: boolean
 }
@@ -90,6 +91,7 @@ type BaseDropdownActionsProps = DropdownActionsProps & Controls & DialogProps
 
 const BaseDropdownActions = ({
   article,
+  tagDetailId,
 
   icon,
   size,
@@ -105,7 +107,7 @@ const BaseDropdownActions = ({
   hasSticky,
   hasArchive,
   hasSetTagSelected,
-  hasSetTagUnSelected,
+  hasSetTagUnselected,
   hasRemoveTag,
   hasEdit,
 
@@ -128,7 +130,7 @@ const BaseDropdownActions = ({
     hasSticky ||
     hasArchive ||
     hasSetTagSelected ||
-    hasSetTagUnSelected ||
+    hasSetTagUnselected ||
     hasRemoveTag
 
   const Content = ({ isInDropdown }: { isInDropdown?: boolean }) => (
@@ -150,9 +152,15 @@ const BaseDropdownActions = ({
       {hasSticky && <StickyButton article={article} />}
 
       {hasArchive && <ArchiveArticle.Button openDialog={openArchiveDialog} />}
-      {hasSetTagSelected && <SetTagSelectedButton article={article} />}
-      {hasSetTagUnSelected && <SetTagUnselectedButton article={article} />}
-      {hasRemoveTag && <RemoveTagButton article={article} />}
+      {hasSetTagSelected && tagDetailId && (
+        <SetTagSelectedButton article={article} tagId={tagDetailId} />
+      )}
+      {hasSetTagUnselected && tagDetailId && (
+        <SetTagUnselectedButton article={article} tagId={tagDetailId} />
+      )}
+      {hasRemoveTag && tagDetailId && (
+        <RemoveTagButton article={article} tagId={tagDetailId} />
+      )}
       {hasEdit && <EditButton article={article} />}
     </Menu>
   )
@@ -195,29 +203,15 @@ const DropdownActions = (props: DropdownActionsProps) => {
 
     inCard,
     inUserArticles,
-    inTagDetailLatest,
-    inTagDetailSelected,
+
+    hasSetTagSelected,
+    hasSetTagUnselected,
+    hasRemoveTag,
   } = props
-  const { getQuery } = useRoute()
   const viewer = useContext(ViewerContext)
 
   const isArticleAuthor = viewer.id === article.author.id
   const isActive = article.articleState === 'active'
-  const isInTagDetail = inTagDetailLatest || inTagDetailSelected
-
-  // check permission if in tag detail
-  let canEditTag = false
-  if (isInTagDetail) {
-    const tagId = getQuery('tagId')
-    const tag = _find(article.tags || [], (item) => item.id === tagId)
-    const isEditor = _some(
-      tag?.editors || [],
-      (editor) => editor.id === viewer.id
-    )
-    const isCreator = tag?.creator?.id === viewer.id
-    canEditTag =
-      isEditor || isCreator || viewer.info.email === '[email protected]'
-  }
 
   const forbid = () => {
     window.dispatchEvent(
@@ -247,9 +241,9 @@ const DropdownActions = (props: DropdownActionsProps) => {
       !viewer.isInactive
     ),
     hasArchive: isArticleAuthor && isActive && !viewer.isArchived,
-    hasSetTagSelected: !!(inTagDetailLatest && canEditTag),
-    hasSetTagUnSelected: !!(inTagDetailSelected && canEditTag),
-    hasRemoveTag: !!(isInTagDetail && canEditTag),
+    hasSetTagSelected: !!hasSetTagSelected,
+    hasSetTagUnselected: !!hasSetTagUnselected,
+    hasRemoveTag: !!hasRemoveTag,
     hasEdit: isActive && isArticleAuthor,
   }
 

src/components/ArticleDigest/Feed/index.tsx

@@ -115,12 +115,15 @@ type MemoizedArticleDigestFeed = React.MemoExoticComponent<
 
 export const ArticleDigestFeed = React.memo(
   BaseArticleDigestFeed,
-  ({ article: prevArticle }, { article }) => {
+  ({ article: prevArticle, ...prevProps }, { article, ...props }) => {
     return (
       prevArticle.subscribed === article.subscribed &&
       prevArticle.articleState === article.articleState &&
       prevArticle.sticky === article.sticky &&
-      prevArticle.author.isFollowee === article.author.isFollowee
+      prevArticle.author.isFollowee === article.author.isFollowee &&
+      prevProps.hasSetTagSelected === props.hasSetTagSelected &&
+      prevProps.hasSetTagUnselected === props.hasSetTagUnselected &&
+      prevProps.hasRemoveTag === props.hasRemoveTag
     )
   }
 ) as MemoizedArticleDigestFeed

src/components/Context/Viewer/index.tsx

@@ -69,6 +69,9 @@ const ViewerFragments = {
         articles(input: { first: 0 }) {
           totalCount
         }
+        settings {
+          currency
+        }
       }
     `,
   },

src/components/CurrencyFormatter/styles.css

@@ -10,6 +10,7 @@
   }
 
   & .subCurrency {
+    padding-top: var(--spacing-x-tight);
     font-size: var(--font-size-xs);
     color: var(--color-grey);
   }