Update templates and generators

- Take the next step and bring the default containers to Pure Functions.
- Also, align import formatting separation with the work done in react-boilerplate#1275.

internals/generators/component/es6.js.hbs

@@ -6,9 +6,9 @@
 
 import React from 'react';
 // import styled from 'styled-components';
-
 {{#if wantMessages}}
 import { FormattedMessage } from 'react-intl';
+
 import messages from './messages';
 {{/if}}
 

internals/generators/component/es6.pure.js.hbs

@@ -6,9 +6,9 @@
 
 import React from 'react';
 // import styled from 'styled-components';
-
 {{#if wantMessages}}
 import { FormattedMessage } from 'react-intl';
+
 import messages from './messages';
 {{/if}}
 

internals/generators/component/stateless.js.hbs

@@ -6,9 +6,9 @@
 
 import React from 'react';
 // import styled from 'styled-components';
-
 {{#if wantMessages}}
 import { FormattedMessage } from 'react-intl';
+
 import messages from './messages';
 {{/if}}
 

internals/generators/container/index.js.hbs

@@ -14,6 +14,9 @@ import { FormattedMessage } from 'react-intl';
 {{/if}}
 {{#if wantActionsAndReducer}}
 import { createStructuredSelector } from 'reselect';
+{{/if}}
+
+{{#if wantActionsAndReducer}}
 import makeSelect{{properCase name}} from './selectors';
 {{/if}}
 {{#if wantMessages}}

internals/generators/container/reducer.js.hbs

@@ -5,6 +5,7 @@
  */
 
 import { fromJS } from 'immutable';
+
 import {
   DEFAULT_ACTION,
 } from './constants';

internals/generators/container/reducer.test.js.hbs

@@ -1,5 +1,6 @@
 
 import { fromJS } from 'immutable';
+
 import {{ camelCase name }}Reducer from '../reducer';
 
 describe('{{ camelCase name }}Reducer', () => {

internals/generators/container/sagas.test.js.hbs

@@ -4,6 +4,7 @@
 
 /* eslint-disable redux-saga/yield-effects */
 // import { take, call, put, select } from 'redux-saga/effects';
+
 // import { defaultSaga } from '../sagas';
 
 // const generator = defaultSaga();

internals/generators/container/selectors.test.js.hbs

@@ -1,4 +1,5 @@
 // import { fromJS } from 'immutable';
+
 // import { makeSelect{{ properCase name }}Domain } from '../selectors';
 
 // const selector = makeSelect{{ properCase name}}Domain();

internals/templates/appContainer.js

@@ -4,26 +4,20 @@
  *
  * This component is the skeleton around the actual pages, and should only
  * contain code that should be seen on all pages. (e.g. navigation bar)
- *
- * NOTE: while this component should technically be a stateless functional
- * component (SFC), hot reloading does not currently support SFCs. If hot
- * reloading is not a necessity for you then you can refactor it and remove
- * the linting exception.
  */
 
 import React from 'react';
 
-export default class App extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+function App({ children }) {
+  return (
+    <div>
+      {React.Children.toArray(children)}
+    </div>
+  );
+}
 
-  static propTypes = {
-    children: React.PropTypes.node,
-  };
+App.propTypes = {
+  children: React.PropTypes.node,
+};
 
-  render() {
-    return (
-      <div>
-        {React.Children.toArray(this.props.children)}
-      </div>
-    );
-  }
-}
+export default App;

internals/templates/homePage/homePage.js

@@ -2,23 +2,19 @@
  * HomePage
  *
  * This is the first thing users see of our App, at the '/' route
- *
- * NOTE: while this component should technically be a stateless functional
- * component (SFC), hot reloading does not currently support SFCs. If hot
- * reloading is not a necessity for you then you can refactor it and remove
- * the linting exception.
  */
 
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+
 import messages from './messages';
 
-export default class HomePage extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
-  render() {
-    return (
-      <h1>
-        <FormattedMessage {...messages.header} />
-      </h1>
-    );
-  }
+function HomePage() {
+  return (
+    <h1>
+      <FormattedMessage {...messages.header} />
+    </h1>
+  );
 }
+
+export default HomePage;

internals/templates/languageProvider/languageProvider.js

@@ -13,14 +13,12 @@ import { IntlProvider } from 'react-intl';
 
 import { makeSelectLocale } from './selectors';
 
-export class LanguageProvider extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
-  render() {
-    return (
-      <IntlProvider locale={this.props.locale} key={this.props.locale} messages={this.props.messages[this.props.locale]}>
-        {React.Children.only(this.props.children)}
-      </IntlProvider>
-    );
-  }
+export function LanguageProvider({ locale, messages, children }) {
+  return (
+    <IntlProvider locale={locale} key={locale} messages={messages[locale]}>
+      {React.Children.only(children)}
+    </IntlProvider>
+  );
 }
 
 LanguageProvider.propTypes = {

internals/templates/notFoundPage/notFoundPage.js

@@ -2,24 +2,19 @@
  * NotFoundPage
  *
  * This is the page we show when the user visits a url that doesn't have a route
- *
- * NOTE: while this component should technically be a stateless functional
- * component (SFC), hot reloading does not currently support SFCs. If hot
- * reloading is not a necessity for you then you can refactor it and remove
- * the linting exception.
  */
 
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
 
-export default class NotFound extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
-  render() {
-    return (
-      <h1>
-        <FormattedMessage {...messages.header} />
-      </h1>
-    );
-  }
+function NotFound() {
+  return (
+    <h1>
+      <FormattedMessage {...messages.header} />
+    </h1>
+  );
 }
+
+export default NotFound;