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/common.i18n.json

@@ -0,0 +1,6 @@
+{
+  "Common": {
+    "language": "Translate into English.",
+    "disconnect": "Disconnect"
+  } 
+}

webclient/src/components/CountryDropdown/CountryDropdown.css

@@ -4,9 +4,10 @@
 
 .CountryDropdown-item {
   display: flex;
+  align-items: center;
 }
 
 .CountryDropdown-item__image {
-  width: 1.1em;
+  width: 1.5em;
   margin-right: 1em;
 }

webclient/src/components/LanguageDropdown/LanguageDropdown.css

@@ -0,0 +1,19 @@
+.LanguageDropdown {
+}
+
+.LanguageDropdown-item {
+  display: flex;
+  align-items: center;
+}
+
+.LanguageDropdown-item__image {
+  width: 1.5em;
+}
+
+.MuiSelect-root .LanguageDropdown-item__label {
+  display: none;
+}
+
+.MuiListItem-root .LanguageDropdown-item__image {
+  margin-right: 1em;
+}

webclient/src/components/LanguageDropdown/LanguageDropdown.tsx

@@ -0,0 +1,51 @@
+// eslint-disable-next-line
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Select, MenuItem } from '@material-ui/core';
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+
+import { Images } from 'images/Images';
+import { CountryLabel, Language, LanguageCountry } from 'types';
+
+import './LanguageDropdown.css';
+
+const LanguageDropdown = () => {
+  const { i18n } = useTranslation();
+  const [language, setLanguage] = useState(i18n.resolvedLanguage);
+
+  useEffect(() => {
+    if (language !== i18n.resolvedLanguage) {
+      i18n.changeLanguage(language);
+    }
+  }, [language]);
+
+  return (
+    <FormControl variant='outlined' className='LanguageDropdown'>
+      <Select
+        id='LanguageDropdown-select'
+        margin='dense'
+        value={language}
+        fullWidth={true}
+        onChange={e => setLanguage(e.target.value as Language)}
+      >
+        {
+          Object.keys(LanguageCountry).map((lang) => {
+            const country = LanguageCountry[lang];
+
+            return (
+              <MenuItem value={lang} key={lang}>
+                <div className="LanguageDropdown-item">
+                  <img className="LanguageDropdown-item__image" src={Images.Countries[country]} alt={CountryLabel[country]} />
+                  <span className="LanguageDropdown-item__label">{lang}</span>
+                </div>
+              </MenuItem>
+            );
+          })
+        }
+      </Select>
+    </FormControl>
+  )
+};
+
+export default LanguageDropdown;

webclient/src/components/index.ts

@@ -6,6 +6,7 @@ export { default as Header } from './Header/Header';
 export { default as InputField } from './InputField/InputField';
 export { default as InputAction } from './InputAction/InputAction';
 export { default as KnownHosts } from './KnownHosts/KnownHosts';
+export { default as LanguageDropdown } from './LanguageDropdown/LanguageDropdown';
 export { default as Message } from './Message/Message';
 export { default as VirtualList } from './VirtualList/VirtualList';
 export { default as UserDisplay } from './UserDisplay/UserDisplay';

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">

webclient/src/i18n-backend.ts

@@ -0,0 +1,21 @@
+import { ModuleType } from 'i18next';
+
+import { Language } from 'types';
+
+class I18nBackend {
+  static type: ModuleType = 'backend';
+  static BASE_URL = `${process.env.PUBLIC_URL}/locales`;
+
+  read(language, namespace, callback) {
+    if (!Language[language]) {
+      callback(true, null);
+      return;
+    }
+
+    fetch(`${I18nBackend.BASE_URL}/${Language[language]}/${namespace}.json`)
+      .then(resp => resp.json().then(json => callback(null, json)))
+      .catch(error => callback(error, null));
+  }
+}
+
+export default I18nBackend;

webclient/src/i18n-default.json

@@ -0,0 +1 @@
+{"Common":{"language":"Translate into English.","disconnect":"Disconnect"},"LoginContainer":{"title":"Login","subtitle":"A cross-platform virtual tabletop for multiplayer card games."}}

webclient/src/i18n.ts

@@ -0,0 +1,30 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+import { Language } from 'types';
+
+import I18nBackend from './i18n-backend';
+
+// Bundle default translation with application
+import translation from './i18n-default.json';
+
+i18n
+  .use(I18nBackend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    fallbackLng: Language['en-US'],
+    resources: {
+      [Language['en-US']]: { translation },
+    },
+    partialBundledLanguages: true,
+
+    interpolation: {
+      // not needed for react as it escapes by default
+      escapeValue: false,
+    },
+  });
+
+export default i18n;

webclient/src/index.tsx

@@ -1,12 +1,15 @@
 import { ThemeProvider } from '@material-ui/styles';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 
-import { materialTheme } from './material-theme';
 
 import { AppShell } from 'containers';
 
+import { materialTheme } from './material-theme';
+import './i18n';
+
+import './index.css';
+
 const appWithMaterialTheme = () => (
   <ThemeProvider theme={materialTheme}>
     <AppShell />

webclient/src/translations/en.json

@@ -1,3 +0,0 @@
-{
-    
-}

webclient/src/types/index.ts

@@ -11,3 +11,4 @@ export * from './sort';
 export * from './forms';
 export * from './message';
 export * from './settings';
+export * from './languages';

webclient/src/types/languages.ts

@@ -0,0 +1,11 @@
+import { CountryLabel } from './countries';
+
+export enum Language {
+  'en-US' = 'en-US',
+  'es-ES' = 'es-ES',
+}
+
+export enum LanguageCountry {
+  'en-US' = 'us',
+  'es-ES' = 'es',
+}