feat: display translations from store

Author: paibamboo

src/app/components/Header.tsx

@@ -1,5 +1,11 @@
 import * as React from "react";
+import {connect} from "react-redux";
+import {createSelector} from "reselect";
 import {style} from "typestyle";
+import {Translator} from "../models/Translator";
+import {ITranslator} from "../models/TranslatorInterfaces";
+import {IStore} from "../redux/IStore";
+import {translationsSelector} from "../selectors/translationsSelector";
 import {Link} from "./Link";
 
 const classNames = {
@@ -19,13 +25,49 @@ const classNames = {
   })
 };
 
-export const Header = () => (
-  <nav className={classNames.nav}>
-    <ul>
-      <li><Link name="home">Home</Link></li>
-      <li><Link name="about">About Us</Link></li>
-      <li><Link name="counter">Counter</Link></li>
-      <li><Link name="stars">Stars</Link></li>
-    </ul>
-  </nav>
+interface IStateToProps {
+  translations: {
+    aboutUs: string;
+    counter: string;
+    home: string;
+    stars: string;
+  };
+}
+
+class Header extends React.Component<IStateToProps> {
+  public render(): JSX.Element {
+    const {translations} = this.props;
+    return (
+      <nav className={classNames.nav}>
+        <ul>
+          <li><Link name="home">{translations.home}</Link></li>
+          <li><Link name="about">{translations.aboutUs}</Link></li>
+          <li><Link name="counter">{translations.counter}</Link></li>
+          <li><Link name="stars">{translations.stars}</Link></li>
+        </ul>
+      </nav>
+    );
+  }
+}
+
+const componentTranslationsSelector = createSelector(
+  translationsSelector,
+  (translations) => {
+    const translator: ITranslator = new Translator(translations);
+    return {
+      aboutUs: translator.translate("About us"),
+      counter: translator.translate("Counter"),
+      home: translator.translate("Home"),
+      stars: translator.translate("Stars")
+    };
+  }
 );
+
+function mapStateToProps(state: Pick<IStore, "settings">): IStateToProps {
+  return {
+    translations: componentTranslationsSelector(state)
+  };
+}
+
+const connected = connect(mapStateToProps)(Header);
+export {connected as Header, Header as UnconnectedHeader};

src/app/containers/AboutPage.tsx

@@ -27,26 +27,26 @@ interface IProps extends IStateToProps, IDispatchToProps {}
 class AboutPage extends React.Component<IProps> {
   constructor(props: IStateToProps & IDispatchToProps) {
     super(props);
-    this.switchLanguage = this.switchLanguage.bind(this);
-  }
-
-  public switchLanguage(): void {
-    const language = this.props.language === "en" ? "de" : "en";
-    this.props.setLanguage(language);
+    this.handleLanguageChange = this.handleLanguageChange.bind(this);
   }
 
   public render(): JSX.Element {
-    const {language, translations: {aboutUs, change, currentLanguage}} = this.props;
+    const {language, translations} = this.props;
     return (
       <div>
-        <h3>{aboutUs}: {language}</h3>
-        <button onClick={this.switchLanguage}>
-          {change}
+        <h3>{translations.aboutUs}: {language}</h3>
+        <button onClick={this.handleLanguageChange}>
+          {translations.change}
         </button>
-        <h4>{currentLanguage}</h4>
+        <h4>{translations.currentLanguage}</h4>
       </div>
     );
   }
+
+  private handleLanguageChange(): void {
+    const language = this.props.language === "en" ? "de" : "en";
+    this.props.setLanguage(language);
+  }
 }
 
 const componentTranslationsSelector = createSelector(

src/app/containers/CounterPage.tsx

@@ -1,14 +1,23 @@
 import * as React from "react";
 import {connect} from "react-redux";
 import {Dispatch} from "redux";
+import {createSelector} from "reselect";
+import {Translator} from "../models/Translator";
+import {ITranslator} from "../models/TranslatorInterfaces";
 import {IStore} from "../redux/IStore";
 import {
   decrement as decrementActionCreator,
   increment as incrementActionCreator
 } from "../redux/modules/counterActionCreators";
+import {translationsSelector} from "../selectors/translationsSelector";
 
 interface IStateToProps {
   count: number;
+  translations: {
+    counter: string;
+    decrement: string;
+    increment: string;
+  };
 }
 
 interface IDispatchToProps {
@@ -20,25 +29,38 @@ export interface IProps extends IStateToProps, IDispatchToProps {}
 
 class CounterPage extends React.Component<IProps> {
   public render(): JSX.Element {
-    const {count, decrement, increment} = this.props;
+    const {count, decrement, increment, translations} = this.props;
     return (
       <div>
-        <h4>Counter</h4>
+        <h4>{translations.counter}</h4>
         <button name="incBtn" onClick={increment}>
-          Increment
+          {translations.increment}
         </button>
         <button name="decBtn" onClick={decrement} disabled={count <= 0}>
-          Decrement
+          {translations.increment}
         </button>
         <p>{count}</p>
       </div>
     );
   }
 }
 
-function mapStateToProps(state: Pick<IStore, "counter">): IStateToProps {
+const componentTranslationsSelector = createSelector(
+  translationsSelector,
+  (translations) => {
+    const translator: ITranslator = new Translator(translations);
+    return {
+      counter: translator.translate("Counter"),
+      decrement: translator.translate("Decrement"),
+      increment: translator.translate("Increment")
+    };
+  }
+);
+
+function mapStateToProps(state: Pick<IStore, "counter" | "settings">): IStateToProps {
   return {
-    count: state.counter.count
+    count: state.counter.count,
+    translations: componentTranslationsSelector(state)
   };
 }
 

src/app/containers/HomePage.tsx

@@ -1,6 +1,12 @@
 import {color} from "csx";
 import * as React from "react";
+import {connect} from "react-redux";
+import {createSelector} from "reselect";
 import {stylesheet} from "typestyle";
+import {Translator} from "../models/Translator";
+import {ITranslator} from "../models/TranslatorInterfaces";
+import {IStore} from "../redux/IStore";
+import {translationsSelector} from "../selectors/translationsSelector";
 
 const classNames = stylesheet({
   container: {
@@ -9,13 +15,39 @@ const classNames = stylesheet({
   }
 });
 
-export class HomePage extends React.Component {
+interface IStateToProps {
+  translations: {
+    hello: string;
+  };
+}
+
+class HomePage extends React.Component<IStateToProps> {
   public render(): JSX.Element {
+    const {translations} = this.props;
     return (
       <div className={classNames.container}>
         <img alt={"barbar"} src={require("../images/barbar.png")}/>
-        <p>Hello</p>
+        <p>{translations.hello}</p>
       </div>
     );
   }
 }
+
+const componentTranslationsSelector = createSelector(
+  translationsSelector,
+  (translations) => {
+    const translator: ITranslator = new Translator(translations);
+    return {
+      hello: translator.translate("Hello")
+    };
+  }
+);
+
+function mapStateToProps(state: Pick<IStore, "settings">): IStateToProps {
+  return {
+    translations: componentTranslationsSelector(state)
+  };
+}
+
+const connected = connect(mapStateToProps)(HomePage);
+export {connected as HomePage, HomePage as UnconnectedHomePage};

src/app/containers/StarsPage.tsx

@@ -1,14 +1,21 @@
 import * as React from "react";
 import {connect} from "react-redux";
 import {Dispatch} from "redux";
+import {createSelector} from "reselect";
+import {Translator} from "../models/Translator";
+import {ITranslator} from "../models/TranslatorInterfaces";
 import {IStore} from "../redux/IStore";
 import {loadStarsCount as loadStarsActionCreator} from "../redux/modules/starsActionCreators";
+import {translationsSelector} from "../selectors/translationsSelector";
 
 interface IStateToProps {
   count: number;
   error: string;
   loaded: boolean;
   pending: boolean;
+  translations: {
+    fetchingStars: string;
+  };
 }
 
 interface IDispatchToProps {
@@ -26,21 +33,32 @@ class StarsPage extends React.Component<IProps> {
   }
 
   public render(): JSX.Element {
-    const {count, error, pending} = this.props;
+    const {count, error, pending, translations} = this.props;
     if (pending) {
-      return <div>Fetching stars...</div>;
+      return <div>{translations.fetchingStars}</div>;
     } else {
       return error ? <div>{error}</div> : <div>{count}</div>;
     }
   }
 }
 
-function mapStateToProps(state: Pick<IStore, "stars">): IStateToProps {
+const componentTranslationsSelector = createSelector(
+  translationsSelector,
+  (translations) => {
+    const translator: ITranslator = new Translator(translations);
+    return {
+      fetchingStars: translator.translate("Fetching stars...")
+    };
+  }
+);
+
+function mapStateToProps(state: Pick<IStore, "settings" | "stars">): IStateToProps {
   return {
     count: state.stars.count,
     error: state.stars.error,
     loaded: state.stars.loaded,
-    pending: state.stars.pending
+    pending: state.stars.pending,
+    translations: componentTranslationsSelector(state)
   };
 }