i18n: language selector

public/locales/en-US/application.json

@@ -448,6 +448,7 @@
     "fileName": "File name",
     "shareDate": "Shared at",
     "downloadNumber": "Downloads",
-    "viewNumber": "Views"
+    "viewNumber": "Views",
+    "language": "Language"
   }
 }

public/locales/zh-CN/application.json

@@ -439,6 +439,7 @@
     "fileName": "文件名",
     "shareDate": "分享日期",
     "downloadNumber": "下载次数",
-    "viewNumber": "浏览次数"
+    "viewNumber": "浏览次数",
+    "language": "语言"
   }
 }

src/component/Modals/OptionSelector.js

@@ -13,7 +13,11 @@ import {
 import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 
-const useStyles = makeStyles((theme) => ({}));
+const useStyles = makeStyles((theme) => ({
+    content: {
+        minWidth: 250,
+    },
+}));
 
 export default function OptionSelector() {
     const { t } = useTranslation("common");

src/component/Setting/UserSetting.js

@@ -49,6 +49,7 @@ import {
     ListAlt,
     PermContactCalendar,
     Schedule,
+    Translate,
 } from "@material-ui/icons";
 import Authn from "./Authn";
 import { formatLocalTime, timeZone } from "../../utils/datetime";
@@ -60,6 +61,8 @@ import {
     toggleSnackbar,
 } from "../../redux/explorer";
 import { Trans, withTranslation } from "react-i18next";
+import { selectLanguage } from "../../redux/viewUpdate/action";
+import OptionSelector from "../Modals/OptionSelector";
 
 const styles = (theme) => ({
     layout: {
@@ -191,6 +194,9 @@ const mapDispatchToProps = (dispatch) => {
         changeView: (method) => {
             dispatch(changeViewMethod(method));
         },
+        selectLanguage: () => {
+            dispatch(selectLanguage());
+        },
     };
 };
 
@@ -1076,6 +1082,24 @@ class UserSettingCompoment extends Component {
                                 </ListItemIcon>
                                 <ListItemText primary="主页" />
 
+                                <ListItemSecondaryAction
+                                    className={classes.flexContainer}
+                                >
+                                    <RightIcon
+                                        className={classes.rightIconWithText}
+                                    />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <Divider />
+                            <ListItem
+                                onClick={() => this.props.selectLanguage()}
+                                button
+                            >
+                                <ListItemIcon className={classes.iconFix}>
+                                    <Translate />
+                                </ListItemIcon>
+                                <ListItemText primary={t("setting.language")} />
+
                                 <ListItemSecondaryAction
                                     className={classes.flexContainer}
                                 >
@@ -1371,6 +1395,7 @@ class UserSettingCompoment extends Component {
                         </Button>
                     </DialogActions>
                 </Dialog>
+                <OptionSelector />
             </div>
         );
     }

src/i18n.ts

@@ -22,4 +22,15 @@ i18n.on("languageChanged", (lng) => {
     document.documentElement.setAttribute("lang", lng);
 });
 
+export const languages = [
+    {
+        code: "en-US",
+        displayName: "English",
+    },
+    {
+        code: "zh-CN",
+        displayName: "简体中文",
+    },
+];
+
 export default i18n;

src/redux/viewUpdate/action.ts

@@ -1,6 +1,8 @@
 import { ThunkAction } from "redux-thunk";
 import { AnyAction } from "redux";
 import Auth from "../../middleware/Auth";
+import { askForOption } from "../explorer/async";
+import i18next, { languages } from "../../i18n";
 
 export interface ActionSetSubtitle extends AnyAction {
     type: "SET_SUBTITLE";
@@ -99,3 +101,27 @@ export const changePageSize = (
         );
     };
 };
+
+export const selectLanguage = (): ThunkAction<any, any, any, any> => {
+    return async (dispatch, getState) => {
+        let option: any;
+        let lng = "";
+        try {
+            const allOptions = languages.map((e) => {
+                return {
+                    key: e.code,
+                    name: e.displayName,
+                };
+            });
+            option = await dispatch(
+                askForOption(allOptions, i18next.t("setting.language"))
+            );
+        } catch (e) {
+            console.log(e);
+            return;
+        }
+
+        lng = option.key;
+        await i18next.changeLanguage(lng);
+    };
+};