TRACKING: feature/redux → 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,9 @@
     "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",
@@ -56,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",
@@ -79,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",
@@ -123,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": {
@@ -142,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/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/client.js

@@ -13,12 +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 configureStore from './store/configureStore';
-import history from './history';
 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
@@ -32,14 +60,14 @@ const context = {
       removeCss.forEach(f => f());
     };
   },
-  // Universal HTTP client
-  fetch: createFetch(fetch, {
-    baseUrl: window.App.apiUrl,
-  }),
-  // Initialize a new Redux store
-  // http://redux.js.org/docs/basics/UsageWithReact.html
-  store: configureStore(window.App.state, { history }),
+  // For react-apollo
+  client: apolloClient,
+  store,
   storeSubscription: null,
+  // Universal HTTP client
+  fetch,
+  // intl instance as it can be get with injectIntl
+  intl: store.dispatch(getIntl()),
 };
 
 const container = document.getElementById('app');
@@ -61,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
@@ -151,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) {

src/clientLoader.js

@@ -0,0 +1,43 @@
+const readyStates = new Set(['complete', 'loaded', 'interactive']);
+
+function loadMainClient() {
+  const main = require('./client').default; // eslint-disable-line global-require
+  main();
+}
+
+function run() {
+  // Run the application when both DOM is ready and page content is loaded
+  if (readyStates.has(document.readyState) && document.body) {
+    loadMainClient();
+  } else {
+    document.addEventListener('DOMContentLoaded', loadMainClient, false);
+  }
+}
+
+if (!global.Intl) {
+  // You can show loading banner here
+
+  require.ensure(
+    [
+      // Add all large polyfills here
+      'intl',
+      /* @intl-code-template 'intl/locale-data/jsonp/${lang}.js', */
+      'intl/locale-data/jsonp/en.js',
+      'intl/locale-data/jsonp/cs.js',
+      /* @intl-code-template-end */
+    ],
+    require => {
+      // and require them here
+      require('intl');
+      // TODO: This is bad. You should only require one language dynamically
+      /* @intl-code-template require('intl/locale-data/jsonp/${lang}.js'); */
+      require('intl/locale-data/jsonp/en.js');
+      require('intl/locale-data/jsonp/cs.js');
+      /* @intl-code-template-end */
+      run();
+    },
+    'polyfills',
+  );
+} else {
+  run();
+}