Language

createLang.js

// hoc/create-lang.js

/*eslint-disable*/
import React from 'react'
import PropTypes from 'prop-types'
import objectPath from 'object-path'
import { connectAutoDispatch } from 'redux/connect'
import { changeLanguage } from 'redux/actions/languageAction'
import { autobind } from 'core-decorators'
import dot from 'dot'

// eslint-disable-next-line
export const langPropTypes = PropTypes.shape({
  t: PropTypes.func,
  changeLanguage: PropTypes.func
})

export function translate(key, params = {}, isParse = true) {
  const languageData = (typeof window !== "undefined" ? window.currentLanguage : global.currentLanguage)
  let translated = objectPath.get(languageData, key)
  if (translated && isParse) {
    return dot.template(translated)(params).toString()
  } else return translated ? translated : ''
}

const createLanguageHoc = Component => {
  @connectAutoDispatch(
    state => ({
      languageData: state.language.data[state.language.locale],
      languageLocale: state.language.locale
    }),
    { changeLanguage }
  )
  @autobind
  class LanguageHoc extends React.PureComponent {
    static propTypes = {
      changeLanguage: PropTypes.func
    }

    static getInitialProps = Component.getInitialProps

    constructor(props) {
      super(props)
    }

    translate(key, params = {}, isParse = true) {
      let translated = objectPath.get(this.props.languageData, key)
      if (translated && isParse) {
        return dot.template(translated)(params)
      } else return translated ? translated : ''
    }

    changeLanguage(lang) {
      this.props.changeLanguage(lang)
    }

    render() {
      const langProps = {
        t: this.translate,
        locale: this.props.languageLocale,
        changeLanguage: this.changeLanguage
      }
      return <Component {...this.props} ref={this.props.ref} lang={langProps} />
    }
  }
  return LanguageHoc
}

export default createLanguageHoc

language.js

// redux/reducers/language.js

import update from 'react-addons-update'
import { CHANGE_LANGUAGE } from '../actions/languageAction'
import languages from 'languages'

const initialState = {
  locale: 'en',
  data: languages
}

export default function createReducer (state = initialState, action) {
  switch (action.type) {
    case CHANGE_LANGUAGE:
      return changeLanguage(state, action)
    default:
      return state
  }
}

export function changeLanguage (state, { locale }) {
  return update(state, {
    locale: {
      $set: locale
    }
  })
}

languageAction.js

// redux/reducers/lang.js

export const CHANGE_LANGUAGE = 'LANGUAGE/change-language'

export function changeLanguage (locale = 'en') {
  return {
    type: CHANGE_LANGUAGE,
    locale
  }
}

// redux/connect.js
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

export function connectAwaitAutoDispatch (
  mapStateToProps = () => ({}),
  actions,
  ...args
) {
  return connect(
    mapStateToProps,
    dispatch => bindActionCreators(actions, dispatch),
    ...args
  )
}