Merge pull request #52 from emmenko/babel-6

Babel 6

Author: emmenko

.babelrc

@@ -1,18 +1,31 @@
 {
-  "optional": ["runtime"],
-  "stage": 0,
+  "plugins": ["transform-runtime"],
+  "presets": [ "es2015", "stage-0", "react" ],
   "env": {
     "development": {
-      "plugins": ["react-transform"],
-      "extra": {
-        "react-transform": {
-          "transforms": [{
-            "transform": "react-transform-hmr",
-            "imports": ["react"],
-            "locals": ["module"]
-          }]
-        }
-      }
+      "plugins": [
+        [ "react-transform", {
+          "transforms": [
+            {
+              "transform": "react-transform-hmr",
+              "imports": ["react"],
+              "locals": ["module"]
+            },
+            {
+              "transform": "react-transform-catch-errors",
+              "imports": [ "react", "redbox-react" ]
+            }
+          ]
+        }]
+      ]
+    },
+    "i18n": {
+      "plugins": [
+        [ "react-intl", {
+          "messagesDir": "./_translations",
+          "enforceDescriptions": false
+        }]
+      ]
     }
   }
 }

.babelrc.i18n

@@ -1,8 +1,10 @@
 http://emmenko.github.io/redux-react-router-async-example
 
-This is a boilerplate example showcasing _mostly_ [Redux](https://github.com/gaearon/redux) and [React Router](https://github.com/rackt/react-router).
+This is a boilerplate example showcasing _mostly_ [Redux](https://github.com/gaearon/redux) and [React Router](https://github.com/rackt/react-router) and it aims to provide different examples or use cases with the two libraries.
 
-> Still a **WIP** but it aims to provide different examples or use cases with the two libraries.
+##### The project will be constantly updated and improved with the latest dependencies, features, best practices and so on.
+
+> Check out the [migration to babel 6](https://github.com/emmenko/redux-react-router-async-example/pull/52).
 
 ## Features
 

README.md

@@ -1,7 +1,7 @@
 # TODO
 
 - JSDoc
-- better error handling
+- loading spinner for data fetching
 - use inline styles https://github.com/emmenko/redux-react-router-async-example/issues/7
 - add use-case for `AsyncProps`
 - add use-case for external plugin https://dl.dropboxusercontent.com/u/4803975/ReactEurope/slides.pdf

TODO.md

@@ -48,7 +48,7 @@ function getRootChildren (props) {
   ]
 
   if (__DEVTOOLS__) {
-    const DevTools = require('./components/DevTools')
+    const DevTools = require('./components/DevTools').default
     rootChildren.push(<DevTools key="devtools" />)
   }
   return rootChildren
@@ -90,15 +90,16 @@ function logout (nextState, replaceState) {
   replaceState({}, '/login')
 }
 
-@connect(({ application }) => ({ application }))
-export default class Root extends React.Component {
+class Root extends React.Component {
   static propTypes = {
     application: PropTypes.object.isRequired
-  }
+  };
 
   render () {
     return (
       <div>{getRootChildren(this.props)}</div>
     )
   }
 }
+
+export default connect(({ application }) => ({ application }))(Root)

lib/Root.js

@@ -8,7 +8,7 @@ export default class Application extends React.Component {
 
   static propTypes = {
     children: PropTypes.any
-  }
+  };
 
   constructor (props, context) {
     super(props, context)

lib/components/Application.js

@@ -5,8 +5,8 @@ import DockMonitor from 'redux-devtools-dock-monitor'
 
 export default createDevTools(
   <DockMonitor
-    toggleVisibilityKey='H'
-    changePositionKey='Q'>
+    toggleVisibilityKey='ctrl-h'
+    changePositionKey='ctrl-q'>
     <LogMonitor />
   </DockMonitor>
 )

lib/components/DevTools.js

@@ -7,7 +7,7 @@ class DisplayError extends React.Component {
   static propTypes = {
     hideError: PropTypes.func.isRequired,
     error: PropTypes.object
-  }
+  };
 
   render () {
     const { props: { hideError, error } } = this

lib/components/DisplayError.js

@@ -13,14 +13,13 @@ const menuItems = [
   { text: 'Fork Me', link: GITHUB_REPO, icon: 'fa fa-github', isExternal: true }
 ]
 
-@connect(({ application }) => ({ application }), applicationActions)
-export default class Menu extends React.Component {
+class Menu extends React.Component {
 
   static propTypes = {
     activeClass: PropTypes.string.isRequired,
     application: PropTypes.object.isRequired,
     switchLocale: PropTypes.func.isRequired
-  }
+  };
 
   constructor (props, context) {
     super(props, context)
@@ -58,3 +57,8 @@ export default class Menu extends React.Component {
     )
   }
 }
+
+export default connect(
+  ({ application }) => ({ application }),
+  applicationActions
+)(Menu)

lib/components/Menu.js

@@ -8,9 +8,9 @@ export default class MenuListItem extends Component {
     isExternal: PropTypes.bool,
     link: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired
-  }
+  };
 
-  static defaultProps = { isExternal: false }
+  static defaultProps = { isExternal: false };
 
   render () {
     return (

lib/components/MenuListItem.js

@@ -27,11 +27,11 @@ export default class Explore extends React.Component {
       repo: PropTypes.string,
       username: PropTypes.string
     })
-  }
+  };
 
   static contextTypes = {
     history: PropTypes.object.isRequired
-  }
+  };
 
   constructor (props) {
     super(props)

lib/components/github/Explore.js

@@ -6,7 +6,7 @@ export default class Pagination extends React.Component {
   static propTypes = {
     onPagination: PropTypes.func,
     pagination: PropTypes.object
-  }
+  };
 
   handlePaginationClick (link) {
     const page = link.url

lib/components/github/Pagination.js

@@ -4,17 +4,12 @@ import { fetchOnUpdate } from '../../decorators'
 import StargazersUser from './StargazersUser'
 import Pagination from './Pagination'
 
-@fetchOnUpdate([ 'username', 'repo' ], (params, actions) => {
-  const { username, repo } = params
-  actions.fetchRepo({ username, repo })
-  actions.fetchRepoStargazers({ username, repo })
-})
-export default class Repo extends React.Component {
+class Repo extends React.Component {
 
   static propTypes = {
     actions: PropTypes.object,
     github: PropTypes.object
-  }
+  };
 
   render () {
     const { github: { repo, stargazers } } = this.props
@@ -87,3 +82,9 @@ export default class Repo extends React.Component {
     )
   }
 }
+
+export default fetchOnUpdate([ 'username', 'repo' ], (params, actions) => {
+  const { username, repo } = params
+  actions.fetchRepo({ username, repo })
+  actions.fetchRepoStargazers({ username, repo })
+})(Repo)

lib/components/github/Repo.js

@@ -5,7 +5,7 @@ export default class StargazersRepo extends React.Component {
 
   static propTypes = {
     repo: PropTypes.object.isRequired
-  }
+  };
 
   render () {
     const { repo } = this.props

lib/components/github/StargazersRepo.js

@@ -5,7 +5,7 @@ export default class StargazersUser extends React.Component {
 
   static propTypes = {
     user: PropTypes.object.isRequired
-  }
+  };
 
   render () {
     const { user } = this.props

lib/components/github/StargazersUser.js

@@ -4,17 +4,12 @@ import { fetchOnUpdate } from '../../decorators'
 import StargazersRepo from './StargazersRepo'
 import Pagination from './Pagination'
 
-@fetchOnUpdate(['username'], (params, actions) => {
-  const { username } = params
-  actions.fetchUser({ username })
-  actions.fetchUserStargazers({ username })
-})
-export default class User extends React.Component {
+class User extends React.Component {
 
   static propTypes = {
     actions: PropTypes.object,
     github: PropTypes.object
-  }
+  };
 
   render () {
     const { github: { user, stargazers } } = this.props
@@ -67,3 +62,9 @@ export default class User extends React.Component {
     )
   }
 }
+
+export default fetchOnUpdate(['username'], (params, actions) => {
+  const { username } = params
+  actions.fetchUser({ username })
+  actions.fetchUserStargazers({ username })
+})(User)

lib/components/github/User.js

@@ -4,7 +4,7 @@ export default class Account extends React.Component {
 
   static propTypes = {
     children: PropTypes.any
-  }
+  };
 
   render () {
     return <div>{this.props.children}</div>

lib/components/pages/Account.js

@@ -13,17 +13,12 @@ const messages = defineMessages({
   }
 })
 
-@connect(state => ({
-  github: state.github
-}), dispatch => ({
-  actions: bindActionCreators(githubActions, dispatch)
-}))
-export default class GithubStargazers extends React.Component {
+class GithubStargazers extends React.Component {
 
   static propTypes = {
     children: PropTypes.any,
     actions: PropTypes.object
-  }
+  };
 
   render () {
     return (
@@ -44,3 +39,8 @@ export default class GithubStargazers extends React.Component {
     )
   }
 }
+
+export default connect(
+  ({ github }) => ({ github }),
+  dispatch => ({ actions: bindActionCreators(githubActions, dispatch) })
+)(GithubStargazers)

lib/components/pages/GithubStargazers.js

@@ -5,12 +5,12 @@ export default class Login extends React.Component {
 
   static propTypes = {
     location: PropTypes.object
-  }
+  };
 
   static contextTypes = {
     store: PropTypes.any,
     history: PropTypes.object.isRequired
-  }
+  };
 
   constructor (props) {
     super(props)

lib/components/pages/Login.js

@@ -10,8 +10,7 @@ const messages = defineMessages({
   }
 })
 
-@secure('manage_account')
-export default class SuperSecretArea extends React.Component {
+class SuperSecretArea extends React.Component {
   render () {
     return (
       <div>
@@ -25,3 +24,5 @@ export default class SuperSecretArea extends React.Component {
     )
   }
 }
+
+export default secure('manage_account')(SuperSecretArea)

lib/components/pages/SuperSecretArea.js

@@ -15,7 +15,7 @@ export default function fetchOnUpdate (paramKeys, fn) {
     static propTypes = {
       actions: PropTypes.object,
       params: PropTypes.object
-    }
+    };
 
     componentWillMount () {
       fn(mapParams(paramKeys, this.props.params), this.props.actions)

lib/decorators/fetchOnUpdate.js

@@ -8,7 +8,7 @@ export default function secure (scope) {
 
     static contextTypes = {
       store: PropTypes.any
-    }
+    };
 
     render () {
       const { store } = this.context

lib/decorators/secure.js

@@ -18,7 +18,7 @@ addLocaleData(it)
 // For that we need to patch in on runtime.
 if (!global.Intl)
   require.ensure(['intl'], require => {
-    require('intl')
+    require('intl').default
     start()
   }, 'IntlBundle')
 else start()