Add switch language button on footer

client/package.json

@@ -6,8 +6,7 @@
     "build-dev": "NODE_ENV=development ./node_modules/.bin/webpack --config webpack.dev.js",
     "watch": "NODE_ENV=development ./node_modules/.bin/webpack --config webpack.dev.js --watch",
     "build-prod": "NODE_ENV=production ./node_modules/.bin/webpack --config webpack.prod.js",
-    "lint": "eslint frontend/",
-    "start": "react-scripts start"
+    "lint": "eslint frontend/"
   },
   "dependencies": {
     "@nivo/line": "^0.49.1",

client/src/components/Dashboard/Statistics.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Trans } from 'react-i18next';
+import { Trans, withNamespaces } from 'react-i18next';
 
 import Card from '../ui/Card';
 import Line from '../ui/Line';
@@ -107,4 +107,4 @@ Statistics.propTypes = {
     refreshButton: PropTypes.node.isRequired,
 };
 
-export default Statistics;
+export default withNamespaces()(Statistics);

client/src/components/Header/Menu.js

@@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import enhanceWithClickOutside from 'react-click-outside';
 import classnames from 'classnames';
-import { Trans } from 'react-i18next';
+import { Trans, withNamespaces } from 'react-i18next';
 import { REPOSITORY } from '../../helpers/constants';
 
 class Menu extends Component {
@@ -74,4 +74,4 @@ Menu.propTypes = {
     toggleMenuOpen: PropTypes.func,
 };
 
-export default enhanceWithClickOutside(Menu);
+export default withNamespaces()(enhanceWithClickOutside(Menu));

client/src/components/Header/Version.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans } from 'react-i18next';
+import { Trans, withNamespaces } from 'react-i18next';
 
-export default function Version(props) {
+function Version(props) {
     const { dnsVersion, dnsAddress, dnsPort } = props;
     return (
         <div className="nav-version">
@@ -21,3 +21,5 @@ Version.propTypes = {
     dnsAddress: PropTypes.string,
     dnsPort: PropTypes.number,
 };
+
+export default withNamespaces()(Version);

client/src/components/Header/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Trans } from 'react-i18next';
+import { Trans, withNamespaces } from 'react-i18next';
 
 import Menu from './Menu';
 import Version from './Version';
@@ -73,4 +73,4 @@ Header.propTypes = {
     location: PropTypes.object,
 };
 
-export default Header;
+export default withNamespaces()(Header);

client/src/components/Toasts/Toast.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Trans } from 'react-i18next';
+import { Trans, withNamespaces } from 'react-i18next';
 
 class Toast extends Component {
     componentDidMount() {
@@ -36,4 +36,4 @@ Toast.propTypes = {
     removeToast: PropTypes.func.isRequired,
 };
 
-export default Toast;
+export default withNamespaces()(Toast);

client/src/components/ui/Footer.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-import { Trans } from 'react-i18next';
+import { Trans, withNamespaces } from 'react-i18next';
 import { REPOSITORY } from '../../helpers/constants';
+import i18n from '../../i18n';
 
 class Footer extends Component {
     getYear = () => {
@@ -8,6 +9,10 @@ class Footer extends Component {
         return today.getFullYear();
     };
 
+    changeLanguage = () => {
+        i18n.changeLanguage(i18n.language === 'en' ? 'vi' : 'en');
+    }
+
     render() {
         return (
             <footer className="footer">
@@ -25,6 +30,12 @@ class Footer extends Component {
                                         </li>
                                     </ul>
                                 </div>
+                                <div className="col-auto">
+                                    <button className="btn btn-outline-info btn-sm" onClick={this.changeLanguage}
+                                        title={i18n.language === 'en' ? 'Chuyển sang Tiếng Việt' : 'Change to English'}>
+                                        {i18n.language === 'en' ? 'English' : 'Tiếng Việt'}
+                                    </button>
+                                </div>
                                 <div className="col-auto">
                                     <a href={`${REPOSITORY.URL}/issues/new`} className="btn btn-outline-primary btn-sm" target="_blank" rel="noopener noreferrer">
                                         <Trans>Report an issue</Trans>
@@ -39,4 +50,4 @@ class Footer extends Component {
     }
 }
 
-export default Footer;
+export default withNamespaces()(Footer);

client/src/components/ui/Popover.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Trans } from 'react-i18next';
+import { Trans, withNamespaces } from 'react-i18next';
 import { getSourceData } from '../../helpers/trackers/trackers';
 import { captitalizeWords } from '../../helpers/helpers';
 
@@ -52,4 +52,4 @@ Popover.propTypes = {
     data: PropTypes.object.isRequired,
 };
 
-export default Popover;
+export default withNamespaces()(Popover);