TRACKING: master → feature/react-intl

.eslintrc.js

@@ -46,6 +46,15 @@ module.exports = {
       },
     ],
 
+    // Allow only special identifiers
+    // https://eslint.org/docs/rules/no-underscore-dangle
+    'no-underscore-dangle': [
+      'error',
+      {
+        allow: ['__typename'],
+      },
+    ],
+
     // Prefer destructuring from arrays and objects
     // http://eslint.org/docs/rules/prefer-destructuring
     'prefer-destructuring': [

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.formatOnPaste": true,
+  "editor.minimap.enabled": true,
+  "editor.snippetSuggestions": "top"
+}

jest.config.js

@@ -91,6 +91,7 @@ module.exports = {
 
   transform: {
     '\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
+    '\\.(gql|graphql)$': '<rootDir>/node_modules/jest-transform-graphql',
     '^(?!.*\\.(js|jsx|json|css|less|styl|scss|sass|sss)$)':
       '<rootDir>/tools/lib/fileTransformer.js',
   },

package.json

@@ -9,6 +9,13 @@
   "browserslist": [">1%", "last 4 versions", "Firefox ESR", "not ie < 9"],
   "dependencies": {
     "@babel/polyfill": "^7.0.0-beta.42",
+    "apollo-cache-inmemory": "^1.1.4",
+    "apollo-client": "^2.0.4",
+    "apollo-link": "^1.0.7",
+    "apollo-link-error": "^1.0.3",
+    "apollo-link-http": "^1.3.2",
+    "apollo-link-logger": "^1.1.0",
+    "apollo-link-schema": "^1.0.1",
     "bluebird": "^3.5.1",
     "body-parser": "^1.18.2",
     "classnames": "^2.2.5",
@@ -17,10 +24,16 @@
     "express": "^4.16.3",
     "express-graphql": "^0.6.12",
     "express-jwt": "^5.3.1",
+    "express-request-language": "^1.1.12",
     "graphql": "^0.13.2",
+    "graphql-tag": "^2.6.1",
+    "graphql-tools": "^2.16.0",
     "history": "^4.7.2",
+    "intl": "^1.2.5",
+    "intl-locales-supported": "^1.0.0",
     "isomorphic-style-loader": "^4.0.0",
     "jsonwebtoken": "^8.2.0",
+    "lodash": "^4.17.5",
     "node-fetch": "^2.1.1",
     "normalize.css": "^8.0.0",
     "passport": "^0.4.0",
@@ -29,7 +42,14 @@
     "prop-types": "^15.6.1",
     "query-string": "^6.0.0",
     "react": "^16.2.0",
+    "react-apollo": "^2.0.4",
     "react-dom": "^16.2.0",
+    "react-intl": "^2.4.0",
+    "react-redux": "^5.0.6",
+    "redux": "^3.7.2",
+    "redux-devtools-extension": "^2.13.2",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.2.0",
     "sequelize": "^4.37.3",
     "serialize-javascript": "^1.4.0",
     "source-map-support": "^0.5.4",
@@ -51,6 +71,7 @@
     "babel-eslint": "^8.2.2",
     "babel-jest": "^22.4.3",
     "babel-loader": "^8.0.0-beta.2",
+    "babel-plugin-react-intl": "^2.3.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
     "browser-sync": "^2.23.6",
     "chokidar": "^2.0.2",
@@ -74,6 +95,9 @@
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^22.4.3",
+    "jest-codemods": "^0.13.9",
+    "jest-transform-graphql": "^2.1.0",
+    "jscodeshift": "^0.5.0",
     "lint-staged": "^7.0.0",
     "markdown-it": "^8.4.1",
     "mkdirp": "^0.5.1",
@@ -102,6 +126,7 @@
     "react-dev-utils": "^5.0.0",
     "react-error-overlay": "^4.0.0",
     "react-test-renderer": "^16.2.0",
+    "redux-mock-store": "^1.4.0",
     "rimraf": "^2.6.2",
     "stylelint": "^9.1.3",
     "stylelint-config-standard": "^18.2.0",
@@ -117,7 +142,7 @@
   },
   "lint-staged": {
     "*.{js,jsx}": ["eslint --no-ignore --fix", "git add --force"],
-    "*.{json,md,graphql}": ["prettier --write", "git add --force"],
+    "*.{md,graphql}": ["prettier --write", "git add --force"],
     "*.{css,less,styl,scss,sass,sss}": ["stylelint --fix", "git add --force"]
   },
   "scripts": {
@@ -136,6 +161,7 @@
     "coverage": "yarn run test-cover && opn coverage/lcov-report/index.html",
     "clean": "babel-node tools/run clean",
     "copy": "babel-node tools/run copy",
+    "messages": "babel-node tools/run messages",
     "bundle": "babel-node tools/run bundle",
     "build": "babel-node tools/run build",
     "build-stats": "yarn run build --release --analyse",

src/actions/README.md

@@ -0,0 +1,67 @@
+# Redux Actions and Action Creators
+
+### Action Types
+
+Should go to `src/constants/…`
+
+```js
+export const ADD_TODO = 'ADD_TODO';
+```
+
+### Action Creators
+
+Should go to `src/actions/…`
+
+```js
+export function addTodo({ text }) {
+  return {
+    type: ADD_TODO,
+    payload: {
+      text,
+      // ...
+    },
+  };
+}
+```
+
+## Flux Standard Action
+
+An action _MUST_
+
+* be a plain JavaScript object.
+* have a `type` property. (_string_)
+
+An action _MAY_
+
+* have an `error` property. (`true` → `payload` _should be instance of `Error`_)
+  If `error` has any other value besides `true`, the action _MUST NOT_ be interpreted as an error.
+* have a `payload` property. (_any, object is reccomended_)
+* have a `meta` property. (_any_)
+  It is intended for any extra information that is not part of the payload
+
+An action _MUST NOT_ include properties other than `type`, `payload`, `error`, and `meta`.
+
+[**Read more about FSA**](https://github.com/redux-utilities/flux-standard-action#flux-standard-action)
+
+### Examples
+
+```js
+// Action example:
+{
+  type: ADD_TODO,
+  payload: {
+    text: 'Contribute to React Starter Kit.',
+  },
+}
+// Error action example:
+{
+  type: 'ADD_TODO',
+  error: true,
+  payload: new Error('Database Error'),
+}
+```
+
+# Other Resources
+
+* [Actions on redux.js.org](https://redux.js.org/basics/actions)
+* [Flux Standard Action](https://github.com/redux-utilities/flux-standard-action#flux-standard-action)

src/actions/intl.graphql

@@ -0,0 +1,6 @@
+query intl ($locale:String!) {
+  intl (locale:$locale) {
+    id
+    message
+  }
+}

src/actions/intl.js

@@ -0,0 +1,79 @@
+/* eslint-disable import/prefer-default-export */
+
+import { IntlProvider } from 'react-intl';
+
+import {
+  SET_LOCALE_START,
+  SET_LOCALE_SUCCESS,
+  SET_LOCALE_ERROR,
+} from '../constants';
+
+import queryIntl from './intl.graphql';
+
+function getIntlFromState(state) {
+  const intl = (state && state.intl) || {};
+  const { initialNow, locale, messages } = intl;
+  const localeMessages = (messages && messages[locale]) || {};
+  const provider = new IntlProvider({
+    initialNow,
+    locale,
+    messages: localeMessages,
+    defaultLocale: 'en-US',
+  });
+  return provider.getChildContext().intl;
+}
+
+export function getIntl() {
+  return (dispatch, getState) => getIntlFromState(getState());
+}
+
+export function setLocale({ locale }) {
+  return async (dispatch, getState, { client, history }) => {
+    dispatch({
+      type: SET_LOCALE_START,
+      payload: {
+        locale,
+      },
+    });
+
+    try {
+      // WARNING !!
+      // do not use client.networkInterface except you want skip Apollo store
+      // use client.query if you want benefit from Apollo caching mechanisms
+      const { data } = await client.query({
+        query: queryIntl,
+        variables: { locale },
+      });
+      const messages = data.intl.reduce((msgs, msg) => {
+        msgs[msg.id] = msg.message; // eslint-disable-line no-param-reassign
+        return msgs;
+      }, {});
+      dispatch({
+        type: SET_LOCALE_SUCCESS,
+        payload: {
+          locale,
+          messages,
+        },
+      });
+
+      // remember locale for every new request
+      if (process.env.BROWSER) {
+        const maxAge = 3650 * 24 * 3600; // 10 years in seconds
+        document.cookie = `lang=${locale};path=/;max-age=${maxAge}`;
+        history.push(`?lang=${locale}`);
+      }
+
+      // return bound intl instance at the end
+      return getIntlFromState(getState());
+    } catch (error) {
+      dispatch({
+        type: SET_LOCALE_ERROR,
+        payload: {
+          locale,
+          error,
+        },
+      });
+      return null;
+    }
+  };
+}

src/actions/runtime.js

@@ -0,0 +1,13 @@
+/* eslint-disable import/prefer-default-export */
+
+import { SET_RUNTIME_VARIABLE } from '../constants';
+
+export function setRuntimeVariable({ name, value }) {
+  return {
+    type: SET_RUNTIME_VARIABLE,
+    payload: {
+      name,
+      value,
+    },
+  };
+}

src/client.js

@@ -13,11 +13,40 @@ import ReactDOM from 'react-dom';
 import deepForceUpdate from 'react-deep-force-update';
 import queryString from 'query-string';
 import { createPath } from 'history/PathUtils';
+import { addLocaleData } from 'react-intl';
+// This is so bad: requiring all locale if they are not needed?
+/* @intl-code-template import ${lang} from 'react-intl/locale-data/${lang}'; */
+import en from 'react-intl/locale-data/en';
+import cs from 'react-intl/locale-data/cs';
+/* @intl-code-template-end */
 import App from './components/App';
 import createFetch from './createFetch';
-import history from './history';
+import configureStore from './store/configureStore';
 import { updateMeta } from './DOMUtils';
+import history from './history';
+import createApolloClient from './core/createApolloClient';
 import router from './router';
+import { getIntl } from './actions/intl';
+
+/* @intl-code-template addLocaleData(${lang}); */
+addLocaleData(en);
+addLocaleData(cs);
+/* @intl-code-template-end */
+
+// Universal HTTP client
+const fetch = createFetch(window.fetch, {
+  baseUrl: window.App.apiUrl,
+});
+
+const apolloClient = createApolloClient();
+
+// Initialize a new Redux store
+// http://redux.js.org/docs/basics/UsageWithReact.html
+const store = configureStore(window.App.state, {
+  apolloClient,
+  fetch,
+  history,
+});
 
 // Global (context) variables that can be easily accessed from any React component
 // https://facebook.github.io/react/docs/context.html
@@ -31,10 +60,14 @@ const context = {
       removeCss.forEach(f => f());
     };
   },
+  // For react-apollo
+  client: apolloClient,
+  store,
+  storeSubscription: null,
   // Universal HTTP client
-  fetch: createFetch(fetch, {
-    baseUrl: window.App.apiUrl,
-  }),
+  fetch,
+  // intl instance as it can be get with injectIntl
+  intl: store.dispatch(getIntl()),
 };
 
 const container = document.getElementById('app');
@@ -56,10 +89,13 @@ async function onLocationChange(location, action) {
   }
   currentLocation = location;
 
+  context.intl = store.dispatch(getIntl());
+
   const isInitialRender = !action;
   try {
     context.pathname = location.pathname;
     context.query = queryString.parse(location.search);
+    context.locale = store.getState().intl.locale;
 
     // Traverses the list of routes in the order they are defined until
     // it finds the first route that matches provided URL path string
@@ -146,10 +182,20 @@ async function onLocationChange(location, action) {
   }
 }
 
-// Handle client-side navigation by using HTML5 History API
-// For more information visit https://github.com/mjackson/history#readme
-history.listen(onLocationChange);
-onLocationChange(currentLocation);
+let isHistoryObserved = false;
+export default function main() {
+  // Handle client-side navigation by using HTML5 History API
+  // For more information visit https://github.com/mjackson/history#readme
+  currentLocation = history.location;
+  if (!isHistoryObserved) {
+    isHistoryObserved = true;
+    history.listen(onLocationChange);
+  }
+  onLocationChange(currentLocation);
+}
+
+// globally accesible entry point
+window.RSK_ENTRY = main;
 
 // Enable Hot Module Replacement (HMR)
 if (module.hot) {