Add static content intl(locale) support

[awesomejerry]

related to #684, #686

support:

src/content/about.en.jade
src/content/about/en.jade

[langpavel]

Hi @awesomejerry
This code is build on feature/react-intl which internally uses Redux, but you implement this through context. This is not preferred way of doing fetching in Redux branches. If you do this by redux, you will see that you can entirely drop localeDetect HoC which is also not good example of HoC..

You can look at LanguageSwitcher and try rewrite Content code to use Redux.

I know I should rewrite content fetching too and I probably do this soon but for now I will do not merge this.

Anyway Thanks! And ping me in week if nothing happens here 😃

[awesomejerry]

The main reason I wrote localeDetect is that I don't want to mess up with the original code as much as possible (which is not meant for HoC demonstration apparently), trying to make things happen just inside a new component (that's why the usage of internal state). Furthermore, the locale content is only used by Component, so I didn't use redux or even create a new reducer. But hey, making things consistent might be great though. I'll make some changes by the end of the week.

FYI, I'm gonna make Component a stateful component in order to detect client side language switch. Dispatch action whenever the locale changes and take the content from state.content.data. Please let me know if there's any recommended ways of doing so.

[awesomejerry]

Hi @langpavel , I've updated the PR to redux style. Please check it. Thanks!

[langpavel]

I suggest you some changes but it is great job!
Thanks @awesomejerry

[langpavel]

FETCH_CONTENT_START

[langpavel]

FETCH_CONTENT_SUCCESS

[langpavel]

FETCH_CONTENT_ERROR

[langpavel]

• FETCH_CONTENT_START
• add more data to payload, path, locale
• you can make locale optional witch default value from getState().intl.locale

[langpavel]

use object for passing in arguments

export function getLocaleContent({ path, locale })

[langpavel]

FETCH_CONTENT_START note it is very good practice to use suffixes consistently, see for example react-redux-loading-bar

[langpavel]

const key = `${action.payload.locale}:${action.payload.path}`;
return {
  ...state,
  [key]: {
    ...(state[key]),
    isFetching: true,
  },
}

key should be extracted to standalone function based on action.payload

[langpavel]

return {
  ...state,
  [key]: {
    isFetching: false,
    ...action.payload
  },
};

[langpavel]

const mapState = (state, props) => {
  const locale = state.intl.locale;
  const content = state.content[`${locale}:${props.path}`];
  return {
    locale: state.intl.locale,
    ...content
  };
};

[awesomejerry]

Thanks for the code reviews and suggestions! They're quite helpful.

[langpavel]

Thanks @awesomejerry
I refactored some stuff to agressively cache content on client. Have a look!