add i18n with react-intl

scoch5 · Jun 19, 2019 · ad734d6 · ad734d6
1 parent f85c04d
commit ad734d6
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "node-sass": "^4.12.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-intl": "^2.9.0",
     "react-redux": "^7.1.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",

diff --git a/src/Pages/CocktailPage/CocktailPage.js b/src/Pages/CocktailPage/CocktailPage.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { PropTypes } from 'prop-types';
 import { withRouter } from 'react-router';
+import { FormattedMessage } from 'react-intl';
 import {
 } from '../../components';
 import {
@@ -33,7 +34,9 @@ class CocktailPage extends Component {
 
     return (
       <ul className={style.ingredients}>
-        <h4 className={style.sectionTitle}>Ingredienti</h4>
+        <h4 className={style.sectionTitle}>
+          <FormattedMessage id="ingredients" />
+        </h4>
         { new Array(10).fill().map((e, index) => {
           const ingredient = cocktail[`strIngredient${index + 1}`]
           const measure = cocktail[`strMeasure${index + 1}`]
@@ -59,7 +62,7 @@ class CocktailPage extends Component {
     if (!cocktail) {
       return (
         <div className={style.wrapper}>
-          Loading
+          <FormattedMessage id="loading" />
         </div>
       )
     }
@@ -96,7 +99,9 @@ class CocktailPage extends Component {
         {
           strGlass &&
           <div className={style.glass}>
-            <h4 className={style.sectionTitle}>Tipologia di bicchiere</h4>
+            <h4 className={style.sectionTitle}>
+              <FormattedMessage id="glassType" />
+            </h4>
             {strGlass}
           </div>
         }

diff --git a/src/Pages/HomePage/HomePage.js b/src/Pages/HomePage/HomePage.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
 import cocktails from './cocktails.svg';
 import style from './HomePage.module.scss';
 
@@ -10,13 +11,13 @@ function HomePage() {
         <img src={cocktails} className={style.logo} alt="logo" />
         <h1>React Cocktail</h1>
         <p>
-          Find the cocktail you like and learn its recipe.
+          <FormattedMessage id="homeIntro" />
         </p>
         <Link
           className={style.link}
           to="/search"
         >
-          Search Cocktail
+          <FormattedMessage id="searchCocktail" />
         </Link>
       </header>
     </div>

diff --git a/src/bootstrap/App.js b/src/bootstrap/App.js
@@ -9,13 +9,20 @@ import {
   Route,
   NavLink
 } from 'react-router-dom';
+import { IntlProvider, addLocaleData, FormattedMessage } from 'react-intl';
 import {
   HomePage,
   SearchPage,
   CocktailPage,
 } from '../Pages';
 import reducer from '../data'
+import en from '../locale/en'
+import it from '../locale/it'
 import style from './App.module.scss'
+import itIntl from 'react-intl/locale-data/it'
+import enIntl from 'react-intl/locale-data/en'
+
+addLocaleData([...enIntl, ...itIntl ])
 
 const composeEnhancers = typeof window === 'object'
   && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
@@ -30,25 +37,34 @@ const store = createStore(reducer, enhancer)
 function App() {
   return (
     <Provider store={store}>
-      <Router>
-        <div className={style.wrapper}>
-          <nav className={style.menu}>
-            <ul className={style.menulist}>
-              <li className={style.menuitem}>
-                <NavLink exact className={style.link} activeClassName={style.linkActive} to="/">Home</NavLink>
-              </li>
-              <li className={style.menuitem}>
-                <NavLink className={style.link} activeClassName={style.linkActive} to="/search">Search</NavLink>
-              </li>
-            </ul>
-          </nav>
-          <Switch>
-            <Route path="/" exact component={HomePage} />
-            <Route path="/search" exact component={SearchPage} />
-            <Route path="/cocktails/:id" exact component={CocktailPage} />
-          </Switch>
-        </div>
-      </Router>
+      <IntlProvider
+        locale="it"
+        messages={it}
+      >
+        <Router>
+          <div className={style.wrapper}>
+            <nav className={style.menu}>
+              <ul className={style.menulist}>
+                <li className={style.menuitem}>
+                  <NavLink exact className={style.link} activeClassName={style.linkActive} to="/">
+                    <FormattedMessage id="home" />
+                  </NavLink>
+                </li>
+                <li className={style.menuitem}>
+                  <NavLink className={style.link} activeClassName={style.linkActive} to="/search">
+                    <FormattedMessage id="search" />
+                  </NavLink>
+                </li>
+              </ul>
+            </nav>
+            <Switch>
+              <Route path="/" exact component={HomePage} />
+              <Route path="/search" exact component={SearchPage} />
+              <Route path="/cocktails/:id" exact component={CocktailPage} />
+            </Switch>
+          </div>
+        </Router>
+      </IntlProvider>
     </Provider>
   );
 }

diff --git a/src/components/SearchCocktailsForm/SearchCocktailsForm.js b/src/components/SearchCocktailsForm/SearchCocktailsForm.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { PropTypes } from 'prop-types';
+import { injectIntl } from 'react-intl';
 import debounce from 'lodash.debounce';
 import style from './SearchCocktailsForm.module.scss';
 
@@ -34,10 +35,16 @@ class SearchCocktailsForm extends Component {
   }
 
   render() {
+    const { intl } = this.props
     return (
       <div>
         <form className={style.searchform} onSubmit={() => this.handleSubmitForm}>
-          <input placeholder="Type to search cocktails" type="search" className={style.input} onChange={this.handleInputChange} />
+          <input
+            placeholder={intl.formatMessage({ id: 'searchInputPlaceholder' })}
+            type="search"
+            className={style.input}
+            onChange={this.handleInputChange}
+          />
         </form>
       </div>
     );
@@ -46,9 +53,10 @@ class SearchCocktailsForm extends Component {
 
 SearchCocktailsForm.propTypes = {
   onSearch: PropTypes.func.isRequired,
+  intl: PropTypes.shape({}),
 }
 
 SearchCocktailsForm.defaultProps = {
 }
 
-export default SearchCocktailsForm;
+export default injectIntl(SearchCocktailsForm);
diff --git a/src/locale/en.js b/src/locale/en.js
@@ -0,0 +1,12 @@
+const en = {
+  home: 'Home',
+  search: 'Search',
+  searchCocktail: 'Search Cocktail',
+  homeIntro: 'Find the cocktail you like and learn its recipe.',
+  searchInputPlaceholder: 'Type to search cocktails',
+  ingredients: 'Ingredients',
+  loading: 'Loading...',
+  glassType: 'Glass Type',
+}
+
+export default en;
diff --git a/src/locale/it.js b/src/locale/it.js
@@ -0,0 +1,12 @@
+const it = {
+  home: 'Home',
+  search: 'Cerca',
+  searchCocktail: 'Cerca Cocktail',
+  homeIntro: 'Trova il cocktail che preferisci e scoprine la ricetta.',
+  searchInputPlaceholder: 'Scrivi per cercare i cocktails',
+  ingredients: 'Ingredienti',
+  loading: 'Caricamento...',
+  glassType: 'Tipologia di bicchiere',
+}
+
+export default it;
diff --git a/yarn.lock b/yarn.lock
@@ -4882,7 +4882,31 @@ internal-ip@^4.2.0:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
-invariant@^2.2.2, invariant@^2.2.4:
+intl-format-cache@^2.0.5:
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-2.2.9.tgz#fb560de20c549cda20b569cf1ffb6dc62b5b93b4"
+  integrity sha512-Zv/u8wRpekckv0cLkwpVdABYST4hZNTDaX7reFetrYTJwxExR2VyTqQm+l0WmL0Qo8Mjb9Tf33qnfj0T7pjxdQ==
+
+[email protected]:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz#b43d45a97468cadbe44331d74bb1e8dea44fc075"
+  integrity sha1-tD1FqXRoytvkQzHXS7Ho3qRPwHU=
+
+intl-messageformat@^2.0.0, intl-messageformat@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-2.2.0.tgz#345bcd46de630b7683330c2e52177ff5eab484fc"
+  integrity sha1-NFvNRt5jC3aDMwwuUhd/9eq0hPw=
+  dependencies:
+    intl-messageformat-parser "1.4.0"
+
+intl-relativeformat@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/intl-relativeformat/-/intl-relativeformat-2.2.0.tgz#6aca95d019ec8d30b6c5653b6629f9983ea5b6c5"
+  integrity sha512-4bV/7kSKaPEmu6ArxXf9xjv1ny74Zkwuey8Pm01NH4zggPP7JHwg2STk8Y3JdspCKRDriwIyLRfEXnj2ZLr4Bw==
+  dependencies:
+    intl-messageformat "^2.0.0"
+
+invariant@^2.1.1, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -8175,6 +8199,17 @@ react-error-overlay@^5.1.6:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d"
   integrity sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q==
 
+react-intl@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.9.0.tgz#c97c5d17d4718f1575fdbd5a769f96018a3b1843"
+  integrity sha512-27jnDlb/d2A7mSJwrbOBnUgD+rPep+abmoJE511Tf8BnoONIAUehy/U1zZCHGO17mnOwMWxqN4qC0nW11cD6rA==
+  dependencies:
+    hoist-non-react-statics "^3.3.0"
+    intl-format-cache "^2.0.5"
+    intl-messageformat "^2.1.0"
+    intl-relativeformat "^2.1.0"
+    invariant "^2.1.1"
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"