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 {