From 1e0f1c0a8852f4de624194a095c9d6041878949e Mon Sep 17 00:00:00 2001 From: Johnathon Sanders Date: Fri, 30 Dec 2016 11:27:16 -0600 Subject: [PATCH] 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 #1275. --- internals/generators/component/es6.js.hbs | 2 +- .../generators/component/es6.pure.js.hbs | 2 +- .../generators/component/stateless.js.hbs | 2 +- internals/generators/container/index.js.hbs | 3 ++ internals/generators/container/reducer.js.hbs | 1 + .../generators/container/reducer.test.js.hbs | 1 + .../generators/container/sagas.test.js.hbs | 1 + .../container/selectors.test.js.hbs | 1 + internals/templates/appContainer.js | 28 ++++++++----------- internals/templates/homePage/homePage.js | 22 ++++++--------- .../languageProvider/languageProvider.js | 14 ++++------ .../templates/notFoundPage/notFoundPage.js | 21 ++++++-------- 12 files changed, 44 insertions(+), 54 deletions(-) diff --git a/internals/generators/component/es6.js.hbs b/internals/generators/component/es6.js.hbs index 0bfb20e5aa..ac67e313ae 100644 --- a/internals/generators/component/es6.js.hbs +++ b/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}} diff --git a/internals/generators/component/es6.pure.js.hbs b/internals/generators/component/es6.pure.js.hbs index 30efa9bc0c..cd3935573c 100644 --- a/internals/generators/component/es6.pure.js.hbs +++ b/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}} diff --git a/internals/generators/component/stateless.js.hbs b/internals/generators/component/stateless.js.hbs index fbf8f7cfec..e46868d813 100644 --- a/internals/generators/component/stateless.js.hbs +++ b/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}} diff --git a/internals/generators/container/index.js.hbs b/internals/generators/container/index.js.hbs index 4cde59d44f..699088fb1a 100644 --- a/internals/generators/container/index.js.hbs +++ b/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}} diff --git a/internals/generators/container/reducer.js.hbs b/internals/generators/container/reducer.js.hbs index fcf9371e4f..af73d66fb6 100644 --- a/internals/generators/container/reducer.js.hbs +++ b/internals/generators/container/reducer.js.hbs @@ -5,6 +5,7 @@ */ import { fromJS } from 'immutable'; + import { DEFAULT_ACTION, } from './constants'; diff --git a/internals/generators/container/reducer.test.js.hbs b/internals/generators/container/reducer.test.js.hbs index 5a6d8b01f3..e325ef8804 100644 --- a/internals/generators/container/reducer.test.js.hbs +++ b/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', () => { diff --git a/internals/generators/container/sagas.test.js.hbs b/internals/generators/container/sagas.test.js.hbs index 6dd4d4e12e..7008027ff1 100644 --- a/internals/generators/container/sagas.test.js.hbs +++ b/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(); diff --git a/internals/generators/container/selectors.test.js.hbs b/internals/generators/container/selectors.test.js.hbs index 0834f804c9..78c34f3899 100644 --- a/internals/generators/container/selectors.test.js.hbs +++ b/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(); diff --git a/internals/templates/appContainer.js b/internals/templates/appContainer.js index a48521f229..802bcd9832 100644 --- a/internals/templates/appContainer.js +++ b/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 ( +
+ {React.Children.toArray(children)} +
+ ); +} - static propTypes = { - children: React.PropTypes.node, - }; +App.propTypes = { + children: React.PropTypes.node, +}; - render() { - return ( -
- {React.Children.toArray(this.props.children)} -
- ); - } -} +export default App; diff --git a/internals/templates/homePage/homePage.js b/internals/templates/homePage/homePage.js index 3fa0549e2a..2d6b0f8a4d 100644 --- a/internals/templates/homePage/homePage.js +++ b/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 ( -

- -

- ); - } +function HomePage() { + return ( +

+ +

+ ); } + +export default HomePage; diff --git a/internals/templates/languageProvider/languageProvider.js b/internals/templates/languageProvider/languageProvider.js index 1d1d210635..2fd2ff23c7 100644 --- a/internals/templates/languageProvider/languageProvider.js +++ b/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 ( - - {React.Children.only(this.props.children)} - - ); - } +export function LanguageProvider({ locale, messages, children }) { + return ( + + {React.Children.only(children)} + + ); } LanguageProvider.propTypes = { diff --git a/internals/templates/notFoundPage/notFoundPage.js b/internals/templates/notFoundPage/notFoundPage.js index 52a9e9a1a5..29c55a6133 100644 --- a/internals/templates/notFoundPage/notFoundPage.js +++ b/internals/templates/notFoundPage/notFoundPage.js @@ -2,11 +2,6 @@ * 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'; @@ -14,12 +9,12 @@ 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 ( -

- -

- ); - } +function NotFound() { + return ( +

+ +

+ ); } + +export default NotFound;