Skip to content

Commit

Permalink
Merge pull request #71 from iroy2000/adding-i18n-capabilities
Browse files Browse the repository at this point in the history
Adding i18n / i10n capabilities and upgrade dependencies
  • Loading branch information
iroy2000 authored Apr 30, 2019
2 parents d4bdcda + 7e439a3 commit 00e90dc
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 30 deletions.
16 changes: 5 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand All @@ -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.

Expand Down
9 changes: 5 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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",
Expand Down
9 changes: 6 additions & 3 deletions src/js/Root.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -21,9 +22,11 @@ export default class Root extends Component {
const { store } = this.props

return (
<Provider store={store}>
{this.content}
</Provider>
<IntlProvider locale="en">
<Provider store={store}>
{this.content}
</Provider>
</IntlProvider>
)
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/js/app-history.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
60 changes: 50 additions & 10 deletions src/js/views/example/View.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,67 @@ 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

getAwesomeCode()
}

render() {
const {
myArbitraryNumber,
currentTime,
} = this.state

return (
<Fragment>
<LazyExample {...this.props} />
<h2>This framework supports i18n and i10n out of the box.</h2>
<FormattedMessage
id="hooray"
defaultMessage={`A locallized random number: {myArbitraryNumber, number} {myArbitraryNumber, plural,
one {item}
other {items}
}`}
values={{
name: <b>Visitor</b>,
myArbitraryNumber,
}}
/>
<p>
The date is: &nbsp;
<FormattedDate value={currentTime} />
</p>
<p>
The time is: &nbsp;
<FormattedTime value={currentTime} />
</p>
<ErrorBoundary>
<ExampleWithError {...this.props} />
</ErrorBoundary>
Expand All @@ -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)

0 comments on commit 00e90dc

Please sign in to comment.