Feat: add select language icon button

public/locales/en-US/application.json

@@ -73,7 +73,8 @@
     "toLightMode": "Switch to light theme",
     "myProfile": "My profile",
     "dashboard": "Dashboard",
-    "exceedQuota": "Your used capacity has exceeded the quota, please delete the extra files."
+    "exceedQuota": "Your used capacity has exceeded the quota, please delete the extra files.",
+    "language": "Language"
   },
   "fileManager": {
     "open": "Open",
@@ -278,7 +279,7 @@
     "hideCompletedTooltip": "Hide completed, failed and cancelled tasks.",
     "hideCompleted": "Hide completed tasks",
     "addTimeAscTooltip": "Tasks added first are ranked first.",
-    "addTimeAsc":"Oldest to newest",
+    "addTimeAsc": "Oldest to newest",
     "addTimeDescTooltip": "Latest added first are ranked first.",
     "addTimeDesc": "Newest to oldest",
     "showInstantSpeedTooltip": "Task upload speeds are shown as instantaneous speed.",
@@ -314,20 +315,20 @@
   },
   "share": {
     "expireInXDays": "Expire in $t(share.days, {\"count\": {{num}} })",
-    "days":"{{count}} day",
-    "days_other":"{{count}} days",
-    "expireInXHours":"Expire in $t(share.hours, {\"count\": {{num}} })",
-    "hours":"an hour",
-    "hours_other":"{{count}} hours",
+    "days": "{{count}} day",
+    "days_other": "{{count}} days",
+    "expireInXHours": "Expire in $t(share.hours, {\"count\": {{num}} })",
+    "hours": "an hour",
+    "hours_other": "{{count}} hours",
     "createdBy": "Created by <0>{{nick}}</0>",
     "sharedBy": "<0>{{nick}}</0> shared $t(share.files, {\"count\": {{num}} }) to you.",
-    "files":"1 file",
-    "files_other":"{{count}} files",
+    "files": "1 file",
+    "files_other": "{{count}} files",
     "statistics": "$t(share.views, {\"count\": {{views}} }) • $t(share.downloads, {\"count\": {{downloads}} }) • {{time}}",
-    "views":"{{count}} view",
-    "views_other":"{{count}} views",
-    "downloads":"{{count}} download",
-    "downloads_other":"{{count}} downloads",
+    "views": "{{count}} view",
+    "views_other": "{{count}} views",
+    "downloads": "{{count}} download",
+    "downloads_other": "{{count}} downloads",
     "privateShareTitle": "Private share from {{nick}}",
     "enterPassword": "Enter share password",
     "continue": "Continue",
@@ -337,9 +338,9 @@
     "createdAtDesc": "Date (Descending)",
     "createdAtAsc": "Date (Ascending)",
     "downloadsDesc": "Number of downloads (Descending)",
-    "downloadsAsc":"Number of downloads (Ascending)",
-    "viewsDesc":"Number of views (Descending)",
-    "viewsAsc":"Number of views (Ascending)",
+    "downloadsAsc": "Number of downloads (Ascending)",
+    "viewsDesc": "Number of views (Descending)",
+    "viewsAsc": "Number of views (Ascending)",
     "noRecords": "No shared files.",
     "sourceNotFound": "[Source not exist]",
     "expired": "Expired",
@@ -476,4 +477,4 @@
     "viewNumber": "Views",
     "language": "Language"
   }
-}
+}

public/locales/zh-CN/application.json

@@ -73,7 +73,8 @@
     "toLightMode": "切换到浅色模式",
     "myProfile": "个人主页",
     "dashboard": "管理面板",
-    "exceedQuota": "您的已用容量已超过容量配额，请尽快删除多余文件"
+    "exceedQuota": "您的已用容量已超过容量配额，请尽快删除多余文件",
+    "language": "切换语言"
   },
   "fileManager": {
     "open": "打开",
@@ -314,20 +315,20 @@
   },
   "share": {
     "expireInXDays": "{{num}} 天后到期",
-    "days":"{{count}} day",
-    "days_other":"{{count}} days",
+    "days": "{{count}} day",
+    "days_other": "{{count}} days",
     "expireInXHours": "{{num}} 小时后到期",
-    "hours":"an hour",
-    "hours_other":"{{count}} hours",
+    "hours": "an hour",
+    "hours_other": "{{count}} hours",
     "createdBy": "此分享由 <0>{{nick}}</0> 创建",
     "sharedBy": "<0>{{nick}}</0> 向您分享了 {{num}} 个文件",
-    "files":"1 file",
-    "files_other":"{{count}} files",
+    "files": "1 file",
+    "files_other": "{{count}} files",
     "statistics": "{{views}} 次浏览 • {{downloads}} 次下载 • {{time}}",
-    "views":"{{count}} view",
-    "views_other":"{{count}} views",
-    "downloads":"{{count}} download",
-    "downloads_other":"{{count}} downloads",
+    "views": "{{count}} view",
+    "views_other": "{{count}} views",
+    "downloads": "{{count}} download",
+    "downloads_other": "{{count}} downloads",
     "privateShareTitle": "{{nick}} 的加密分享",
     "enterPassword": "输入分享密码",
     "continue": "继续",
@@ -476,4 +477,4 @@
     "viewNumber": "浏览次数",
     "language": "语言"
   }
-}
+}

src/component/Navbar/LanguageSwitcher.tsx

@@ -0,0 +1,41 @@
+import React, { useCallback } from "react";
+import { IconButton, makeStyles } from "@material-ui/core";
+import { Translate } from "@material-ui/icons";
+import { useDispatch } from "react-redux";
+import Tooltip from "@material-ui/core/Tooltip";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { selectLanguage } from "../../redux/viewUpdate/action";
+
+const useStyles = makeStyles({
+    icon: {
+        color: "rgb(255, 255, 255)",
+        opacity: "0.54",
+    },
+});
+
+const LanguageSwitcher = ({ position }: { position: "left" | "bottom" }) => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const SelectLanguage = useCallback(
+        () => dispatch(selectLanguage()),
+        [dispatch]
+    );
+
+    const classes = useStyles();
+    return (
+        <Tooltip title={t("navbar.language")!!} placement="bottom">
+            <IconButton
+                className={classNames({
+                    [classes.icon]: "left" === position,
+                })}
+                onClick={SelectLanguage}
+                color="inherit"
+            >
+                <Translate />
+            </IconButton>
+        </Tooltip>
+    );
+};
+
+export default LanguageSwitcher;

src/component/Navbar/UserAvatar.js

@@ -18,6 +18,7 @@ import DarkModeSwitcher from "./DarkModeSwitcher";
 import { Home } from "@material-ui/icons";
 import { setUserPopover } from "../../redux/explorer";
 import { withTranslation } from "react-i18next";
+import LanguageSwitcher from "./LanguageSwitcher";
 
 const mapStateToProps = (state) => {
     return {
@@ -110,6 +111,7 @@ class UserAvatarCompoment extends Component {
                     <div>
                         {!isAdminPage && (
                             <>
+                                <LanguageSwitcher position="top" />
                                 <DarkModeSwitcher position="top" />
                                 {loginCheck && (
                                     <>

src/component/Navbar/UserInfo.js

@@ -7,6 +7,7 @@ import DarkModeSwitcher from "./DarkModeSwitcher";
 import Avatar from "@material-ui/core/Avatar";
 import { setUserPopover } from "../../redux/explorer";
 import { withTranslation } from "react-i18next";
+import LanguageSwitcher from "./LanguageSwitcher";
 
 const mapStateToProps = (state) => {
     return {
@@ -116,7 +117,10 @@ class UserInfoCompoment extends Component {
                             />
                         )}
                     </a>
-                    <DarkModeSwitcher position="left" />
+                    <div>
+                        <LanguageSwitcher position="left" />
+                        <DarkModeSwitcher position="left" />
+                    </div>
                 </div>
                 <div className={classes.storageCircle}>
                     <Typography

src/i18n.ts

@@ -4,10 +4,27 @@ import { initReactI18next } from "react-i18next";
 import Backend from "i18next-http-backend";
 import LanguageDetector from "i18next-browser-languagedetector";
 
+// react-i18next versions higher than 11.11.0
+declare module 'react-i18next' {
+    // and extend them!
+    interface CustomTypeOptions {
+        returnNull: false;
+        // custom namespace type if you changed it
+        defaultNS: 'application';
+        // custom resources type
+        resources: {
+            common: typeof import("../public/locales/en-US/common.json");
+            application: typeof import("../public/locales/en-US/application.json");
+            dashboard: typeof import("../public/locales/en-US/dashboard.json");
+        };
+    }
+}
+
 i18n.use(Backend)
     .use(LanguageDetector)
     .use(initReactI18next)
     .init({
+        returnNull: false,
         fallbackLng: "zh-CN",
         debug: true,
         ns: ["common", "application"],

tsconfig.json

@@ -23,6 +23,7 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "moduleResolution": "node",
+    "resolveJsonModule": true,
   },
   "include": [
     "src/**/*"