Merge pull request #1796 from ProjectMirador/1585-add-i18next

Use i18next / react-i18next for internationalizing strings

__tests__/src/components/WindowList.test.js

@@ -49,7 +49,7 @@ describe('WindowList', () => {
       expect(wrapper.find('WithStyles(MenuItem)').length).toBe(1);
       expect(wrapper.find('WithStyles(MenuItem)').key()).toBe('xyz');
       expect(
-        wrapper.find('WithStyles(MenuItem)').matchesElement(<MenuItem>[Untitled]</MenuItem>),
+        wrapper.find('WithStyles(MenuItem)').matchesElement(<MenuItem>untitled</MenuItem>),
       ).toBe(true);
       wrapper.find('WithStyles(MenuItem)').simulate('click', {});
       expect(handleClose).toBeCalled();

__tests__/src/components/WindowSideBarButtons.test.js

@@ -18,7 +18,7 @@ describe('WindowSideBarButtons', () => {
       <WindowSideBarButtons toggleWindowSideBarPanel={toggleWindowSideBarPanel} />,
     );
 
-    const iconButton = wrapper.find('WithStyles(IconButton)[aria-label="Open information companion window"]');
+    const iconButton = wrapper.find('WithStyles(IconButton)[aria-label="openInfoCompanionWindow"]');
     expect(iconButton.simulate('click'));
     expect(toggleWindowSideBarPanel).toHaveBeenCalledTimes(1);
     expect(toggleWindowSideBarPanel).toHaveBeenCalledWith('info');

__tests__/src/components/WindowSideBarInfoPanel.test.js

@@ -22,7 +22,7 @@ describe('WindowSideBarInfoPanel', () => {
   it('renders without an error', () => {
     expect(
       wrapper.find('WithStyles(Typography)[variant="h2"]').first().matchesElement(
-        <Typography>About this item</Typography>,
+        <Typography>aboutThisItem</Typography>,
       ),
     ).toBe(true);
 

__tests__/src/components/WindowSideBarPanel.test.js

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 import createStore from '../../../src/state/createStore';
 import * as actions from '../../../src/state/actions';
 import WindowSideBarPanel from '../../../src/components/WindowSideBarPanel';
+import WindowSideBarInfoPanel from '../../../src/containers/WindowSideBarInfoPanel';
 import fixture from '../../fixtures/version-2/001.json';
 
 describe('WindowSideBarPanel', () => {
@@ -21,7 +22,7 @@ describe('WindowSideBarPanel', () => {
     });
 
     it('renders the WindowSideBarInfoPanel', () => {
-      expect(wrapper.find('WithStyles(WindowSideBarInfoPanel)').length).toBe(1);
+      expect(wrapper.find(WindowSideBarInfoPanel).length).toBe(1);
     });
   });
 
@@ -31,7 +32,7 @@ describe('WindowSideBarPanel', () => {
     });
 
     it('does not render any panel component', () => {
-      expect(wrapper.find('WithStyes(WindowSideBarInfoPanel)').length).toBe(0);
+      expect(wrapper.find(WindowSideBarInfoPanel).length).toBe(0);
     });
   });
 });

__tests__/src/components/WindowTopBar.test.js

@@ -24,6 +24,7 @@ describe('WindowTopBar', () => {
         removeWindow={mockRemoveWindow}
         toggleWindowSideBar={mockToggleWindowSideBar}
         classes={{}}
+        t={key => key}
       />,
     ).dive();
   });

__tests__/src/components/WorkspaceControlPanelButtons.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
+import WorkspaceFullScreenButton from '../../../src/containers/WorkspaceFullScreenButton';
 import WorkspaceControlPanelButtons
   from '../../../src/components/WorkspaceControlPanelButtons';
 
@@ -11,6 +12,6 @@ describe('WorkspaceControlPanelButtons', () => {
 
   it('renders without an error', () => {
     expect(wrapper.find('WithStyles(List)').length).toBe(1);
-    expect(wrapper.find('Connect(WithStyles(WorkspaceFullScreenButton))').length).toBe(1);
+    expect(wrapper.find(WorkspaceFullScreenButton).length).toBe(1);
   });
 });

__tests__/src/components/WorkspaceFullScreenButton.test.js

@@ -8,7 +8,10 @@ describe('WorkspaceFullScreenButton', () => {
   beforeEach(() => {
     setWorkspaceFullscreen = jest.fn();
     wrapper = shallow(
-      <WorkspaceFullScreenButton classes={{}} setWorkspaceFullscreen={setWorkspaceFullscreen} />,
+      <WorkspaceFullScreenButton
+        classes={{}}
+        setWorkspaceFullscreen={setWorkspaceFullscreen}
+      />,
     ).dive();
   });
 

__tests__/src/components/WorkspaceMenu.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import WorkspaceMenu from '../../../src/components/WorkspaceMenu';
+import WindowList from '../../../src/containers/WindowList';
 
 describe('WorkspaceMenu', () => {
   let wrapper;
@@ -23,15 +24,14 @@ describe('WorkspaceMenu', () => {
     it('sets the anchor state', () => {
       wrapper.instance().handleMenuItemClick('windowList', { currentTarget: true });
 
-      expect(wrapper.find('Connect(WindowList)').props().open).toBe(true);
+      expect(wrapper.find(WindowList).props().open).toBe(true);
     });
   });
 
   describe('handleMenuItemClose', () => {
     it('resets the anchor state', () => {
       wrapper.instance().handleMenuItemClose('windowList')();
-
-      expect(wrapper.find('Connect(WindowList)').props().open).toBe(false);
+      expect(wrapper.find(WindowList).props().open).toBe(false);
     });
   });
 });

locales/en/translation.json

+{
+  "translation": {
+    "aboutThisItem": "About this item",
+    "add": "Add",
+    "bottom": "Bottom",
+    "closeInfoCompanionWindow": "Close information companion window",
+    "closeMenu": "Close Menu",
+    "closeWindow": "Close window",
+    "dark": "Dark",
+    "downloadExport": "Download/Export",
+    "downloadExportWorkspace": "Download/export workspace",
+    "fetchManifest": "Fetch Manifest",
+    "fullScreen": "Full Screen",
+    "light": "Light",
+    "listAllOpenWindows": "List all open windows",
+    "menu": "Menu",
+    "off": "Off",
+    "openInfoCompanionWindow": "Open information companion window",
+    "openWindows": "Open windows",
+    "position": "Position",
+    "right": "Right",
+    "settings": "Settings",
+    "theme": "Theme",
+    "thumbnails": "Thumbnails",
+    "toggleWindowSideBar": "Toggle window sidebar",
+    "untitled": "[Untitled]"
+  }
+}

package.json

@@ -34,6 +34,7 @@
     "classnames": "^2.2.6",
     "css-ns": "^1.2.2",
     "deepmerge": "^3.1.0",
+    "i18next": "^14.0.1",
     "intersection-observer": "^0.5.1",
     "manifesto.js": "^3.0.9",
     "node-fetch": "^2.3.0",
@@ -43,6 +44,7 @@
     "react": "^16.7.0",
     "react-dom": "^16.4.0",
     "react-fullscreen-crossbrowser": "^1.0.9",
+    "react-i18next": "^9.0.10",
     "react-mosaic-component": "^2.0.2",
     "react-redux": "^6.0.0",
     "react-virtualized": "^9.21.0",

src/components/ManifestForm.js

@@ -52,6 +52,7 @@ class ManifestForm extends Component {
    */
   render() {
     const { formValue } = this.state;
+    const { t } = this.props;
     return (
       <form onSubmit={this.formSubmit}>
         <input
@@ -60,7 +61,7 @@ class ManifestForm extends Component {
           type="text"
           onChange={this.handleInputChange}
         />
-        <button id="fetchBtn" type="submit">FetchManifest</button>
+        <button id="fetchBtn" type="submit">{t('fetchManifest')}</button>
       </form>
     );
   }
@@ -69,6 +70,11 @@ class ManifestForm extends Component {
 ManifestForm.propTypes = {
   fetchManifest: PropTypes.func.isRequired,
   setLastRequested: PropTypes.func.isRequired,
+  t: PropTypes.func,
+};
+
+ManifestForm.defaultProps = {
+  t: key => key,
 };
 
 export default ManifestForm;

src/components/WindowList.js

@@ -13,14 +13,14 @@ class WindowList extends Component {
    * @private
    */
   titleContent(window) {
-    const { manifests } = this.props;
+    const { manifests, t } = this.props;
 
     if (window.manifestId
         && manifests[window.manifestId]
         && manifests[window.manifestId].manifestation) {
       return manifests[window.manifestId].manifestation.getLabel().map(label => label.value)[0];
     }
-    return '[Untitled]';
+    return t('untitled');
   }
 
   /**
@@ -29,13 +29,13 @@ class WindowList extends Component {
    */
   render() {
     const {
-      handleClose, anchorEl, windows, focusWindow,
+      handleClose, anchorEl, windows, focusWindow, t,
     } = this.props;
     return (
       <Menu id="window-list-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
         <ListSubheader>
-          <Button color="inherit" aria-label="Close Menu" onClick={handleClose} align="right" style={{ float: 'right' }}>&times;</Button>
-          Open windows
+          <Button color="inherit" aria-label={t('closeMenu')} onClick={handleClose} align="right" style={{ float: 'right' }}>&times;</Button>
+          {t('openWindows')}
         </ListSubheader>
         {
           Object.values(windows).map(window => (
@@ -60,10 +60,12 @@ WindowList.propTypes = {
   anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   windows: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   manifests: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  t: PropTypes.func,
 };
 
 WindowList.defaultProps = {
   anchorEl: null,
+  t: key => key,
 };
 
 export default WindowList;

src/components/WindowSideBarButtons.js

@@ -23,11 +23,15 @@ class WindowSideBarButtons extends Component {
    * @return {type}  description
    */
   render() {
-    const { toggleWindowSideBarPanel } = this.props;
+    const { toggleWindowSideBarPanel, t } = this.props;
     return (
       <>
         <IconButton
-          aria-label="Open information companion window"
+          aria-label={
+            this.sideBarPanelCurrentlySelected('info')
+              ? t('closeInfoCompanionWindow')
+              : t('openInfoCompanionWindow')
+          }
           onClick={() => (toggleWindowSideBarPanel('info'))}
         >
           <InfoIcon
@@ -42,11 +46,13 @@ class WindowSideBarButtons extends Component {
 WindowSideBarButtons.propTypes = {
   toggleWindowSideBarPanel: PropTypes.func,
   sideBarPanel: PropTypes.string,
+  t: PropTypes.func,
 };
 
 WindowSideBarButtons.defaultProps = {
   toggleWindowSideBarPanel: () => {},
   sideBarPanel: 'closed',
+  t: key => key,
 };
 
 export default WindowSideBarButtons;

src/components/WindowSideBarInfoPanel.js

@@ -39,10 +39,10 @@ class WindowSideBarInfoPanel extends Component {
    * @return
    */
   render() {
-    const { classes } = this.props;
+    const { classes, t } = this.props;
     return (
       <div className={ns('window-sidebar-info-panel')}>
-        <Typography variant="h2" className={classes.windowSideBarH2}>About this item</Typography>
+        <Typography variant="h2" className={classes.windowSideBarH2}>{t('aboutThisItem')}</Typography>
         <Typography variant="h3" className={classes.windowSideBarH3}>{this.manifestLabel()}</Typography>
         <Typography variant="body2">{this.manifestDescription()}</Typography>
       </div>
@@ -53,12 +53,14 @@ class WindowSideBarInfoPanel extends Component {
 WindowSideBarInfoPanel.propTypes = {
   classes: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   manifest: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  t: PropTypes.func,
 };
 
 
 WindowSideBarInfoPanel.defaultProps = {
   classes: {},
   manifest: {},
+  t: key => key,
 };
 
 /**

src/components/WindowSideBarPanel.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import WindowSideBarInfoPanel from './WindowSideBarInfoPanel';
+import WindowSideBarInfoPanel from '../containers/WindowSideBarInfoPanel';
 
 /**
  * WindowSideBarPanel - the panel that pops out from the sidebar

src/components/WindowThumbnailSettings.js

@@ -34,28 +34,28 @@ export default class WindowThumbnailSettings extends Component {
    * @return {type}  description
    */
   render() {
-    const { thumbnailNavigationPosition } = this.props;
+    const { thumbnailNavigationPosition, t } = this.props;
 
     return (
       <>
-        <Typography>Thumbnails</Typography>
-        <RadioGroup aria-label="position" name="position" value={thumbnailNavigationPosition} onChange={this.handleChange} row>
+        <Typography>{t('thumbnails')}</Typography>
+        <RadioGroup aria-label={t('position')} name="position" value={thumbnailNavigationPosition} onChange={this.handleChange} row>
           <FormControlLabel
             value="off"
             control={<Radio color="primary" icon={<CancelPresentationIcon />} checkedIcon={<CancelPresentationIcon />} />}
-            label="Off"
+            label={t('off')}
             labelPlacement="bottom"
           />
           <FormControlLabel
             value="bottom"
             control={<Radio color="primary" icon={<ThumbnailNavigationBottomIcon />} checkedIcon={<ThumbnailNavigationBottomIcon />} />}
-            label="Bottom"
+            label={t('bottom')}
             labelPlacement="bottom"
           />
           <FormControlLabel
             value="right"
             control={<Radio color="primary" icon={<ThumbnailNavigationRightIcon />} checkedIcon={<ThumbnailNavigationRightIcon />} />}
-            label="Right"
+            label={t('right')}
             labelPlacement="bottom"
           />
         </RadioGroup>
@@ -86,4 +86,8 @@ WindowThumbnailSettings.propTypes = {
   windowId: PropTypes.string.isRequired,
   setWindowThumbnailPosition: PropTypes.func.isRequired,
   thumbnailNavigationPosition: PropTypes.string.isRequired,
+  t: PropTypes.func,
+};
+WindowThumbnailSettings.defaultProps = {
+  t: key => key,
 };

src/components/WindowTopBar.js

@@ -8,10 +8,11 @@ import MenuIcon from '@material-ui/icons/Menu';
 import Toolbar from '@material-ui/core/Toolbar';
 import classNames from 'classnames';
 import WindowIcon from '../containers/WindowIcon';
-import WindowTopMenuButton from './WindowTopMenuButton';
+import WindowTopMenuButton from '../containers/WindowTopMenuButton';
 import WindowTopBarButtons from '../containers/WindowTopBarButtons';
 import ns from '../config/css-ns';
 
+
 /**
  * WindowTopBar
  */
@@ -35,12 +36,12 @@ class WindowTopBar extends Component {
    */
   render() {
     const {
-      removeWindow, windowId, classes, toggleWindowSideBar,
+      removeWindow, windowId, classes, toggleWindowSideBar, t,
     } = this.props;
     return (
       <Toolbar disableGutters className={classNames(classes.reallyDense, ns('window-top-bar'))} variant="dense">
         <IconButton
-          aria-label="Open window side bar"
+          aria-label={t('toggleWindowSideBar')}
           color="inherit"
           onClick={() => toggleWindowSideBar(windowId)}
         >
@@ -52,7 +53,7 @@ class WindowTopBar extends Component {
         </Typography>
         <WindowTopBarButtons windowId={windowId} />
         <WindowTopMenuButton className={ns('window-menu-btn')} windowId={windowId} />
-        <Button color="inherit" className={ns('window-close')} aria-label="Close Window" onClick={removeWindow}>&times;</Button>
+        <Button color="inherit" className={ns('window-close')} aria-label={t('closeWindow')} onClick={removeWindow}>&times;</Button>
       </Toolbar>
     );
   }
@@ -64,11 +65,13 @@ WindowTopBar.propTypes = {
   windowId: PropTypes.string.isRequired,
   classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   toggleWindowSideBar: PropTypes.func,
+  t: PropTypes.func,
 };
 
 WindowTopBar.defaultProps = {
   manifest: null,
   toggleWindowSideBar: () => {},
+  t: key => key,
 };
 
 const styles = {

src/components/WindowTopMenuButton.js

 import React, { Component } from 'react';
-import { compose } from 'redux';
 import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { withStyles } from '@material-ui/core/styles';
@@ -44,14 +43,14 @@ class WindowTopMenuButton extends Component {
    * @return
    */
   render() {
-    const { classes, windowId } = this.props;
+    const { classes, t, windowId } = this.props;
     const { anchorEl } = this.state;
 
     return (
       <>
         <IconButton
           color="inherit"
-          aria-label="Menu"
+          aria-label={t('menu')}
           className={classes.ctrlBtn}
           aria-haspopup="true"
           onClick={this.handleMenuClick}
@@ -72,6 +71,11 @@ class WindowTopMenuButton extends Component {
 WindowTopMenuButton.propTypes = {
   windowId: PropTypes.string.isRequired,
   classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  t: PropTypes.func,
+};
+
+WindowTopMenuButton.defaultProps = {
+  t: key => key,
 };
 
 /**
@@ -83,10 +87,4 @@ const styles = theme => ({
   },
 });
 
-
-const enhance = compose(
-  withStyles(styles),
-  // further HOC go here
-);
-
-export default enhance(WindowTopMenuButton);
+export default withStyles(styles)(WindowTopMenuButton);

src/components/WorkspaceAddButton.js

@@ -60,7 +60,7 @@ class WorkspaceAddButton extends Component {
    * @return
    */
   render() {
-    const { classes, manifests } = this.props;
+    const { classes, t, manifests } = this.props;
     const { lastRequested, anchorEl } = this.state;
 
     const manifestList = Object.keys(manifests).map(manifest => (
@@ -76,7 +76,7 @@ class WorkspaceAddButton extends Component {
         <Fab
           color="primary"
           id="addBtn"
-          aria-label="Add"
+          aria-label={t('add')}
           className={classes.fab}
           aria-owns={anchorEl ? 'add-form' : undefined}
           aria-haspopup="true"
@@ -105,6 +105,11 @@ class WorkspaceAddButton extends Component {
 WorkspaceAddButton.propTypes = {
   manifests: PropTypes.instanceOf(Object).isRequired,
   classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  t: PropTypes.func,
+};
+
+WorkspaceAddButton.defaultProps = {
+  t: key => key,
 };
 
 /**

src/components/WorkspaceControlPanelButtons.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import List from '@material-ui/core/List';
 import WorkspaceFullScreenButton from '../containers/WorkspaceFullScreenButton';
 import WorkspaceAddButton from '../containers/WorkspaceAddButton';
-import WorkspaceMenuButton from './WorkspaceMenuButton';
+import WorkspaceMenuButton from '../containers/WorkspaceMenuButton';
+
 /**
  *
  */