WIP 48 i18n support

.nvmrc

@@ -0,0 +1 @@
+10

package.json

@@ -17,6 +17,8 @@
   "dependencies": {
     "classnames": "^2.2.6",
     "firebase": "^5.5.6",
+    "i18next": "^12.0.0",
+    "i18next-browser-languagedetector": "^2.2.4",
     "lodash.samplesize": "^4.2.0",
     "node-sass": "^4.9.4",
     "prop-types": "^15.6.2",
@@ -26,6 +28,7 @@
     "react-ga": "^2.5.3",
     "react-google-button": "^0.5.3",
     "react-grid-system": "^4.3.1",
+    "react-i18next": "^8.3.8",
     "react-redux": "^5.1.0",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.0",

src/i18n.tsx

@@ -0,0 +1,39 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+i18n.use(LanguageDetector).init({
+  // we init with resources
+  resources: {
+    en: {
+      translations: {
+        LastScore: 'Last score',
+        SessionsCompleted: 'Sessions completed',
+      },
+    },
+    de: {
+      translations: {
+        LastScore: 'Letzter Punktestand',
+        SessionsCompleted: 'Sitzungen abgeschlossen',
+      },
+    },
+  },
+  fallbackLng: 'en',
+  debug: false,
+
+  // have a common namespace used around the full app
+  ns: ['translations'],
+  defaultNS: 'translations',
+
+  keySeparator: false, // we use content as keys
+
+  interpolation: {
+    escapeValue: false, // not needed for react!!
+    formatSeparator: ',',
+  },
+
+  react: {
+    wait: true,
+  },
+});
+
+export default i18n;

src/index.tsx

@@ -26,6 +26,9 @@ import firebaseCred from './firebase-cred.json';
 import ga from './ga-cred.json';
 import configureStore from './store/configureStore';
 
+import { I18nextProvider } from 'react-i18next';
+import i18n from './i18n';
+
 const config = firebaseCred;
 const store = configureStore();
 
@@ -35,24 +38,28 @@ firebase.initializeApp(config);
 firebase.auth().onAuthStateChanged(user => {
   user = user || ({} as User);
   store.dispatch(userPreferencesFetchRequestAction({ uid: user.uid }));
-  ReactDOM.render(
+
+  const App = () => (
     <BrowserRouter>
       <Provider store={store}>
-        <div>
-          <Header user={user} />
-          <Container className="main">
-            <Switch>
-              <Route exact={true} path="/" render={() => <TypingTest user={user} />} />
-              <Route exact={true} path="/about" component={About} />
-              <Route exact={true} path="/profile" render={() => <Profile user={user} />} />
-              <Route exact={true} path="/signin" component={Signin} />
-              <Route exact={true} path="/signup" component={Signup} />
-              <Route exact={true} path="/scoreboard" component={ScoreBoard} />
-            </Switch>
-          </Container>
-        </div>
+        <I18nextProvider i18n={i18n}>
+          <div>
+            <Header user={user} />
+            <Container className="main">
+              <Switch>
+                <Route exact={true} path="/" render={() => <TypingTest user={user} />} />
+                <Route exact={true} path="/about" component={About} />
+                <Route exact={true} path="/profile" render={() => <Profile user={user} />} />
+                <Route exact={true} path="/signin" component={Signin} />
+                <Route exact={true} path="/signup" component={Signup} />
+                <Route exact={true} path="/scoreboard" component={ScoreBoard} />
+              </Switch>
+            </Container>
+          </div>
+        </I18nextProvider>
       </Provider>
-    </BrowserRouter>,
-    document.getElementById('root')
+    </BrowserRouter>
   );
+
+  ReactDOM.render(<App />, document.getElementById('root'));
 });

src/pages/TypingTest/index.tsx

@@ -4,6 +4,7 @@ import ReactGA from 'react-ga';
 import { connect } from 'react-redux';
 import words from '../../data/words';
 import Text from './components/Text';
+import { translate, Trans } from 'react-i18next';
 
 import { User } from 'firebase';
 
@@ -12,6 +13,7 @@ import * as actionTypes from '../../actions/actionTypes';
 import './style.css';
 
 interface TypingTestProps {
+  t: (key: string) => string;
   user: User;
   updateScoreboard: (user: User, score: number) => any;
   saveScore: (userId: string, score: number) => any;
@@ -213,15 +215,19 @@ class TypingTest extends Component<TypingTestProps, TypingTestState> {
 
   render() {
     const { letters, index, score, error } = this.state;
-    const { user, sessionsCompleted } = this.props;
+    const { t, user, sessionsCompleted } = this.props;
     const loggedIn = user && user.uid;
 
     return (
       <div className="App">
         <Text letters={letters} index={index} />
 
-        <p>Last score: {score}</p>
-        <p>Sessions completed: {sessionsCompleted}</p>
+        <p>
+          {t('LastScore')}: {score}
+        </p>
+        <p>
+          {t('SessionsCompleted')}: {sessionsCompleted}
+        </p>
 
         {!loggedIn && <div className="error center">Please log in to save your score!</div>}
         {error && <div className="error center">{error}</div>}
@@ -251,4 +257,4 @@ export const Unwrapped = TypingTest;
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(TypingTest);
+)(translate('translations')(TypingTest));