Merge branch 'develop' into fix/test-bugs

src/common/utils/translate.ts

@@ -1,6 +1,5 @@
 import _get from 'lodash/get'
 
-import { TEXT, TextId } from '~/common/enums'
 import { toLocale } from '~/common/utils'
 import { UserLanguage } from '~/gql/graphql'
 
@@ -32,27 +31,13 @@ interface TranslateStrings {
   lang?: Language
 }
 
-interface TranslateKey {
-  id: TextId
-  lang?: Language
-}
-
-export type TranslateArgs = TranslateStrings | TranslateKey
+export type TranslateArgs = TranslateStrings
 
 export const translate = ({ lang, ...props }: TranslateArgs): string => {
   let translations: { zh_hant: string; zh_hans?: string; en?: string }
 
-  if ('id' in props) {
-    const { id } = props
-    translations = {
-      zh_hant: TEXT.zh_hant[id],
-      zh_hans: TEXT.zh_hans[id],
-      en: TEXT.en[id],
-    }
-  } else {
-    const { zh_hant, zh_hans, en } = props
-    translations = { zh_hant, zh_hans, en }
-  }
+  const { zh_hant, zh_hans, en } = props
+  translations = { zh_hant, zh_hans, en }
 
   const translation = translations[lang || 'zh_hant']
 

src/components/ArticleDigest/Feed/FollowButton/index.tsx

@@ -2,19 +2,14 @@ import gql from 'graphql-tag'
 import _get from 'lodash/get'
 import _isNil from 'lodash/isNil'
 import { useContext } from 'react'
+import { FormattedMessage } from 'react-intl'
 
 import { ReactComponent as IconDot } from '@/public/static/icons/dot.svg'
 import {
   OPEN_UNIVERSAL_AUTH_DIALOG,
   UNIVERSAL_AUTH_TRIGGER,
 } from '~/common/enums'
-import {
-  Icon,
-  TextIcon,
-  Translate,
-  useMutation,
-  ViewerContext,
-} from '~/components'
+import { Icon, TextIcon, useMutation, ViewerContext } from '~/components'
 import {
   updateUserFollowerCount,
   updateViewerFolloweeCount,
@@ -93,7 +88,7 @@ const FollowButton = ({ user }: FollowButtonProps) => {
       spacing={0}
     >
       <button type="button" onClick={onClick}>
-        <Translate id="follow" />
+        <FormattedMessage defaultMessage="Follow" id="ieGrWo" />
       </button>
     </TextIcon>
   )

src/components/ArticleDigest/Feed/FooterActions/ResponseCount.tsx

@@ -1,11 +1,11 @@
 import gql from 'graphql-tag'
 import _get from 'lodash/get'
-import { useContext } from 'react'
+import { useIntl } from 'react-intl'
 
 import { ReactComponent as IconComment } from '@/public/static/icons/24px/comment.svg'
 import { URL_FRAGMENT } from '~/common/enums'
-import { numAbbr, toPath, translate } from '~/common/utils'
-import { Button, Icon, LanguageContext, TextIcon } from '~/components'
+import { numAbbr, toPath } from '~/common/utils'
+import { Button, Icon, TextIcon } from '~/components'
 import { ActionsResponseCountArticleFragment } from '~/gql/graphql'
 
 interface ResponseCountProps {
@@ -28,7 +28,7 @@ const fragments = {
 }
 
 const ResponseCount = ({ article }: ResponseCountProps) => {
-  const { lang } = useContext(LanguageContext)
+  const intl = useIntl()
 
   const { articleState: state } = article
   const path = toPath({
@@ -44,11 +44,9 @@ const ResponseCount = ({ article }: ResponseCountProps) => {
       bgActiveColor="greyLighterActive"
       {...path}
       disabled={isBanned}
-      aria-label={translate({
-        zh_hant: '查看回應',
-        zh_hans: '查看回应',
-        en: 'View responses',
-        lang,
+      aria-label={intl.formatMessage({
+        defaultMessage: 'View responses',
+        id: 'SFsQ1E',
       })}
     >
       <TextIcon

src/components/BlockUser/Dialog/index.tsx

@@ -38,7 +38,12 @@ const BlockUserDialog = ({ user, children }: BlockUserDialogProps) => {
     await blockUser()
 
     toast.success({
-      message: <Translate id="successBlock" />,
+      message: (
+        <FormattedMessage
+          defaultMessage="User blocked. User now can't reply to your articles and user's comments have been hidden from you."
+          id="2w2mhG"
+        />
+      ),
       actions: [
         {
           content: <Translate zh_hant="查看" zh_hans="查看" />,

src/components/Button/index.tsx

@@ -173,7 +173,7 @@ export type ButtonProps = {
  *    onClick={onClick}
  *  >
  *    <TextIcon weight="medium" size={12}>
- *      <Translate id="follow" />
+ *      Follow
  *    </TextIcon>
  *  </Button>
  * ```

src/components/Buttons/DonationButton/index.tsx

@@ -1,16 +1,8 @@
-import { useContext } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 
 import { ReactComponent as IconMoney } from '@/public/static/icons/24px/money.svg'
 import { TEST_ID } from '~/common/enums'
-import { translate } from '~/common/utils'
-import {
-  Button,
-  Icon,
-  LanguageContext,
-  TextIcon,
-  Translate,
-} from '~/components'
+import { Button, Icon, TextIcon } from '~/components'
 
 interface DonationButtonProps {
   supported: boolean
@@ -23,7 +15,6 @@ const DonationButton = ({
   onClick,
   width = '19.5rem',
 }: DonationButtonProps) => {
-  const { lang } = useContext(LanguageContext)
   const intl = useIntl()
 
   if (supported) {
@@ -59,7 +50,10 @@ const DonationButton = ({
       size={[width, '2.5rem']}
       bgColor="gold"
       aria-haspopup="dialog"
-      aria-label={translate({ id: 'donation', lang })}
+      aria-label={intl.formatMessage({
+        defaultMessage: 'Support Author',
+        id: 'ezYuE2',
+      })}
       onClick={() => {
         if (onClick) {
           onClick()
@@ -72,7 +66,7 @@ const DonationButton = ({
         color="white"
         size={16}
       >
-        <Translate id="donation" />
+        <FormattedMessage defaultMessage="Support Author" id="ezYuE2" />
       </TextIcon>
     </Button>
   )

src/components/Buttons/Share/index.tsx

@@ -1,14 +1,12 @@
-import { useContext } from 'react'
+import { useIntl } from 'react-intl'
 
 import { ReactComponent as IconShare } from '@/public/static/icons/24px/share.svg'
-import { translate } from '~/common/utils'
 import {
   Button,
   ButtonProps,
   Icon,
   IconColor,
   IconSize,
-  LanguageContext,
   ShareDialog,
   ShareDialogProps,
 } from '~/components'
@@ -38,7 +36,7 @@ export const ShareButton: React.FC<
   spacing,
   ...props
 }) => {
-  const { lang } = useContext(LanguageContext)
+  const intl = useIntl()
 
   const isGreen = bgColor === 'green'
   const isHalfBlack = bgColor === 'halfBlack'
@@ -58,7 +56,10 @@ export const ShareButton: React.FC<
           size={size}
           spacing={buttonSpacing}
           bgActiveColor={buttonBgActiveColor}
-          aria-label={translate({ id: 'share', lang })}
+          aria-label={intl.formatMessage({
+            defaultMessage: 'Share',
+            id: 'OKhRC6',
+          })}
           aria-haspopup="dialog"
           onClick={openDialog}
           disabled={disabled}

src/components/CircleDigest/Counts/index.tsx

@@ -1,11 +1,11 @@
 import gql from 'graphql-tag'
-import { useContext } from 'react'
+import { useIntl } from 'react-intl'
 
 import { ReactComponent as IconDraft } from '@/public/static/icons/24px/draft.svg'
 import { ReactComponent as IconUser } from '@/public/static/icons/24px/user.svg'
 import { TEST_ID } from '~/common/enums'
-import { numAbbr, translate } from '~/common/utils'
-import { Icon, LanguageContext, TextIcon } from '~/components'
+import { numAbbr } from '~/common/utils'
+import { Icon, TextIcon } from '~/components'
 import { CountsCircleFragment } from '~/gql/graphql'
 
 import styles from './styles.module.css'
@@ -29,7 +29,7 @@ const fragments = {
 }
 
 const Counts = ({ circle }: CountsProps) => {
-  const { lang } = useContext(LanguageContext)
+  const intl = useIntl()
 
   const memberCount = circle.members.totalCount
   const articleCount = circle.works.totalCount
@@ -41,12 +41,13 @@ const Counts = ({ circle }: CountsProps) => {
         color="grey"
         weight="medium"
         size={14}
-        aria-label={translate({
-          zh_hant: `${memberCount} 個成員`,
-          zh_hans: `${memberCount} 个成员`,
-          en: `${memberCount} members`,
-          lang,
-        })}
+        aria-label={intl.formatMessage(
+          {
+            defaultMessage: `{total} members`,
+            id: 'VmYzLr',
+          },
+          { total: memberCount }
+        )}
         data-test-id={TEST_ID.DIGEST_CIRCLE_MEMBER_COUNT}
       >
         {numAbbr(memberCount)}
@@ -57,12 +58,13 @@ const Counts = ({ circle }: CountsProps) => {
         color="grey"
         weight="medium"
         size={14}
-        aria-label={translate({
-          zh_hant: `${articleCount} 篇作品`,
-          zh_hans: `${articleCount} 篇作品`,
-          en: `${articleCount} articles`,
-          lang,
-        })}
+        aria-label={intl.formatMessage(
+          {
+            defaultMessage: `{articleCount} articles`,
+            id: 'RnKPVm',
+          },
+          { articleCount }
+        )}
         data-test-id={TEST_ID.DIGEST_CIRCLE_ARTICLE_COUNT}
       >
         {numAbbr(articleCount)}

src/components/Comment/FooterActions/index.tsx

@@ -1,15 +1,9 @@
 import gql from 'graphql-tag'
 import { useContext } from 'react'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 
 import { ERROR_CODES, ERROR_MESSAGES } from '~/common/enums'
-import { translate } from '~/common/utils'
-import {
-  CommentFormType,
-  LanguageContext,
-  toast,
-  ViewerContext,
-} from '~/components'
+import { CommentFormType, toast, ViewerContext } from '~/components'
 import {
   FooterActionsCommentPrivateFragment,
   FooterActionsCommentPublicFragment,
@@ -97,8 +91,8 @@ const BaseFooterActions = ({
 
   ...replyButtonProps
 }: FooterActionsProps) => {
+  const intl = useIntl()
   const viewer = useContext(ViewerContext)
-  const { lang } = useContext(LanguageContext)
 
   const { state, node } = comment
   const article = node.__typename === 'Article' ? node : undefined
@@ -144,12 +138,13 @@ const BaseFooterActions = ({
   return (
     <footer
       className={styles.footer}
-      aria-label={translate({
-        zh_hant: `${comment.upvotes} 點讚`,
-        zh_hans: `${comment.upvotes} 点赞`,
-        en: `${comment.upvotes} upvotes`,
-        lang,
-      })}
+      aria-label={intl.formatMessage(
+        {
+          defaultMessage: `{upvotes} upvotes`,
+          id: 'BW89hS',
+        },
+        { upvotes: comment.upvotes }
+      )}
     >
       <section className={styles.left}>
         {hasReply && (

src/components/Comment/ReplyTo/index.tsx

@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
+import { FormattedMessage } from 'react-intl'
 
 import { TEST_ID } from '~/common/enums'
-import { Translate } from '~/components'
 import { UserDigest } from '~/components/UserDigest'
 import { ReplyToUserFragment } from '~/gql/graphql'
 
@@ -24,7 +24,7 @@ const fragments = {
 const ReplyTo = ({ user }: ReplyToProps) => (
   <section className={styles.container} data-test-id={TEST_ID.COMMENT_REPLY_TO}>
     <span className={styles.replyTo}>
-      <Translate id="reply" />
+      <FormattedMessage defaultMessage="Reply" id="9HU8vw" />
     </span>
 
     <UserDigest.Mini

src/components/CommentBeta/FooterActions/index.tsx

@@ -1,19 +1,18 @@
 import gql from 'graphql-tag'
 import { useContext, useEffect, useRef, useState } from 'react'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 
 import {
   ERROR_CODES,
   ERROR_MESSAGES,
   OPEN_UNIVERSAL_AUTH_DIALOG,
   UNIVERSAL_AUTH_TRIGGER,
 } from '~/common/enums'
-import { makeMentionElement, translate } from '~/common/utils'
+import { makeMentionElement } from '~/common/utils'
 import {
   CommentFormBeta,
   CommentFormBetaDialog,
   CommentFormType,
-  LanguageContext,
   Media,
   Spacer,
   toast,
@@ -92,8 +91,8 @@ const BaseFooterActions = ({
   isInCommentDetail,
   ...replyButtonProps
 }: FooterActionsProps) => {
+  const intl = useIntl()
   const viewer = useContext(ViewerContext)
-  const { lang } = useContext(LanguageContext)
   const formWrapperRef = useRef<HTMLDivElement>(null)
 
   const [showForm, setShowForm] = useState(false)
@@ -178,12 +177,13 @@ const BaseFooterActions = ({
     <>
       <footer
         className={styles.footer}
-        aria-label={translate({
-          zh_hant: `${comment.upvotes} 點讚`,
-          zh_hans: `${comment.upvotes} 点赞`,
-          en: `${comment.upvotes} upvotes`,
-          lang,
-        })}
+        aria-label={intl.formatMessage(
+          {
+            defaultMessage: `{upvotes} upvotes`,
+            id: 'BW89hS',
+          },
+          { upvotes: comment.upvotes }
+        )}
       >
         <section className={styles.left}>
           {hasUpvote && <UpvoteButton {...buttonProps} />}