Feat: add i18n for rename feature

Bill2015 · Feb 25, 2024 · c950461 · c950461
1 parent 027ec01
commit c950461
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 11 deletions.
diff --git a/src/assets/locales/pages/resource-detail/en-US.json b/src/assets/locales/pages/resource-detail/en-US.json
@@ -0,0 +1,9 @@
+{
+    "Main": {
+        "name": "name",
+        "description": "description"
+    },
+    "Icons": {
+        "rename": "Rename the file by current name"
+    }
+}
diff --git a/src/assets/locales/pages/resource-detail/zh-TW.json b/src/assets/locales/pages/resource-detail/zh-TW.json
@@ -0,0 +1,9 @@
+{
+    "Main": {
+        "name": "名稱",
+        "description": "描述"
+    },
+    "Icons": {
+        "rename": "使用現在的名稱重新命名此檔案"
+    }
+}
diff --git a/src/modules/i18next/i18next.ts b/src/modules/i18next/i18next.ts
@@ -8,13 +8,15 @@ import commonEN_US from '@assets/locales/common/en-US.json';
 import pageCommonEN_US from '@assets/locales/pages/common/en-US.json';
 import pageCategorylistEN_US from '@assets/locales/pages/category-list/en-US.json';
 import pageResourcelistEN_US from '@assets/locales/pages/resource-list/en-US.json';
+import pageResourceDetailEN_US from '@assets/locales/pages/resource-detail/en-US.json';
 import pageResourceAddEN_US from '@assets/locales/pages/resource-add/en-US.json';
 import modalTagCreateEN_US from '@assets/locales/modal/create-tag/en-US.json';
 
 import commonZH_TW from '@assets/locales/common/zh-TW.json';
 import pageCommonZH_TW from '@assets/locales/pages/common/zh-TW.json';
 import pageCategorylistZH_TW from '@assets/locales/pages/category-list/zh-TW.json';
 import pageResourcelistZH_TW from '@assets/locales/pages/resource-list/zh-TW.json';
+import pageResourceDetailZH_TW from '@assets/locales/pages/resource-detail/zh-TW.json';
 import pageResourceAddZH_TW from '@assets/locales/pages/resource-add/zh-TW.json';
 import modalTagCreateZH_TW from '@assets/locales/modal/create-tag/zh-TW.json';
 
@@ -39,20 +41,22 @@ export const resources = {
     [SupportLangs.enUS.key]: {
         common: commonEN_US,
         pages:  {
-            Common:       pageCommonEN_US,
-            CategoryList: pageCategorylistEN_US,
-            resourceList: pageResourcelistEN_US,
-            resourceAdd:  pageResourceAddEN_US,
+            Common:         pageCommonEN_US,
+            CategoryList:   pageCategorylistEN_US,
+            resourceList:   pageResourcelistEN_US,
+            resourceDetail: pageResourceDetailEN_US,
+            resourceAdd:    pageResourceAddEN_US,
         },
         modal: { createTag: modalTagCreateEN_US },
     },
     [SupportLangs.zhTW.key]: {
         common: commonZH_TW,
         pages:  {
-            Common:       pageCommonZH_TW,
-            CategoryList: pageCategorylistZH_TW,
-            resourceList: pageResourcelistZH_TW,
-            resourceAdd:  pageResourceAddZH_TW,
+            Common:         pageCommonZH_TW,
+            CategoryList:   pageCategorylistZH_TW,
+            resourceList:   pageResourcelistZH_TW,
+            resourceDetail: pageResourceDetailZH_TW,
+            resourceAdd:    pageResourceAddZH_TW,
         },
         modal: { createTag: modalTagCreateZH_TW },
     },

diff --git a/src/pages/resource-detail/ResourceDetailPage.tsx b/src/pages/resource-detail/ResourceDetailPage.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { convertFileSrc } from '@tauri-apps/api/tauri';
 import {
     Box, Grid, Text, Flex, ScrollArea, Affix, rem, Divider, Group,
@@ -18,6 +19,7 @@ import { ResourceAddSubjectSelect, ResourceTagStack, ResourceDisplay, ResourceAc
 import classes from './ResourceDetailPage.module.scss';
 
 export default function ResourcesDetailPage() {
+    const { t } = useTranslation('pages', { keyPrefix: 'resourceDetail.Main' });
     const { activeCategory } = useActiveCategoryRedux();
     const { resourceId } = useParams<ResourceDetailParam>();
 
@@ -103,7 +105,7 @@ export default function ResourcesDetailPage() {
                     </Group>
                     <ScrollArea.Autosize mx="auto" mah="600px" type="hover" classNames={{ scrollbar: 'mgra' }}>
                         <EditableText
-                            name="name"
+                            name={t('name')}
                             fz="1.5rem"
                             fw="bold"
                             value={name || resourceData.name}
@@ -116,7 +118,7 @@ export default function ResourcesDetailPage() {
                             }}
                         />
                         <EditableText
-                            name="description"
+                            name={t('description')}
                             fz="1rem"
                             opacity="0.5"
                             fw="initial"

diff --git a/src/pages/resource-detail/components/ResourceActionIcons.tsx b/src/pages/resource-detail/components/ResourceActionIcons.tsx
@@ -1,11 +1,13 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { ActionFileIcon, TooltipActionIcon } from '@components/display';
+import { useTranslation } from 'react-i18next';
 import { LuFileType2 } from 'react-icons/lu';
 
 function Rename({ onClick }: { onClick: () => void }) {
+    const { t } = useTranslation('pages', { keyPrefix: 'resourceDetail.Icons' });
     return (
         <TooltipActionIcon
-            label="Rename the file by current name"
+            label={t('rename')}
             color="gold"
             fz="1.25em"
             pos="absolute"