Merge pull request #72 from iroy2000/adding-translation-example

Adding translation example and adding prettier

.eslintignore

@@ -16,3 +16,4 @@ webpack.config.prod.js
 /dist
 /dist-server
 /config/webpack/dist
+*.md

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "es5",
+  "semi": false
+}

__fixtures__/store.js

@@ -1,3 +1,3 @@
-import { createStore } from 'redux';
+import { createStore } from 'redux'
 
 export const getStore = (obj = {}) => createStore((state) => state, obj)

package.json

@@ -57,10 +57,12 @@
     "enzyme-adapter-react-16": "^1.9.1",
     "eslint": "^5.12.0",
     "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^4.2.0",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-plugin-flowtype": "^3.4.2",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
@@ -72,6 +74,8 @@
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.5.0",
     "precss": "^4.0.0",
+    "prettier": "^1.17.0",
+    "pretty-quick": "^1.10.0",
     "raf": "^3.4.1",
     "react-hot-loader": "^4.7.1",
     "react-test-renderer": "^16.2.0",

src/js/README.md

@@ -12,4 +12,5 @@ __BUT__ before you start developing a real large scale project, please do ask yo
 If you read to this point, I assumed you are a very serious developer, please help me to read the following links if you haven't!
 
 [SOLID JavaScript](http://aspiringcraftsman.com/2011/12/08/solid-javascript-single-responsibility-principle/)
+
 [Twelve Factor App](https://12factor.net/)

src/js/Root.jsx

@@ -1,32 +1,27 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Provider } from 'react-redux'
 // You could use BrowserRoute or HashRoute
 // But passing in history directly to Route will
 // give your app more flexibility on deeper integration of `history`
 import { Router } from 'react-router-dom'
-import { IntlProvider } from 'react-intl'
 
-export default class Root extends Component {
+import I18NProvider from 'common/components/Utilities/I18NProvider'
+
+export default class Root extends React.PureComponent {
   get content() {
     const { routes, history } = this.props
 
-    return (
-      <Router history={history}>
-        {routes}
-      </Router>
-    )
+    return <Router history={history}>{routes}</Router>
   }
 
   render() {
     const { store } = this.props
 
     return (
-      <IntlProvider locale="en">
-        <Provider store={store}>
-          {this.content}
-        </Provider>
-      </IntlProvider>
+      <I18NProvider>
+        <Provider store={store}>{this.content}</Provider>
+      </I18NProvider>
     )
   }
 }

src/js/app-history.js

@@ -10,10 +10,10 @@
 // don't make changes in here.
 // import createHistory from 'history/createBrowserHistory'
 
-import { createHashHistory } from 'history'
+import { createHashHistory } from 'history';
 
-const history = createHashHistory()
+const history = createHashHistory();
 
 // Exposing history for deep integration needs
 // For example, saga and utilities
-export { history }
+export { history };

src/js/common/components/Example/Example.jsx

@@ -51,10 +51,11 @@ class Example extends PureComponent {
             <span className={styles.emphasize}>Started</span>
           </h1>
           <p>If you see this screen, it means you are all setup \o/</p>
-          <p>The following JSON are showing contents coming from Redux, Saga and Config.</p>
-          <pre>
-            {JSON.stringify(result, undefined, 2)}
-          </pre>
+          <p>
+            The following JSON are showing contents coming from Redux, Saga and
+            Config.
+          </p>
+          <pre>{JSON.stringify(result, undefined, 2)}</pre>
         </div>
       );
     }

src/js/common/components/Header/Header.jsx

@@ -15,17 +15,14 @@ class Header extends PureComponent {
       <header className={styles.globalHeader}>
         <ul>
           <li className={!isHome ? styles.active : ''}>
-            {
-              isHome
-                ? 'Home' : <Link to="/">Home</Link>
-
-            }
+            {isHome ? 'Home' : <Link to="/">Home</Link>}
           </li>
           <li className={!isJustAnotherPage ? styles.active : ''}>
-            {
-              isJustAnotherPage
-                ? 'Just Another Page' : <Link to="/page">Just Another Page</Link>
-            }
+            {isJustAnotherPage ? (
+              'Just Another Page'
+            ) : (
+              <Link to="/page">Just Another Page</Link>
+            )}
           </li>
         </ul>
       </header>

src/js/common/components/LazyLoading/Loading.jsx

@@ -1,34 +1,33 @@
 import React, { PureComponent } from 'react';
 
-import styles from './Loading.css'
+import styles from './Loading.css';
 
 class Loading extends PureComponent {
   getMessage() {
     const {
-      isLoading,
-      timedOut,
-      pastDelay,
-      error,
+      isLoading, timedOut, pastDelay, error,
     } = this.props;
 
-    const errorMessage = 'We can't pull up information at this point, please try again.'
+    const errorMessage = 'We can't pull up information at this point, please try again.';
 
     if (isLoading) {
       if (timedOut) {
         return <div>{errorMessage}</div>;
-      } if (pastDelay) {
+      }
+      if (pastDelay) {
         return <div className={styles.loader}>Loading...</div>;
       }
       return null;
-    } if (error) {
+    }
+    if (error) {
       return <div>{errorMessage}</div>;
     }
 
     return null;
   }
 
   render() {
-    return this.getMessage()
+    return this.getMessage();
   }
 }
 

src/js/common/components/LazyLoading/index.js

@@ -2,11 +2,9 @@ import Loadable from 'react-loadable'
 
 import Loading from './Loading'
 
-export const create = (loader) => (
-  Loadable({
-    loader,
-    loading: Loading,
-  })
-)
+export const create = (loader) => Loadable({
+  loader,
+  loading: Loading,
+})
 
 export default create

src/js/common/components/Utilities/ErrorBoundary.jsx

@@ -15,15 +15,15 @@ class ErrorBoundary extends PureComponent {
     super(props)
     this.state = {
       hasError: false,
-    };
+    }
   }
 
   componentDidCatch(error, info) {
     // you probably want to log it somewhere
     console.log(error, info)
     this.setState({
       hasError: true,
-    });
+    })
   }
 
   render() {
@@ -33,9 +33,10 @@ class ErrorBoundary extends PureComponent {
     if (hasError) {
       return (
         <div style={style}>
-          Something is going wrong!! This error is caught by ErrorBoundary feature in React 16 \o/
+          Something is going wrong!! This error is caught by ErrorBoundary
+          feature in React 16 \o/
         </div>
-      );
+      )
     }
 
     return children

src/js/common/components/Utilities/I18NProvider.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { IntlProvider, addLocaleData } from 'react-intl'
+
+// This is react-intl locale data
+import en from 'react-intl/locale-data/en'
+
+// This is your translation files
+// In case you are curious about locale - https://gist.github.com/jacobbubu/1836273
+import enUS from 'common/translations/en-US.json'
+
+// We are adding english here
+addLocaleData([...en]);
+
+// Creating a map of supported messages
+// It will be used in IntlProvider below
+const messages = {
+  'en-US': enUS,
+}
+
+export default class I18NProvider extends React.PureComponent {
+  static propTypes = {
+    children: PropTypes.element.isRequired,
+  }
+
+  render() {
+    // query the browser for language / locale
+    // feel free to modify this logic to fit your need
+    const language = navigator.language.split(/[-_]/)[0];
+    const locale = navigator.language;
+
+    const { children } = this.props
+
+    return (
+      <IntlProvider locale={language} messages={messages[locale]}>
+        { children }
+      </IntlProvider>
+    )
+  }
+}

src/js/common/translations/en-US.json

@@ -0,0 +1,3 @@
+{
+  "greetings.hello": "Hello, {name}, this is a message from translations!"
+}

src/js/common/types/example.js

@@ -1,5 +1,5 @@
 export type exampleType = {
   title: string,
   description: string,
-  source: string,
-}
+  source: string
+};

src/js/main.jsx

@@ -15,16 +15,13 @@ if (window.__INITIAL_STATE__) {
 
   // Transform into Immutable.js collections,
   // but leave top level keys untouched for Redux
-  Object
-    .keys(initialState)
-    .forEach((key) => {
-      initialState[key] = fromJS(initialState[key])
-    })
+  Object.keys(initialState).forEach((key) => {
+    initialState[key] = fromJS(initialState[key])
+  })
 }
 
 const store = configureStore(initialState, history)
 
-
 // Render the React application to the DOM
 // Root component is to bootstrap Provider, Router and DevTools
 ReactDOM.render(

src/js/redux/configureStore.js

@@ -1,35 +1,37 @@
-import createSagaMiddleware from 'redux-saga';
-import {
-  applyMiddleware,
-  compose,
-  createStore,
-} from 'redux';
+import createSagaMiddleware from 'redux-saga'
+import { applyMiddleware, compose, createStore } from 'redux'
 
-import sagas from './sagas';
-import rootReducer from './rootReducers';
+import sagas from './sagas'
+import rootReducer from './rootReducers'
 
 // Redux DevTools Extension for Chrome and Firefox
 const reduxDevTool = () => {
   return typeof window === 'object'
-  && typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined' ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f) => f;
-};
+    && typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined'
+    ? window.__REDUX_DEVTOOLS_EXTENSION__()
+    : (f) => f
+}
 
-export default function configureStore(initialState, history) {
-  const sagaMiddleware = createSagaMiddleware();
+// history is passed here, for this example, we don't use history
+export default function configureStore(initialState, history) { // eslint-disable-line no-unused-vars, max-len
+  const sagaMiddleware = createSagaMiddleware()
 
-  const middleware = applyMiddleware(sagaMiddleware);
+  const middleware = applyMiddleware(sagaMiddleware)
 
-  const composedStoreEnhancer = compose(middleware, reduxDevTool());
+  const composedStoreEnhancer = compose(
+    middleware,
+    reduxDevTool()
+  )
 
-  const store = composedStoreEnhancer(createStore)(rootReducer, initialState);
+  const store = composedStoreEnhancer(createStore)(rootReducer, initialState)
 
-  sagaMiddleware.run(sagas);
+  sagaMiddleware.run(sagas)
 
   if (module.hot) {
     module.hot.accept('./rootReducers', () => {
-      store.replaceReducer(require('./rootReducers'));
-    });
+      store.replaceReducer(require('./rootReducers'))
+    })
   }
 
-  return store;
+  return store
 }