feat(i18n): add sample i18n for HomePage components

netless-io · May 26, 2021 · e87af55 · e87af55
1 parent 834cbd1
commit e87af55
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 32 deletions.
diff --git a/packages/flat-components/src/components/HomePage/ClassPicker/index.tsx b/packages/flat-components/src/components/HomePage/ClassPicker/index.tsx
@@ -7,6 +7,7 @@ import "./index.less";
 import React from "react";
 import { Radio } from "antd";
 import classNames from "classnames";
+import { useTranslation } from "react-i18next";
 
 export type ClassPickerItemType = "oneToOne" | "bigClass" | "smallClass";
 
@@ -22,22 +23,11 @@ const ClassPickerIcons: Record<ClassPickerItemType, string> = {
     smallClass: smallClassSVG,
 };
 
-const ClassPickerTitles: Record<ClassPickerItemType, string> = {
-    bigClass: "大班课",
-    oneToOne: "一对一",
-    smallClass: "小班课",
-};
-
-const ClassPickerTexts: Record<ClassPickerItemType, string> = {
-    bigClass: "适用于 1 位老师面向大量学生",
-    oneToOne: "适用于 1 位老师与 1 名学生",
-    smallClass: "适用于 1 位老师面向最多 16 名学生",
-};
-
 export const ClassPickerItem: React.FC<Pick<ClassPickerProps, "type" | "large">> = ({
     type,
     large,
 }) => {
+    const { t } = useTranslation();
     return (
         <Radio value={type}>
             {large ? (
@@ -48,18 +38,22 @@ export const ClassPickerItem: React.FC<Pick<ClassPickerProps, "type" | "large">>
                     ></img>
                     <div className="class-large-picker-item-right">
                         <span className="class-large-picker-item-title">
-                            {ClassPickerTitles[type]}
+                            {t(`class-picker-title.${type}`)}
                         </span>
                         <span className="class-large-picker-item-content">
-                            {ClassPickerTexts[type]}
+                            {t(`class-picker-text.${type}`)}
                         </span>
                     </div>
                 </div>
             ) : (
                 <div className="class-picker-item-container">
                     <img className="class-picker-item-icon" src={ClassPickerIcons[type]}></img>
-                    <span className="class-picker-item-title">{ClassPickerTitles[type]}</span>
-                    <span className="class-picker-item-content">{ClassPickerTexts[type]}</span>
+                    <span className="class-picker-item-title">
+                        {t(`class-picker-title.${type}`)}
+                    </span>
+                    <span className="class-picker-item-content">
+                        {t(`class-picker-text.${type}`)}
+                    </span>
                 </div>
             )}
         </Radio>

diff --git a/packages/flat-components/src/components/HomePage/HomePageHeroButton/index.tsx b/packages/flat-components/src/components/HomePage/HomePageHeroButton/index.tsx
@@ -4,6 +4,7 @@ import createSVG from "./icons/create.svg";
 import scheduleSVG from "./icons/schedule.svg";
 import React from "react";
 import { Button } from "antd";
+import { useTranslation } from "react-i18next";
 
 type HomePageHeroButtonType = "join" | "create" | "schedule";
 
@@ -33,17 +34,12 @@ export interface HomePageHeroButtonProps {
     onClick?: () => void;
 }
 
-const HomePageHeroButtonTypeTexts: Record<HomePageHeroButtonType, string> = {
-    join: "加入房间",
-    create: "创建房间",
-    schedule: "预定房间",
-};
-
 export const HomePageHeroButton: React.FC<HomePageHeroButtonProps> = ({ type, onClick }) => {
+    const { t } = useTranslation();
     return (
         <HomePageHeroButtonBase
             type={type}
-            text={HomePageHeroButtonTypeTexts[type]}
+            text={t(`home-page-hero-button-type.${type}`)}
             onClick={onClick}
         />
     );

diff --git a/packages/flat-components/src/components/HomePage/RoomList/index.tsx b/packages/flat-components/src/components/HomePage/RoomList/index.tsx
@@ -6,6 +6,7 @@ import { format, isToday, isTomorrow } from "date-fns";
 import { zhCN } from "date-fns/locale";
 import classNames from "classnames";
 import { Button, Dropdown, Menu } from "antd";
+import { useTranslation } from "react-i18next";
 
 export interface RoomListDateProps {
     date: Date;
@@ -49,12 +50,6 @@ export interface RoomListItemProps<T extends string> {
     onClickMenu?: (key: T) => void;
 }
 
-const RoomStatusTexts: Record<RoomStatusType, string> = {
-    idle: "待开始",
-    running: "进行中",
-    stopped: "已结束",
-};
-
 export function RoomListItem<T extends string = string>({
     title,
     beginTime,
@@ -65,6 +60,7 @@ export function RoomListItem<T extends string = string>({
     onClick,
     onClickMenu,
 }: PropsWithChildren<RoomListItemProps<T>>): ReactElement {
+    const { t } = useTranslation();
     return (
         <div className="room-list-item">
             <div
@@ -81,7 +77,7 @@ export function RoomListItem<T extends string = string>({
                         </div>
                     )}
                     <div className="room-list-item-status">
-                        <span className={status}>{RoomStatusTexts[status]}</span>
+                        <span className={status}>{t(`room-status.${status}`)}</span>
                         {isPeriodic && <span className="periodic">周期</span>}
                     </div>
                 </div>

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -56,5 +56,17 @@
   "student-exit-room-tip": "The class is continuing, are you sure to leave the room?",
   "student-sure-to-exit-the-room": "Sure to exit the room",
   "teacher-left-temporarily": "The teacher leaves temporarily",
-  "the-room-has-ended-and-is-about-to-exit": "The room has ended and is about to exit..."
+  "the-room-has-ended-and-is-about-to-exit": "The room has ended and is about to exit...",
+  "class-picker-text.bigClass": "Suitable for 1 teacher for a large number of students",
+  "class-picker-text.oneToOne": "Suitable for 1 teacher and 1 student",
+  "class-picker-text.smallClass": "Suitable for 1 teacher for up to 16 students",
+  "class-picker-title.bigClass": "Large Class",
+  "class-picker-title.oneToOne": "One to One",
+  "class-picker-title.smallClass": "Small Class",
+  "home-page-hero-button-type.create": "Create Room",
+  "home-page-hero-button-type.join": "Join Room",
+  "home-page-hero-button-type.schedule": "Schedule Room",
+  "room-status.idle": "idle",
+  "room-status.running": "running",
+  "room-status.stopped": "stopped"
 }
diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -56,5 +56,25 @@
   "network-quality5": "网络质量非常差",
   "network-quality6": "网络连接已断开",
   "network-quality7": "暂时无法检测网络质量",
-  "network-quality8": "正在检测..."
+  "network-quality8": "正在检测...",
+  "room-status": {
+    "idle": "待开始",
+    "running": "进行中",
+    "stopped": "已结束"
+  },
+  "home-page-hero-button-type": {
+    "join": "加入房间",
+    "create": "创建房间",
+    "schedule": "预定房间"
+  },
+  "class-picker-title": {
+    "bigClass": "大班课",
+    "oneToOne": "一对一",
+    "smallClass": "小班课"
+  },
+  "class-picker-text": {
+    "bigClass": "适用于 1 位老师面向大量学生",
+    "oneToOne": "适用于 1 位老师与 1 名学生",
+    "smallClass": "适用于 1 位老师面向最多 16 名学生"
+  }
 }