i18n bootstrapped and applied for the root module

scm-ui/src/components/ErrorNotification.js

@@ -1,18 +1,20 @@
 //@flow
 import React from "react";
+import { translate } from "react-i18next";
 import Notification from "./Notification";
 
 type Props = {
+  t: string => string,
   error?: Error
 };
 
 class ErrorNotification extends React.Component<Props> {
   render() {
-    const { error } = this.props;
+    const { t, error } = this.props;
     if (error) {
       return (
         <Notification type="danger">
-          <strong>Error:</strong> {error.message}
+          <strong>{t("error-notification.prefix")}:</strong> {error.message}
         </Notification>
       );
     }
@@ -20,4 +22,4 @@ class ErrorNotification extends React.Component<Props> {
   }
 }
 
-export default ErrorNotification;
+export default translate("commons")(ErrorNotification);

scm-ui/src/components/Loading.js

@@ -1,5 +1,6 @@
 //@flow
 import React from "react";
+import { translate } from "react-i18next";
 import injectSheet from "react-jss";
 import Image from "../images/loading.svg";
 
@@ -24,20 +25,21 @@ const styles = {
 };
 
 type Props = {
+  t: string => string,
   classes: any
 };
 
 class Loading extends React.Component<Props> {
   render() {
-    const { classes } = this.props;
+    const { t, classes } = this.props;
     return (
       <div className={classes.wrapper}>
         <div className={classes.loading}>
-          <img className={classes.image} src={Image} alt="Loading ..." />
+          <img className={classes.image} src={Image} alt={t("loading.alt")} />
         </div>
       </div>
     );
   }
 }
 
-export default injectSheet(styles)(Loading);
+export default injectSheet(styles)(translate("commons")(Loading));

scm-ui/src/components/Logo.js

@@ -1,13 +1,17 @@
 //@flow
 import React from "react";
+import { translate } from "react-i18next";
 import Image from "../images/logo.png";
 
-type Props = {};
+type Props = {
+  t: string => string
+};
 
 class Logo extends React.Component<Props> {
   render() {
-    return <img src={Image} alt="SCM-Manager logo" />;
+    const { t } = this.props;
+    return <img src={Image} alt={t("logo.alt")} />;
   }
 }
 
-export default Logo;
+export default translate("commons")(Logo);

scm-ui/src/components/PrimaryNavigation.js

@@ -1,20 +1,30 @@
 //@flow
 import React from "react";
+import { translate } from "react-i18next";
 import PrimaryNavigationLink from "./PrimaryNavigationLink";
 
-type Props = {};
+type Props = {
+  t: string => string
+};
 
 class PrimaryNavigation extends React.Component<Props> {
   render() {
+    const { t } = this.props;
     return (
       <nav className="tabs is-boxed">
         <ul>
-          <PrimaryNavigationLink to="/users" label="Users" />
-          <PrimaryNavigationLink to="/logout" label="Logout" />
+          <PrimaryNavigationLink
+            to="/users"
+            label={t("primary-navigation.users")}
+          />
+          <PrimaryNavigationLink
+            to="/logout"
+            label={t("primary-navigation.logout")}
+          />
         </ul>
       </nav>
     );
   }
 }
 
-export default PrimaryNavigation;
+export default translate("commons")(PrimaryNavigation);

scm-ui/src/containers/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import Main from "./Main";
 import { connect } from "react-redux";
+import { translate } from "react-i18next";
 import { withRouter } from "react-router-dom";
 import { fetchMe } from "../modules/auth";
 
@@ -17,6 +18,7 @@ type Props = {
   error: Error,
   loading: boolean,
   authenticated?: boolean,
+  t: string => string,
   fetchMe: () => void
 };
 
@@ -26,7 +28,7 @@ class App extends Component<Props> {
   }
 
   render() {
-    const { entry, loading, error, authenticated } = this.props;
+    const { entry, loading, error, t, authenticated } = this.props;
 
     let content;
     const navigation = authenticated ? <PrimaryNavigation /> : "";
@@ -36,8 +38,8 @@ class App extends Component<Props> {
     } else if (error) {
       content = (
         <ErrorPage
-          title="Error"
-          subtitle="Unknown error occurred"
+          title={t("app.error.title")}
+          subtitle={t("app.error.subtitle")}
           error={error}
         />
       );
@@ -72,5 +74,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(App)
+  )(translate("commons")(App))
 );

scm-ui/src/containers/Login.js

@@ -2,6 +2,7 @@
 import React from "react";
 import { Redirect, withRouter } from "react-router-dom";
 import injectSheet from "react-jss";
+import { translate } from "react-i18next";
 import { login } from "../modules/auth";
 import { connect } from "react-redux";
 
@@ -35,6 +36,7 @@ type Props = {
   loading?: boolean,
   error?: Error,
 
+  t: string => string,
   classes: any,
 
   from: any,
@@ -83,7 +85,7 @@ class Login extends React.Component<Props, State> {
   };
 
   render() {
-    const { authenticated, loading, error, classes } = this.props;
+    const { authenticated, loading, error, t, classes } = this.props;
 
     if (authenticated) {
       return this.renderRedirect();
@@ -94,30 +96,30 @@ class Login extends React.Component<Props, State> {
         <div className="hero-body">
           <div className="container has-text-centered">
             <div className="column is-4 is-offset-4">
-              <h3 className="title">Login</h3>
-              <p className="subtitle">Please login to proceed.</p>
+              <h3 className="title">{t("login.title")}</h3>
+              <p className="subtitle">{t("login.subtitle")}</p>
               <div className={classNames("box", classes.avatarSpacing)}>
                 <figure className={classes.avatar}>
                   <img
                     className={classes.avatarImage}
                     src={Avatar}
-                    alt="SCM-Manager"
+                    alt={t("login.logo-alt")}
                   />
                 </figure>
                 <ErrorNotification error={error} />
                 <form onSubmit={this.handleSubmit}>
                   <InputField
-                    placeholder="Your Username"
+                    placeholder={t("login.username-placeholder")}
                     autofocus={true}
                     onChange={this.handleUsernameChange}
                   />
                   <InputField
-                    placeholder="Your Password"
+                    placeholder={t("login.password-placeholder")}
                     type="password"
                     onChange={this.handlePasswordChange}
                   />
                   <SubmitButton
-                    label="Login"
+                    label={t("login.submit")}
                     disabled={this.isInValid()}
                     fullWidth={true}
                     loading={loading}
@@ -147,6 +149,6 @@ const StyledLogin = injectSheet(styles)(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(Login)
+  )(translate("commons")(Login))
 );
 export default withRouter(StyledLogin);

scm-ui/src/containers/Logout.js

@@ -1,6 +1,7 @@
 //@flow
 import React from "react";
 import { connect } from "react-redux";
+import { translate } from "react-i18next";
 import { Redirect } from "react-router-dom";
 
 import { logout, isAuthenticated } from "../modules/auth";
@@ -8,6 +9,7 @@ import ErrorPage from "../components/ErrorPage";
 import Loading from "../components/Loading";
 
 type Props = {
+  t: string => string,
   loading: boolean,
   authenticated: boolean,
   error?: Error,
@@ -20,13 +22,13 @@ class Logout extends React.Component<Props> {
   }
 
   render() {
-    const { authenticated, loading, error } = this.props;
+    const { authenticated, loading, t, error } = this.props;
     // TODO logout is called twice
     if (error) {
       return (
         <ErrorPage
-          title="Logout failed"
-          subtitle="Something went wrong durring logout"
+          title={t("logout.error.title")}
+          subtitle={t("logout.error.subtitle")}
           error={error}
         />
       );
@@ -53,4 +55,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(Logout);
+)(translate("commons")(Logout));

scm-ui/src/i18n.js

@@ -0,0 +1,37 @@
+import i18n from "i18next";
+import Backend from "i18next-fetch-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { reactI18nextModule } from "react-i18next";
+
+const loadPath = process.env.PUBLIC_URL + "/locales/{{lng}}/{{ns}}.json";
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(reactI18nextModule)
+  .init({
+    fallbackLng: "en",
+
+    // have a common namespace used around the full app
+    ns: ["commons"],
+    defaultNS: "commons",
+
+    debug: true,
+
+    interpolation: {
+      escapeValue: false // not needed for react!!
+    },
+
+    react: {
+      wait: true
+    },
+
+    backend: {
+      loadPath: loadPath,
+      init: {
+        credentials: "same-origin"
+      }
+    }
+  });
+
+export default i18n;

scm-ui/src/index.js

@@ -4,6 +4,9 @@ import ReactDOM from "react-dom";
 import App from "./containers/App";
 import registerServiceWorker from "./registerServiceWorker";
 
+import { I18nextProvider } from "react-i18next";
+import i18n from "./i18n";
+
 import { Provider } from "react-redux";
 import createHistory from "history/createBrowserHistory";
 
@@ -30,10 +33,12 @@ if (!root) {
 
 ReactDOM.render(
   <Provider store={store}>
-    {/* ConnectedRouter will use the store from Provider automatically */}
-    <ConnectedRouter history={history}>
-      <App />
-    </ConnectedRouter>
+    <I18nextProvider i18n={i18n}>
+      {/* ConnectedRouter will use the store from Provider automatically */}
+      <ConnectedRouter history={history}>
+        <App />
+      </ConnectedRouter>
+    </I18nextProvider>
   </Provider>,
   root
 );