diff --git a/README.md b/README.md index 3f254a4..32d5f6f 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,7 @@ Features * PostCSS ( with CSS modules activated by default ) * Webpack 4 * Reselect +* i18n / i10n supports ( react-intl ) * Lazy Loading component supports * Type Checking with Babel Type Check ( Flow syntax ) * ESLint for syntax check @@ -533,6 +534,10 @@ This boilerplate will be maintained separately. So please do not check in any b ## Updates +__04 / 30 / 2019__ + +Adding i18n / i10n support by adding [react-intl](https://github.com/yahoo/react-intl) + __10 / 25 / 2018__ We are now on Webpack 4 and React 16.4, plus up-to-date with all our dependencies. @@ -557,17 +562,6 @@ If you are using mac, you can fix that by doing this `brew install automake autoconf libtool dpkg pkgconfig nasm libpng` -__7 / 15 / 2017__ - -We added Enzyme to make React unit testing easier :) - -__6 / 20 / 2017__ - -Webpack 3 just announced yesterday, we are so excited about it, thus we also upgraded this boilerplate to use `Webpack 3`. - -If you encounter issues related to `Webpack 3`, it is good to report that back so the community can benefit from it. - - ## License ?! In theory, knowledge should be free, so please visit [wtfpl](http://www.wtfpl.net/) for this boilerplate license if you really care. diff --git a/package.json b/package.json index e5536a9..362d152 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-redux-boilerplate", - "version": "1.2.4", + "version": "1.3.4", "description": "React Redux Boilerplate is a workflow boilerplate that make life easier for developers by providing a virtual development environment and production ready build process framework out of the box.", "scripts": { "dev": "cross-env NODE_ENV=development DASHBOARD_PORT=9901 webpack-dashboard -p 9901 -c red -t dashboard -- node bin/commands.js dev", @@ -93,10 +93,11 @@ "react": "^16.8.3", "react-dom": "^16.8.3", "react-helmet": "^5.2.0", + "react-intl": "^2.8.0", "react-loadable": "^5.5.0", - "react-redux": "^6.0.1", - "react-router": "^4.3.1", - "react-router-dom": "^4.3.1", + "react-redux": "^7.0.3", + "react-router": "^5.0.0", + "react-router-dom": "^5.0.0", "react-router-redux": "^4.0.8", "redux": "^4.0.1", "redux-actions": "^2.6.4", diff --git a/src/js/Root.jsx b/src/js/Root.jsx index 4d8baae..aac154f 100644 --- a/src/js/Root.jsx +++ b/src/js/Root.jsx @@ -5,6 +5,7 @@ import { Provider } from 'react-redux' // 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 { get content() { @@ -21,9 +22,11 @@ export default class Root extends Component { const { store } = this.props return ( - - {this.content} - + + + {this.content} + + ) } } diff --git a/src/js/app-history.js b/src/js/app-history.js index c7c9597..976bd50 100644 --- a/src/js/app-history.js +++ b/src/js/app-history.js @@ -10,9 +10,9 @@ // don't make changes in here. // import createHistory from 'history/createBrowserHistory' -import createHistory from 'history/createHashHistory' +import { createHashHistory } from 'history' -const history = createHistory() +const history = createHashHistory() // Exposing history for deep integration needs // For example, saga and utilities diff --git a/src/js/views/example/View.jsx b/src/js/views/example/View.jsx index ab502d7..4d02cc1 100644 --- a/src/js/views/example/View.jsx +++ b/src/js/views/example/View.jsx @@ -2,28 +2,32 @@ import React, { Component, Fragment } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' +// This is i18n and i10n +import { + FormattedMessage, + FormattedDate, + FormattedTime, +} from 'react-intl' + import LazyLoading from '../../common/components/LazyLoading' import { actions as exampleActions } from '../../redux/modules/example' import { exampleSelector } from '../../redux/selectors/exampleSelector' import { ExampleWithError } from '../../common/components/Example' import { ErrorBoundary } from '../../common/components/Utilities' +// This is lazy loading example const LazyExample = LazyLoading(() => import('../../common/components/Example/Example')) -const mapStateToProps = (state) => ({ - example: exampleSelector(state), -}) - -const mapDispatchToProps = { - ...exampleActions, -} - -@connect(mapStateToProps, mapDispatchToProps) class ExampleView extends Component { static propTypes = { example: PropTypes.object.isRequired, } + state = { + myArbitraryNumber: Math.floor(Math.random() * 10000), + currentTime: new Date(), + } + componentDidMount() { const { getAwesomeCode } = this.props @@ -31,9 +35,34 @@ class ExampleView extends Component { } render() { + const { + myArbitraryNumber, + currentTime, + } = this.state + return ( +

This framework supports i18n and i10n out of the box.

+ Visitor, + myArbitraryNumber, + }} + /> +

+ The date is:   + +

+

+ The time is:   + +

@@ -42,4 +71,15 @@ class ExampleView extends Component { } } -export default ExampleView +const mapStateToProps = (state) => ({ + example: exampleSelector(state), +}) + +const mapDispatchToProps = { + ...exampleActions, +} + +export default connect( + mapStateToProps, + mapDispatchToProps +)(ExampleView)