feat(i18n): add sample i18n for HomePage components (#669)

* fix(desktop): missing key prop * feat(i18n): add sample i18n for HomePage components * refactor(i18n): change key style to nested
netless-io · May 26, 2021 · 9b0e57f · 9b0e57f
1 parent d794a6d
commit 9b0e57f
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 49 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -16,14 +16,9 @@
     "vite",
     "vitejs"
   ],
-  "i18n-ally.localesPaths": [
-    "./packages/flat-i18n/locales/"
-  ],
-  "i18n-ally.enabledFrameworks": [
-    "react",
-    "i18next"
-  ],
-  "i18n-ally.keystyle": "flat",
+  "i18n-ally.localesPaths": ["./packages/flat-i18n/locales/"],
+  "i18n-ally.enabledFrameworks": ["react", "i18next"],
+  "i18n-ally.keystyle": "nested",
   "i18n-ally.sourceLanguage": "zh-CN",
-  "i18n-ally.displayLanguage": "zh-CN",
-}
+  "i18n-ally.displayLanguage": "zh-CN"
+}
diff --git a/desktop/renderer-app/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx b/desktop/renderer-app/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx
@@ -4,7 +4,7 @@ import emptyRoomSVG from "../../../assets/image/empty-room.svg";
 
 import { clipboard } from "electron";
 import { message, Skeleton } from "antd";
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, { Fragment, useCallback, useContext, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { isSameDay } from "date-fns";
 import {
@@ -128,12 +128,9 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
                         : { key: "join", text: "加入" };
 
                     return (
-                        <>
-                            {shouldShowDate && beginTime && (
-                                <RoomListDate key={room.roomUUID + "-date"} date={beginTime} />
-                            )}
+                        <Fragment key={room.roomUUID}>
+                            {shouldShowDate && beginTime && <RoomListDate date={beginTime} />}
                             <RoomListItem
-                                key={room.roomUUID}
                                 title={room.title!}
                                 beginTime={beginTime}
                                 endTime={endTime}
@@ -187,7 +184,7 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
                                     }
                                 }}
                             />
-                        </>
+                        </Fragment>
                     );
                 },
             )}

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,25 @@
   "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",
+    "oneToOne": "Suitable for 1 teacher and 1 student",
+    "smallClass": "Suitable for 1 teacher for up to 16 students"
+  },
+  "class-picker-title": {
+    "bigClass": "Large Class",
+    "oneToOne": "One to One",
+    "smallClass": "Small Class"
+  },
+  "home-page-hero-button-type": {
+    "create": "Create",
+    "join": "Join",
+    "schedule": "Schedule"
+  },
+  "room-status": {
+    "idle": "idle",
+    "running": "running",
+    "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 名学生"
+  }
 }