Webatrice: i18n (#4562)

* implement i18n capability

* reset package.lock file

* remove custom fallback

* fix relative path for i18n files

* check for language support before fetch request

* add LanguageDropdown component, es translation file to prove functionality

* remove boilerplate

* bundle default english translation with app

* add missing file

* rollup component-level i18n files

* cleanup

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/containers/Account/Account.css

@@ -43,7 +43,11 @@
   font-size: 10px;
 }
 
-.account-details img {
+.account-details > img {
   width: 100%;
   margin-bottom: 20px;
-}
+}
+
+.account-details__lang {
+  margin-top: 20px;
+}

webclient/src/containers/Account/Account.tsx

@@ -1,12 +1,13 @@
 // eslint-disable-next-line
 import React, { Component } from "react";
+import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 
 import Button from '@material-ui/core/Button';
 import ListItem from '@material-ui/core/ListItem';
 import Paper from '@material-ui/core/Paper';
 
-import { UserDisplay, VirtualList, AuthGuard } from 'components';
+import { UserDisplay, VirtualList, AuthGuard, LanguageDropdown } from 'components';
 import { AuthenticationService, SessionService } from 'api';
 import { ServerSelectors } from 'store';
 import { User } from 'types';
@@ -16,85 +17,87 @@ import AddToIgnore from './AddToIgnore';
 
 import './Account.css';
 
-class Account extends Component<AccountProps> {
-  handleAddToBuddies({ userName }) {
+const Account = (props: AccountProps) => {
+  const { buddyList, ignoreList, serverName, serverVersion, user } = props;
+  const { country, realName, name, userLevel, accountageSecs, avatarBmp } = user;
+  let url = URL.createObjectURL(new Blob([avatarBmp], { 'type': 'image/png' }));
+
+  const { t } = useTranslation();
+
+  const handleAddToBuddies = ({ userName }) => {
     SessionService.addToBuddyList(userName);
-  }
+  };
 
-  handleAddToIgnore({ userName }) {
+  const handleAddToIgnore = ({ userName }) => {
     SessionService.addToIgnoreList(userName);
-  }
+  };
 
-  render() {
-    console.log(this.props);
-
-    const { buddyList, ignoreList, serverName, serverVersion, user } = this.props;
-    const { country, realName, name, userLevel, accountageSecs, avatarBmp } = user;
-
-    let url = URL.createObjectURL(new Blob([avatarBmp], { 'type': 'image/png' }));
-
-    return (
-      <div className="account">
-        <AuthGuard />
-        <div className="account-column">
-          <Paper className="account-list">
-            <div className="">
-              Buddies Online: ?/{buddyList.length}
-            </div>
-            <VirtualList
-              itemKey={(index, data) => buddyList[index].name }
-              items={ buddyList.map(user => (
-                <ListItem button dense>
-                  <UserDisplay user={user} />
-                </ListItem>
-              )) }
-            />
-            <div className="" style={{ borderTop: '1px solid' }}>
-              <AddToBuddies onSubmit={this.handleAddToBuddies} />
-            </div>
-          </Paper>
-        </div>
-        <div className="account-column">
-          <Paper className="account-list overflow-scroll">
-            <div className="">
-              Ignored Users Online: ?/{ignoreList.length}
-            </div>
-            <VirtualList
-              itemKey={(index, data) => ignoreList[index].name }
-              items={ ignoreList.map(user => (
-                <ListItem button dense>
-                  <UserDisplay user={user} />
-                </ListItem>
-              )) }
-            />
-            <div className="" style={{ borderTop: '1px solid' }}>
-              <AddToIgnore onSubmit={this.handleAddToIgnore} />
-            </div>
-          </Paper>
-        </div>
-        <div className="account-column overflow-scroll">
-          <Paper className="account-details" style={{ margin: '0 0 5px 0' }}>
-            <img src={url} alt={name} />
-            <p><strong>{name}</strong></p>
-            <p>Location: ({country?.toUpperCase()})</p>
-            <p>User Level: {userLevel}</p>
-            <p>Account Age: {accountageSecs}</p>
-            <p>Real Name: {realName}</p>
-            <div className="account-details__actions">
-              <Button size="small" color="primary" variant="contained">Edit</Button>
-              <Button size="small" color="primary" variant="contained">Change<br />Password</Button>
-              <Button size="small" color="primary" variant="contained">Change<br />Avatar</Button>
-            </div>
-          </Paper>
-          <Paper className="account-details">
-            <p>Server Name: {serverName}</p>
-            <p>Server Version: {serverVersion}</p>
-            <Button color="primary" variant="contained" onClick={() => AuthenticationService.disconnect()}>Disconnect</Button>
-          </Paper>
-        </div>
+  return (
+    <div className="account">
+      <AuthGuard />
+      <div className="account-column">
+        <Paper className="account-list">
+          <div className="">
+            Buddies Online: ?/{buddyList.length}
+          </div>
+          <VirtualList
+            itemKey={(index, data) => buddyList[index].name }
+            items={ buddyList.map(user => (
+              <ListItem button dense>
+                <UserDisplay user={user} />
+              </ListItem>
+            )) }
+          />
+          <div className="" style={{ borderTop: '1px solid' }}>
+            <AddToBuddies onSubmit={handleAddToBuddies} />
+          </div>
+        </Paper>
       </div>
-    )
-  }
+      <div className="account-column">
+        <Paper className="account-list overflow-scroll">
+          <div className="">
+            Ignored Users Online: ?/{ignoreList.length}
+          </div>
+          <VirtualList
+            itemKey={(index, data) => ignoreList[index].name }
+            items={ ignoreList.map(user => (
+              <ListItem button dense>
+                <UserDisplay user={user} />
+              </ListItem>
+            )) }
+          />
+          <div className="" style={{ borderTop: '1px solid' }}>
+            <AddToIgnore onSubmit={handleAddToIgnore} />
+          </div>
+        </Paper>
+      </div>
+      <div className="account-column overflow-scroll">
+        <Paper className="account-details" style={{ margin: '0 0 5px 0' }}>
+          <img src={url} alt={name} />
+          <p><strong>{name}</strong></p>
+          <p>Location: ({country?.toUpperCase()})</p>
+          <p>User Level: {userLevel}</p>
+          <p>Account Age: {accountageSecs}</p>
+          <p>Real Name: {realName}</p>
+          <div className="account-details__actions">
+            <Button size="small" color="primary" variant="contained">Edit</Button>
+            <Button size="small" color="primary" variant="contained">Change<br />Password</Button>
+            <Button size="small" color="primary" variant="contained">Change<br />Avatar</Button>
+          </div>
+
+        </Paper>
+        <Paper className="account-details">
+          <p>Server Name: {serverName}</p>
+          <p>Server Version: {serverVersion}</p>
+          <Button color="primary" variant="contained" onClick={() => AuthenticationService.disconnect()}>{ t('Common.disconnect') }</Button>
+
+          <div className="account-details__lang">
+            <LanguageDropdown />
+          </div>
+        </Paper>
+      </div>
+    </div>
+  )
 }
 
 interface AccountProps {

webclient/src/containers/App/AppShell.tsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, Suspense } from 'react';
 import { Provider } from 'react-redux';
 import { MemoryRouter as Router } from 'react-router-dom';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -23,19 +23,21 @@ class AppShell extends Component {
 
   render() {
     return (
-      <Provider store={store}>
-        <CssBaseline />
-        <ToastProvider>
-          <div className="AppShell" onContextMenu={this.handleContextMenu}>
-            <Router>
-              <Header />
+      <Suspense fallback="loading">
+        <Provider store={store}>
+          <CssBaseline />
+          <ToastProvider>
+            <div className="AppShell" onContextMenu={this.handleContextMenu}>
+              <Router>
+                <Header />
 
-              <FeatureDetection />
-              <Routes />
-            </Router>
-          </div>
-        </ToastProvider>
-      </Provider>
+                <FeatureDetection />
+                <Routes />
+              </Router>
+            </div>
+          </ToastProvider>
+        </Provider>
+      </Suspense>
     );
   }
 }

webclient/src/containers/Login/Login.css

@@ -185,11 +185,15 @@
   margin-top: 30px;
 }
 
-.login-footer_register {
+.login-footer__register {
   margin-bottom: 10px;
   font-weight: bold;
 }
 
+.login-footer__language {
+  margin-top: 20px;
+}
+
 .login-content__connectionStatus {
   text-align: center;
   margin: 20px 0;

webclient/src/containers/Login/Login.i18n.json

@@ -0,0 +1,6 @@
+{
+  "LoginContainer": {
+    "title": "Login",
+    "subtitle": "A cross-platform virtual tabletop for multiplayer card games."
+  }
+}

webclient/src/containers/Login/Login.tsx

@@ -1,4 +1,5 @@
 import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
@@ -6,9 +7,9 @@ import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 
-
 import { AuthenticationService } from 'api';
 import { RegistrationDialog, RequestPasswordResetDialog, ResetPasswordDialog, AccountActivationDialog } from 'dialogs';
+import { LanguageDropdown } from 'components';
 import { LoginForm } from 'forms';
 import { useReduxEffect, useFireOnce } from 'hooks';
 import { Images } from 'images';
@@ -58,6 +59,8 @@ const useStyles = makeStyles(theme => ({
 
 const Login = ({ state, description }: LoginProps) => {
   const classes = useStyles();
+  const { t } = useTranslation();
+
   const isConnected = AuthenticationService.isConnected(state);
 
   const [hostIdToRemember, setHostIdToRemember] = useState(null);
@@ -239,8 +242,8 @@ const Login = ({ state, description }: LoginProps) => {
               <img src={Images.Logo} alt="logo" />
               <span>COCKATRICE</span>
             </div>
-            <Typography variant="h1">Login</Typography>
-            <Typography variant="subtitle1">A cross-platform virtual tabletop for multiplayer card games.</Typography>
+            <Typography variant="h1">{ t('LoginContainer.title') }</Typography>
+            <Typography variant="subtitle1">{ t('LoginContainer.subtitle') }</Typography>
             <div className="login-form">
               <LoginForm
                 onSubmit={handleLogin}
@@ -258,13 +261,14 @@ const Login = ({ state, description }: LoginProps) => {
             }
 
             <div className="login-footer">
-              <div className="login-footer_register">
+              <div className="login-footer__register">
                 <span>Not registered yet?</span>
                 <Button color="primary" onClick={openRegistrationDialog}>Create an account</Button>
               </div>
               <Typography variant="subtitle2">
                 Cockatrice is an open source project. { new Date().getUTCFullYear() }
               </Typography>
+
               {
                 serverProps.REACT_APP_VERSION && (
                   <Typography variant="subtitle2">
@@ -272,6 +276,10 @@ const Login = ({ state, description }: LoginProps) => {
                   </Typography>
                 )
               }
+
+              <div className="login-footer__language">
+                <LanguageDropdown />
+              </div>
             </div>
           </div>
           <div className="login-content__description">