feat: i18n for dialogs (#203)

* feat: i18n in dialog

* fix: use common translation

web/src/components/ArchivedMemoDialog.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import useLoading from "../hooks/useLoading";
+import useI18n from "../hooks/useI18n";
 import { memoService } from "../services";
 import { useAppSelector } from "../store";
 import Icon from "./Icon";
@@ -11,6 +12,7 @@ import "../less/archived-memo-dialog.less";
 type Props = DialogProps;
 
 const ArchivedMemoDialog: React.FC<Props> = (props: Props) => {
+  const { t } = useI18n();
   const { destroy } = props;
   const memos = useAppSelector((state) => state.memo.memos);
   const loadingState = useLoading();
@@ -36,7 +38,7 @@ const ArchivedMemoDialog: React.FC<Props> = (props: Props) => {
       <div className="dialog-header-container">
         <p className="title-text">
           <span className="icon-text">🗂</span>
-          Archived Memos
+          {t("archived.archived-memos")}
         </p>
         <button className="btn close-btn" onClick={destroy}>
           <Icon.X className="icon-img" />
@@ -45,11 +47,11 @@ const ArchivedMemoDialog: React.FC<Props> = (props: Props) => {
       <div className="dialog-content-container">
         {loadingState.isLoading ? (
           <div className="tip-text-container">
-            <p className="tip-text">fetching data...</p>
+            <p className="tip-text">{t("archived.fetching-data")}</p>
           </div>
         ) : archivedMemos.length === 0 ? (
           <div className="tip-text-container">
-            <p className="tip-text">No archived memos.</p>
+            <p className="tip-text">{t("archived.no-archived-memos")}</p>
           </div>
         ) : (
           <div className="archived-memos-container">

web/src/components/DailyReviewDialog.tsx

@@ -97,7 +97,7 @@ const DailyReviewDialog: React.FC<Props> = (props: Props) => {
         </div>
         {dailyMemos.length === 0 ? (
           <div className="tip-container">
-            <p className="tip-text">Oops, there is nothing.</p>
+            <p className="tip-text">{t("daily-review.oops-nothing")}</p>
           </div>
         ) : (
           <div className="dailymemos-wrapper">

web/src/components/ResourcesDialog.tsx

@@ -127,16 +127,16 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
         </button>
       </div>
       <div className="dialog-content-container">
-        <div className="tip-text-container">(👨‍💻WIP) View your static resources in memos. e.g. images</div>
+        <div className="tip-text-container">(👨‍💻WIP) {t("resources.description")}</div>
         <div className="upload-resource-container" onClick={() => handleUploadFileBtnClick()}>
           <div className="upload-resource-btn">
             <Icon.File className="icon-img" />
-            <span>Upload</span>
+            <span>{t("resources.upload")}</span>
           </div>
         </div>
         {loadingState.isLoading ? (
           <div className="loading-text-container">
-            <p className="tip-text">fetching data...</p>
+            <p className="tip-text">{t("resources.fetching-data")}</p>
           </div>
         ) : (
           <div className="resource-table-container">
@@ -147,7 +147,7 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
               <span></span>
             </div>
             {state.resources.length === 0 ? (
-              <p className="tip-text">No resource.</p>
+              <p className="tip-text">{t("resources.no-resources")}</p>
             ) : (
               state.resources.map((resource) => (
                 <div key={resource.id} className="resource-container">
@@ -156,10 +156,10 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
                   <span className="field-text">{resource.type}</span>
                   <div className="buttons-container">
                     <Dropdown className="actions-dropdown">
-                      <button onClick={() => handlPreviewBtnClick(resource)}>Preview</button>
-                      <button onClick={() => handleCopyResourceLinkBtnClick(resource)}>Copy Link</button>
+                      <button onClick={() => handlPreviewBtnClick(resource)}>{t("resources.preview")}</button>
+                      <button onClick={() => handleCopyResourceLinkBtnClick(resource)}>{t("resources.copy-link")}</button>
                       <button className="delete-btn" onClick={() => handleDeleteResourceBtnClick(resource)}>
-                        Delete
+                        {t("common.delete")}
                       </button>
                     </Dropdown>
                   </div>

web/src/locales/en.json

@@ -39,6 +39,22 @@
     "setting": "Setting",
     "archived": "Archived"
   },
+  "daily-review": {
+    "oops-nothing": "Oops, there is nothing."
+  },
+  "resources": {
+    "description": "View your static resources in memos. e.g. images",
+    "no-resources": "No resources.",
+    "fetching-data": "fetching data...",
+    "upload": "Upload",
+    "preview": "Preview",
+    "copy-link": "Copy Link"
+  },
+  "archived": {
+    "archived-memos": "Archived Memos",
+    "no-archived-memos": "No archived memos.",
+    "fetching-data": "fetching data..."
+  },
   "editor": {
     "editing": "Editing...",
     "save": "Save",
@@ -68,4 +84,4 @@
       "create-a-member": "Create a member"
     }
   }
-}
+}

web/src/locales/zh.json

@@ -39,6 +39,22 @@
     "setting": "设置",
     "archived": "已归档"
   },
+  "daily-review": {
+    "oops-nothing": "啊哦，空空荡荡。"
+  },
+  "resources": {
+    "description": "查看在 Memo 中的静态资源。例如：图片",
+    "no-resources": "没有资源",
+    "fetching-data": "请求数据中...",
+    "upload": "上传",
+    "preview": "预览",
+    "copy-link": "拷贝链接"
+  },
+  "archived": {
+    "archived-memos": "已归档的 Memo",
+    "no-archived-memos": "没有归档的 Memo",
+    "fetching-data": "请求数据中..."
+  },
   "editor": {
     "editing": "编辑中...",
     "save": "记下",
@@ -68,4 +84,4 @@
       "create-a-member": "创建成员"
     }
   }
-}
+}