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

Use i18next / react-i18next for internationalizing strings

src/components/WorkspaceExport.js

@@ -26,11 +26,11 @@ class WorkspaceExport extends Component {
    */
   render() {
     const {
-      handleClose, open, children,
+      handleClose, open, children, t,
     } = this.props;
     return (
       <Dialog id="workspace-settings" open={open} onClose={handleClose}>
-        <DialogTitle id="form-dialog-title">Download/Export</DialogTitle>
+        <DialogTitle id="form-dialog-title">{t('downloadExport')}</DialogTitle>
         <DialogContent>
           {children}
           <pre>
@@ -47,11 +47,13 @@ WorkspaceExport.propTypes = {
   open: PropTypes.bool, // eslint-disable-line react/forbid-prop-types
   children: PropTypes.node,
   state: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  t: PropTypes.func,
 };
 
 WorkspaceExport.defaultProps = {
   open: false,
   children: null,
+  t: key => key,
 };
 
 export default WorkspaceExport;

src/components/WorkspaceFullScreenButton.js

@@ -13,10 +13,10 @@ class WorkspaceFullScreenButton extends Component {
    * @return
    */
   render() {
-    const { classes, setWorkspaceFullscreen } = this.props;
+    const { classes, setWorkspaceFullscreen, t } = this.props;
     return (
       <ListItem>
-        <IconButton className={classes.ctrlBtn} aria-label="Full Screen" onClick={() => setWorkspaceFullscreen(true)}>
+        <IconButton className={classes.ctrlBtn} aria-label={t('fullScreen')} onClick={() => setWorkspaceFullscreen(true)}>
           <FullscreenIcon />
         </IconButton>
       </ListItem>
@@ -27,6 +27,11 @@ class WorkspaceFullScreenButton extends Component {
 WorkspaceFullScreenButton.propTypes = {
   setWorkspaceFullscreen: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  t: PropTypes.func,
+};
+
+WorkspaceFullScreenButton.defaultProps = {
+  t: key => key,
 };
 
 /**

src/components/WorkspaceMenu.js

@@ -58,7 +58,7 @@ class WorkspaceMenu extends Component {
    * @return
    */
   render() {
-    const { handleClose, anchorEl } = this.props;
+    const { handleClose, anchorEl, t } = this.props;
     const { windowList, settings, exportWorkspace } = this.state;
 
     return (
@@ -72,7 +72,7 @@ class WorkspaceMenu extends Component {
             <ListItemIcon>
               <ViewHeadlineIcon />
             </ListItemIcon>
-            <Typography varient="inherit">List all open windows</Typography>
+            <Typography varient="inherit">{t('listAllOpenWindows')}</Typography>
           </MenuItem>
           <Divider />
           <MenuItem
@@ -83,7 +83,7 @@ class WorkspaceMenu extends Component {
             <ListItemIcon>
               <SettingsIcon />
             </ListItemIcon>
-            <Typography varient="inherit">Settings</Typography>
+            <Typography varient="inherit">{t('settings')}</Typography>
           </MenuItem>
           <MenuItem
             aria-haspopup="true"
@@ -93,7 +93,7 @@ class WorkspaceMenu extends Component {
             <ListItemIcon>
               <SaveAltIcon />
             </ListItemIcon>
-            <Typography varient="inherit">Download/export workspace</Typography>
+            <Typography varient="inherit">{t('downloadExportWorkspace')}</Typography>
           </MenuItem>
         </Menu>
         <WindowList
@@ -117,10 +117,12 @@ class WorkspaceMenu extends Component {
 WorkspaceMenu.propTypes = {
   handleClose: PropTypes.func.isRequired,
   anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  t: PropTypes.func,
 };
 
 WorkspaceMenu.defaultProps = {
   anchorEl: null,
+  t: key => key,
 };
 
 export default WorkspaceMenu;

src/components/WorkspaceMenuButton.js

@@ -4,7 +4,7 @@ import MenuIcon from '@material-ui/icons/Menu';
 import ListItem from '@material-ui/core/ListItem';
 import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
-import WorkspaceMenu from './WorkspaceMenu';
+import WorkspaceMenu from '../containers/WorkspaceMenu';
 
 /**
  */
@@ -44,7 +44,7 @@ class WorkspaceMenuButton extends Component {
    * @return
    */
   render() {
-    const { classes } = this.props;
+    const { classes, t } = this.props;
     const { anchorEl } = this.state;
 
     return (
@@ -53,7 +53,7 @@ class WorkspaceMenuButton extends Component {
           <IconButton
             color="default"
             id="menuBtn"
-            aria-label="Menu"
+            aria-label={t('menu')}
             className={classes.ctrlBtn}
             aria-haspopup="true"
             onClick={this.handleMenuClick}
@@ -73,6 +73,11 @@ class WorkspaceMenuButton extends Component {
 
 WorkspaceMenuButton.propTypes = {
   classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  t: PropTypes.func,
+};
+
+WorkspaceMenuButton.defaultProps = {
+  t: key => key,
 };
 
 /**

src/components/WorkspaceSettings.js

@@ -34,15 +34,15 @@ class WorkspaceSettings extends Component {
    */
   render() {
     const {
-      handleClose, open, children, theme,
+      handleClose, open, children, theme, t,
     } = this.props;
     return (
       <Dialog id="workspace-settings" open={open} onClose={handleClose}>
-        <DialogTitle id="form-dialog-title">Settings</DialogTitle>
+        <DialogTitle id="form-dialog-title">{t('settings')}</DialogTitle>
         <DialogContent>
           {children}
           <FormControl>
-            <InputLabel htmlFor="theme-simple">Theme</InputLabel>
+            <InputLabel htmlFor="theme-simple">{t('theme')}</InputLabel>
             <Select
               value={theme}
               onChange={this.handleThemeChange}
@@ -51,8 +51,8 @@ class WorkspaceSettings extends Component {
                 id: 'theme-simple',
               }}
             >
-              <MenuItem value="light">Light</MenuItem>
-              <MenuItem value="dark">Dark</MenuItem>
+              <MenuItem value="light">{t('light')}</MenuItem>
+              <MenuItem value="dark">{t('dark')}</MenuItem>
             </Select>
           </FormControl>
         </DialogContent>
@@ -67,11 +67,13 @@ WorkspaceSettings.propTypes = {
   children: PropTypes.node,
   updateConfig: PropTypes.func.isRequired,
   theme: PropTypes.string.isRequired,
+  t: PropTypes.func,
 };
 
 WorkspaceSettings.defaultProps = {
   open: false,
   children: null,
+  t: key => key,
 };
 
 export default WorkspaceSettings;

src/containers/ManifestForm.js

 import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
 import * as actions from '../state/actions';
 import ManifestForm from '../components/ManifestForm';
 
@@ -9,5 +11,10 @@ import ManifestForm from '../components/ManifestForm';
  */
 const mapDispatchToProps = { fetchManifest: actions.fetchManifest };
 
+const enhance = compose(
+  connect(null, mapDispatchToProps),
+  withNamespaces(),
+  // further HOC go here
+);
 
-export default connect(null, mapDispatchToProps)(ManifestForm);
+export default enhance(ManifestForm);

src/containers/WindowList.js

 import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
 import * as actions from '../state/actions';
 import WindowList from '../components/WindowList';
 
@@ -23,4 +25,10 @@ const mapStateToProps = state => (
   }
 );
 
-export default connect(mapStateToProps, mapDispatchToProps)(WindowList);
+const enhance = compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withNamespaces(),
+  // further HOC
+);
+
+export default enhance(WindowList);

src/containers/WindowSideBarButtons.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { withNamespaces } from 'react-i18next';
 import * as actions from '../state/actions';
 import miradorWithPlugins from '../lib/miradorWithPlugins';
 import WindowSideBarButtons from '../components/WindowSideBarButtons';
@@ -19,6 +20,7 @@ const mapDispatchToProps = (dispatch, props) => ({
 const enhance = compose(
   connect(null, mapDispatchToProps),
   miradorWithPlugins,
+  withNamespaces(),
   // further HOC go here
 );
 

src/containers/WindowSideBarInfoPanel.js

+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
+import WindowSideBarInfoPanel from '../components/WindowSideBarInfoPanel';
+
+const enhance = compose(
+  withNamespaces(),
+  miradorWithPlugins,
+  // further HOC
+);
+
+export default enhance(WindowSideBarInfoPanel);

src/containers/WindowThumbnailSettings.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
 import * as actions from '../state/actions';
 import { getThumbnailNavigationPosition } from '../state/selectors';
 import WindowThumbnailSettings from '../components/WindowThumbnailSettings';
@@ -24,6 +26,8 @@ const mapStateToProps = (state, props) => (
 
 const enhance = compose(
   connect(mapStateToProps, mapDispatchToProps),
+  withNamespaces(),
+  miradorWithPlugins,
   // further HOC go here
 );
 

src/containers/WindowTopBar.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { withNamespaces } from 'react-i18next';
 import * as actions from '../state/actions';
 import miradorWithPlugins from '../lib/miradorWithPlugins';
 import WindowTopBar from '../components/WindowTopBar';
@@ -17,6 +18,7 @@ const mapDispatchToProps = (dispatch, props) => ({
 const enhance = compose(
   connect(null, mapDispatchToProps),
   miradorWithPlugins,
+  withNamespaces(),
   // further HOC go here
 );
 

src/containers/WindowTopMenuButton.js

+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
+import WindowTopMenuButton from '../components/WindowTopMenuButton';
+
+const enhance = compose(
+  withNamespaces(),
+  miradorWithPlugins,
+  // further HOC
+);
+
+export default enhance(WindowTopMenuButton);

src/containers/WorkspaceAddButton.js

 import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
 import WorkspaceAddButton from '../components/WorkspaceAddButton';
 
 /**
@@ -12,4 +15,10 @@ const mapStateToProps = state => (
   }
 );
 
-export default connect(mapStateToProps)(WorkspaceAddButton);
+const enhance = compose(
+  connect(mapStateToProps),
+  withNamespaces(),
+  miradorWithPlugins,
+);
+
+export default enhance(WorkspaceAddButton);

src/containers/WorkspaceExport.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
 import WorkspaceExport from '../components/WorkspaceExport';
 
 /**
@@ -11,6 +13,8 @@ const mapStateToProps = state => ({ state });
 
 const enhance = compose(
   connect(mapStateToProps, {}),
+  miradorWithPlugins,
+  withNamespaces(),
   // further HOC go here
 );
 

src/containers/WorkspaceFullScreenButton.js

 import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
 import * as actions from '../state/actions';
 import WorkspaceFullScreenButton
   from '../components/WorkspaceFullScreenButton';
@@ -10,4 +13,11 @@ import WorkspaceFullScreenButton
  */
 const mapDispatchToProps = { setWorkspaceFullscreen: actions.setWorkspaceFullscreen };
 
-export default connect(null, mapDispatchToProps)(WorkspaceFullScreenButton);
+const enhance = compose(
+  connect(null, mapDispatchToProps),
+  withNamespaces(),
+  miradorWithPlugins,
+  // further HOC
+);
+
+export default enhance(WorkspaceFullScreenButton);

src/containers/WorkspaceMenu.js

+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
+import WorkspaceMenu from '../components/WorkspaceMenu';
+
+const enhance = compose(
+  withNamespaces(),
+  miradorWithPlugins,
+  // further HOC
+);
+
+export default enhance(WorkspaceMenu);

src/containers/WorkspaceMenuButton.js

+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
+import WorkspaceMenuButton from '../components/WorkspaceMenuButton';
+
+const enhance = compose(
+  withNamespaces(),
+  miradorWithPlugins,
+  // further HOC
+);
+
+export default enhance(WorkspaceMenuButton);

src/containers/WorkspaceSettings.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { withNamespaces } from 'react-i18next';
 import WorkspaceSettings from '../components/WorkspaceSettings';
 import * as actions from '../state/actions';
 
@@ -25,6 +26,7 @@ const mapStateToProps = state => (
 
 const enhance = compose(
   connect(mapStateToProps, mapDispatchToProps),
+  withNamespaces(),
   // further HOC go here
 );
 

src/i18n.js

+import i18n from 'i18next';
+import { reactI18nextModule } from 'react-i18next';
+import en from '../locales/en/translation.json';
+
+// Load translations for each language
+const resources = {
+  en,
+};
+
+i18n
+  .use(reactI18nextModule)
+  .init({
+    resources,
+    lng: 'en',
+    fallbackLng: 'en',
+
+    interpolation: {
+      escapeValue: false, // react is already safe from xss
+    },
+  });
+
+export default i18n;

src/lib/MiradorViewer.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
+import { I18nextProvider } from 'react-i18next';
 import deepmerge from 'deepmerge';
 import App from '../containers/App';
 import createRootReducer from '../state/reducers/index';
 import createStore from '../state/createStore';
 import * as actions from '../state/actions';
 import settings from '../config/settings';
+import i18n from '../i18n';
 
 const store = createStore();
 /**
@@ -26,7 +28,9 @@ class MiradorViewer {
 
     ReactDOM.render(
       <Provider store={store}>
+        <I18nextProvider i18n={i18n}>
           <App config={config} />
+        </I18nextProvider>
       </Provider>,
       document.getElementById(config.id),
     );