fix(i18n): remove the use of <FormattedMesage> on outer components

thematters · May 7, 2024 · 7aa39d1 · 7aa39d1
1 parent f1ee1d0
commit 7aa39d1
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 84 deletions.
diff --git a/lang/default.json b/lang/default.json
@@ -480,9 +480,6 @@
     "defaultMessage": "Please log in again.",
     "description": "OAUTH_TOKEN_INVALID"
   },
-  "6OB9UA": {
-    "defaultMessage": "Connection error, please come back later"
-  },
   "6OBAOi": {
     "defaultMessage": "subscribers_empty",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
@@ -1036,9 +1033,6 @@
   "HBxXD/": {
     "defaultMessage": "License"
   },
-  "HEpsZ3": {
-    "defaultMessage": "Back to discovery"
-  },
   "HFVDeB": {
     "defaultMessage": "Related Tags",
     "description": "src/views/TagDetail/RelatedTags/index.tsx"
@@ -1877,9 +1871,6 @@
     "defaultMessage": "subscribers",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
   },
-  "XHcb2q": {
-    "defaultMessage": "Spaceship maintaining, please come back later"
-  },
   "XOEFDf": {
     "defaultMessage": "{total} articles"
   },
@@ -2879,9 +2870,6 @@
   "rbrahO": {
     "defaultMessage": "Close"
   },
-  "rdZi0V": {
-    "defaultMessage": "It seems you've come to an unknown space, please go back and retry"
-  },
   "rdxgu4": {
     "defaultMessage": "Email",
     "description": "src/components/Forms/PaymentForm/ResetPassword/Request.tsx"

diff --git a/lang/en.json b/lang/en.json
@@ -480,9 +480,6 @@
     "defaultMessage": "Please log in again.",
     "description": "OAUTH_TOKEN_INVALID"
   },
-  "6OB9UA": {
-    "defaultMessage": "Connection error, please come back later"
-  },
   "6OBAOi": {
     "defaultMessage": "subscribers_empty",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
@@ -1036,9 +1033,6 @@
   "HBxXD/": {
     "defaultMessage": "License"
   },
-  "HEpsZ3": {
-    "defaultMessage": "Back to discovery"
-  },
   "HFVDeB": {
     "defaultMessage": "Related Tags",
     "description": "src/views/TagDetail/RelatedTags/index.tsx"
@@ -1877,9 +1871,6 @@
     "defaultMessage": "subscribers",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
   },
-  "XHcb2q": {
-    "defaultMessage": "Spaceship maintaining, please come back later"
-  },
   "XOEFDf": {
     "defaultMessage": "{total} articles"
   },
@@ -2879,9 +2870,6 @@
   "rbrahO": {
     "defaultMessage": "Close"
   },
-  "rdZi0V": {
-    "defaultMessage": "It seems you've come to an unknown space, please go back and retry"
-  },
   "rdxgu4": {
     "defaultMessage": "Email",
     "description": "src/components/Forms/PaymentForm/ResetPassword/Request.tsx"

diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json
@@ -480,9 +480,6 @@
     "defaultMessage": "授权信息已失效，请重新登入",
     "description": "OAUTH_TOKEN_INVALID"
   },
-  "6OB9UA": {
-    "defaultMessage": "星球连线出现问题，请稍后看看"
-  },
   "6OBAOi": {
     "defaultMessage": "目前总订阅人数",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
@@ -1036,9 +1033,6 @@
   "HBxXD/": {
     "defaultMessage": "版权声明"
   },
-  "HEpsZ3": {
-    "defaultMessage": "返回发现"
-  },
   "HFVDeB": {
     "defaultMessage": "相关标签",
     "description": "src/views/TagDetail/RelatedTags/index.tsx"
@@ -1877,9 +1871,6 @@
     "defaultMessage": "人",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
   },
-  "XHcb2q": {
-    "defaultMessage": "飞船正在检修中，请稍后看看"
-  },
   "XOEFDf": {
     "defaultMessage": "{total} 篇作品"
   },
@@ -2879,9 +2870,6 @@
   "rbrahO": {
     "defaultMessage": "关闭"
   },
-  "rdZi0V": {
-    "defaultMessage": "你似乎遨游到了一个未知空间，请返回重试"
-  },
   "rdxgu4": {
     "defaultMessage": "请输入邮箱",
     "description": "src/components/Forms/PaymentForm/ResetPassword/Request.tsx"

diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
@@ -480,9 +480,6 @@
     "defaultMessage": "授權信息已失效，請重新登入",
     "description": "OAUTH_TOKEN_INVALID"
   },
-  "6OB9UA": {
-    "defaultMessage": "星球連線出現問題，請稍後看看"
-  },
   "6OBAOi": {
     "defaultMessage": "目前總訂閱人數",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
@@ -1036,9 +1033,6 @@
   "HBxXD/": {
     "defaultMessage": "版權聲明"
   },
-  "HEpsZ3": {
-    "defaultMessage": "返回發現"
-  },
   "HFVDeB": {
     "defaultMessage": "相關標籤",
     "description": "src/views/TagDetail/RelatedTags/index.tsx"
@@ -1877,9 +1871,6 @@
     "defaultMessage": "人",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
   },
-  "XHcb2q": {
-    "defaultMessage": "飛船正在檢修中，請稍後看看"
-  },
   "XOEFDf": {
     "defaultMessage": "{total} 篇作品"
   },
@@ -2879,9 +2870,6 @@
   "rbrahO": {
     "defaultMessage": "關閉"
   },
-  "rdZi0V": {
-    "defaultMessage": "你似乎遨遊到了一個未知空間，請返回重試"
-  },
   "rdxgu4": {
     "defaultMessage": "請輸入電子信箱",
     "description": "src/components/Forms/PaymentForm/ResetPassword/Request.tsx"

diff --git a/src/components/Buttons/BackToHome.tsx b/src/components/Buttons/BackToHome.tsx
@@ -1,12 +1,25 @@
-import { FormattedMessage } from 'react-intl'
+import { useContext } from 'react'
 
 import { PATHS } from '~/common/enums'
-import { Button, TextIcon } from '~/components'
-
-export const BackToHomeButton = () => (
-  <Button size={['10.5rem', '2.25rem']} bgColor="green" href={PATHS.HOME}>
-    <TextIcon color="white" weight="medium">
-      <FormattedMessage defaultMessage="Back to discovery" id="HEpsZ3" />
-    </TextIcon>
-  </Button>
-)
+import { Button, LanguageContext, TextIcon } from '~/components'
+import { UserLanguage } from '~/gql/graphql'
+
+export const BackToHomeButton = () => {
+  const { lang } = useContext(LanguageContext)
+
+  // FIXME: cannot use <FormattedMessage> here cuz it's outer of <TranslationProvider>
+  const text =
+    lang === UserLanguage.En
+      ? 'Back to discovery'
+      : lang === UserLanguage.ZhHans
+      ? '返回发现'
+      : '返回發現'
+
+  return (
+    <Button size={['10.5rem', '2.25rem']} bgColor="green" href={PATHS.HOME}>
+      <TextIcon color="white" weight="medium">
+        {text}
+      </TextIcon>
+    </Button>
+  )
+}
diff --git a/src/components/Context/Language/LanguageContext.tsx b/src/components/Context/Language/LanguageContext.tsx
@@ -1,6 +1,5 @@
 import gql from 'graphql-tag'
 import { createContext, useContext, useEffect, useState } from 'react'
-import { FormattedMessage } from 'react-intl'
 
 import { COOKIE_LANGUAGE } from '~/common/enums'
 import {
@@ -114,12 +113,13 @@ export const LanguageProvider = ({
       })
     } catch (e) {
       toast.error({
-        message: (
-          <FormattedMessage
-            defaultMessage="Failed to edit, please try again."
-            id="USOHRK"
-          />
-        ),
+        // FIXME: cannot use <FormattedMessage> here cuz it's outer of <TranslationProvider>
+        message:
+          language === UserLanguage.En
+            ? 'Failed to edit, please try again.'
+            : language === UserLanguage.ZhHans
+            ? '修改失败，请稍候重试'
+            : '修改失敗，請稍候重試',
       })
     }
   }

diff --git a/src/components/Error/index.tsx b/src/components/Error/index.tsx
@@ -1,7 +1,9 @@
 import { Alert } from '@reach/alert'
-import { FormattedMessage } from 'react-intl'
+import { useContext } from 'react'
 
 import IMAGE_ILLUSTRATION_EMPTY from '@/public/static/images/illustration-empty.svg'
+import { LanguageContext } from '~/components'
+import { UserLanguage } from '~/gql/graphql'
 
 import styles from './styles.module.css'
 
@@ -13,25 +15,35 @@ interface ErrorProps {
   message?: string | React.ReactNode
 }
 
-const ServerError = () => (
-  <FormattedMessage
-    defaultMessage="Spaceship maintaining, please come back later"
-    id="XHcb2q"
-  />
+// FIXME: cannot use <FormattedMessage> here cuz it's outer of <TranslationProvider>
+const ServerError = ({ lang }: { lang: UserLanguage }) => (
+  <>
+    {lang === UserLanguage.En
+      ? 'Spaceship maintaining, please come back later'
+      : lang === UserLanguage.ZhHans
+      ? '飞船正在检修中，请稍后看看'
+      : '飛船正在檢修中，請稍後看看'}
+  </>
 )
 
-const NetworkError = () => (
-  <FormattedMessage
-    defaultMessage="Connection error, please come back later"
-    id="6OB9UA"
-  />
+const NetworkError = ({ lang }: { lang: UserLanguage }) => (
+  <>
+    {lang === UserLanguage.En
+      ? 'Connection error, please come back later'
+      : lang === UserLanguage.ZhHans
+      ? '星球连线出现问题，请稍后看看'
+      : '星球連線出現問題，請稍後看看'}
+  </>
 )
 
-const NotFound = () => (
-  <FormattedMessage
-    defaultMessage="It seems you've come to an unknown space, please go back and retry"
-    id="rdZi0V"
-  />
+const NotFound = ({ lang }: { lang: UserLanguage }) => (
+  <>
+    {lang === UserLanguage.En
+      ? "It seems you've come to an unknown space, please go back and retry"
+      : lang === UserLanguage.ZhHans
+      ? '你似乎遨游到了一个未知空间，请返回重试'
+      : '你似乎遨遊到了一個未知空間，請返回重試'}
+  </>
 )
 
 export const Error: React.FC<React.PropsWithChildren<ErrorProps>> = ({
@@ -40,6 +52,8 @@ export const Error: React.FC<React.PropsWithChildren<ErrorProps>> = ({
   error,
   children,
 }) => {
+  const { lang } = useContext(LanguageContext)
+
   return (
     <section
       className={styles.error}
@@ -56,11 +70,11 @@ export const Error: React.FC<React.PropsWithChildren<ErrorProps>> = ({
           {message ? (
             message
           ) : type === 'not_found' ? (
-            <NotFound />
+            <NotFound lang={lang} />
           ) : type === 'network' ? (
-            <NetworkError />
+            <NetworkError lang={lang} />
           ) : (
-            <ServerError />
+            <ServerError lang={lang} />
           )}
         </p>
       </Alert>