Merge pull request #46 from christin-wednesday/fix/remove-make-selector

refactor: Add somePayload state variable selector def and usages

.gitignore

@@ -8,3 +8,5 @@ stats.json
 .DS_Store
 npm-debug.log
 .idea
+.vscode/**
+app/**

generators/component/stories.js.hbs

@@ -6,9 +6,9 @@
  *
  */
 
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import { {{ properCase name }} } from '../index'
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { {{ properCase name }} } from '../index';
 
 
-storiesOf('{{properCase name}}').add('simple', () => <{{properCase name}} />)
+storiesOf('{{properCase name}}').add('simple', () => <{{properCase name}} />);

generators/container/Loadable.js.hbs

@@ -1,3 +1,3 @@
-import loadable from '@utils/loadable'
+import loadable from '@utils/loadable';
 
-export default loadable(() => import('./index'))
+export default loadable(() => import('./index'));

generators/container/index.js.hbs

@@ -1,37 +1,36 @@
 /**
  *
- * {{properCase name }}
+ * {{properCase name }} Container
  *
  */
 
 {{#if memo}}
-import React, { memo } from 'react'
+import React, { memo } from 'react';
 {{else}}
-import React from 'react'
+import React from 'react';
 {{/if}}
-// import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { injectIntl } from 'react-intl'
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl } from 'react-intl';
 {{#if wantHeaders}}
-import { Helmet } from 'react-helmet'
+import { Helmet } from 'react-helmet';
 {{/if}}
-import { FormattedMessage as T } from 'react-intl'
+import { FormattedMessage as T } from 'react-intl';
 {{#if wantActionsAndReducer}}
-import { createStructuredSelector } from 'reselect'
+import { createStructuredSelector } from 'reselect';
 {{/if}}
-import { compose } from 'redux'
+import { compose } from 'redux';
 {{#if wantSaga}}
 import { injectSaga } from 'redux-injectors';
 {{/if}}
 {{#if wantActionsAndReducer}}
-import { select{{properCase name}} } from './selectors'
+import { selectSomePayLoad } from './selectors';
 {{/if}}
 {{#if wantSaga}}
-import saga from './saga'
+import saga from './saga';
 {{/if}}
 
 export function {{ properCase name }}() {
-
   return (
     <div>
     {{#if wantHeaders}}
@@ -43,27 +42,28 @@ export function {{ properCase name }}() {
     <T id={'{{properCase name}}'} />
     </div>
   )
-}
+};
 
 {{ properCase name }}.propTypes = {
-}
+  somePayLoad: PropTypes.any,
+};
 
 {{#if wantActionsAndReducer}}
 const mapStateToProps = createStructuredSelector({
-  {{ camelCase name }}: select{{properCase name}}(),
+  somePayLoad: selectSomePayLoad(),
 })
 {{/if}}
 
 function mapDispatchToProps(dispatch) {
   return {
     dispatch,
-  }
-}
+  };
+};
 
 {{#if wantActionsAndReducer}}
-const withConnect = connect(mapStateToProps, mapDispatchToProps)
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
 {{else}}
-const withConnect = connect(null, mapDispatchToProps)
+const withConnect = connect(null, mapDispatchToProps);
 {{/if}}
 
 export default compose(
@@ -74,6 +74,6 @@ export default compose(
 {{#if wantSaga}}
   injectSaga({ key: '{{ camelCase name }}', saga })
   {{/if}}
-)({{ properCase name }})
+)({{ properCase name }});
 
-export const {{ properCase name }}Test = compose(injectIntl)({{ properCase name }})
+export const {{ properCase name }}Test = compose(injectIntl)({{ properCase name }});

generators/container/reducer.js.hbs

@@ -6,20 +6,20 @@
 import produce from 'immer'
 import { createActions } from 'reduxsauce'
 
-export const initialState = {}
+export const initialState = {
+  somePayLoad: null
+}
 
 export const { Types: {{ camelCase name }}Types, Creators: {{ camelCase name }}Creators } = createActions({
-  defaultAction: ['somePayload']
+  defaultAction: ['somePayLoad']
 })
 
-/* eslint-disable default-case, no-param-reassign */
 export const {{ camelCase name }}Reducer = (state = initialState, action) =>
-  produce(state, (/* draft */) => {
+  produce(state, draft => {
     switch (action.type) {
       case {{ camelCase name}}Types.DEFAULT_ACTION:
-        return {...state, somePayload: action.somePayload}
+        draft.somePayLoad = action.somePayLoad;
       default:
-        return state
     }
   })
 

generators/container/reducer.test.js.hbs

@@ -1,24 +1,17 @@
-// import produce from 'immer'
-import { {{ camelCase name }}Reducer, {{ camelCase name }}Types, initialState } from '../reducer'
+import { {{ camelCase name }}Reducer, {{ camelCase name }}Types, initialState } from '../reducer';
 
-/* eslint-disable default-case, no-param-reassign */
 describe('{{ properCase name }} reducer tests', () => {
-  let state
-  beforeEach(() => {
-    state = initialState
-  })
+  it('should return the initial state by default', () => {
+    expect({{ camelCase name }}Reducer(undefined, {})).toEqual(initialState);
+  });
 
-  it('should return the initial state', () => {
-    expect({{ camelCase name }}Reducer(undefined, {})).toEqual(state)
-  })
-
-  it('should return the update the state when an action of type DEFAULT is dispatched', () => {
-    const expectedResult = {...state, somePayload: 'Mohammed Ali Chherawalla'}
+  it('should return the updated state when an action of type DEFAULT is dispatched', () => {
+    const expectedResult = {...initialState, somePayLoad: 'Mohammed Ali Chherawalla'};
     expect(
-      {{ camelCase name }}Reducer(state, {
+      {{ camelCase name }}Reducer(initialState, {
         type: {{ camelCase name}}Types.DEFAULT_ACTION,
-        somePayload: 'Mohammed Ali Chherawalla'
+        somePayLoad: 'Mohammed Ali Chherawalla'
       })
-    ).toEqual(expectedResult)
-  })
-})
+    ).toEqual(expectedResult);
+  });
+});

generators/container/saga.js.hbs

@@ -1,13 +1,13 @@
-import { takeLatest } from 'redux-saga/effects'
-import { {{ camelCase name}}Types } from './reducer'
+import { takeLatest } from 'redux-saga/effects';
+import { {{ camelCase name}}Types } from './reducer';
+
 // Individual exports for testing
-const { DEFAULT_ACTION } = {{ camelCase name }}Types
+const { DEFAULT_ACTION } = {{ camelCase name }}Types;
 
 export function *defaultFunction (/* action */) {
   // console.log('Do something here')
-
-}
+};
 
 export default function* {{ camelCase name }}Saga() {
-  yield takeLatest(DEFAULT_ACTION, defaultFunction)
-}
+  yield takeLatest(DEFAULT_ACTION, defaultFunction);
+};

generators/container/saga.test.js.hbs

@@ -2,17 +2,16 @@
  * Test {{ camelCase name }} sagas
  */
 
-/* eslint-disable redux-saga/yield-effects */
 import { takeLatest } from 'redux-saga/effects'
 import {{ camelCase name}}Saga, { defaultFunction } from '../saga'
 import { {{ camelCase name}}Types } from '../reducer'
 
 describe('{{ properCase name }} saga tests', () => {
-  const generator = {{ camelCase name }}Saga()
+  const generator = {{ camelCase name }}Saga();
 
   it('should start task to watch for DEFAULT_ACTION action', () => {
     expect(generator.next().value).toEqual(
       takeLatest({{ camelCase name }}Types.DEFAULT_ACTION, defaultFunction)
-    )
-  })
-})
+    );
+  });
+});

generators/container/selectors.js.hbs

@@ -1,17 +1,14 @@
-import { createSelector } from 'reselect'
-import { initialState } from './reducer'
+import { createSelector } from 'reselect';
+import { initialState } from './reducer';
 
 /**
  * Direct selector to the {{ camelCase name }} state domain
  */
 
-const select{{ properCase name }}Domain = state => state.{{ camelCase name }} || initialState
+const select{{ properCase name }}Domain = state => state.{{ camelCase name }} || initialState;
 
-/**
- * use createSelector if you are doing something with the returned state.
- * https://redux.js.org/usage/deriving-data-selectors#createselector-overview
- * e.g:  const makeSelect{{ properCase name }} = () =>
- * createSelector(select{{ properCase name }}Domain, substate =>  get(substate, 'somevalue'))
- */
 export const select{{ properCase name }} = () =>
-  createSelector(select{{ properCase name }}Domain, substate => substate)
+  createSelector(select{{ properCase name }}Domain, substate => substate);
+
+export const selectSomePayLoad = () =>
+  createSelector(select{{properCase name}}Domain, substate => substate.somePayLoad);

generators/container/selectors.test.js.hbs

@@ -1,16 +1,19 @@
-import { select{{ properCase name }} } from '../selectors'
+import { select{{ properCase name }}, selectSomePayLoad } from '../selectors';
 
 describe('{{ properCase name }} selector tests', () => {
-  let mockedState
-
-  beforeEach(() => {
-    mockedState = {
-      {{ camelCase name }}: {}
+  const mockedState = {
+      {{ camelCase name }}: {
+        somePayLoad: "W.S"
+      }
     }
-  })
 
-  it('should select the user state', () => {
+  it('should select the {{ camelCase name }} state', () => {
     const {{ camelCase name }}Selector = select{{ properCase name }}();
     expect({{ camelCase name }}Selector(mockedState)).toEqual(mockedState.{{ camelCase name }});
-  })
+  });
+
+  it('should select the somePayLoad state', () => {
+    const somePayLoadSelector = selectSomePayLoad();
+    expect(somePayLoadSelector(mockedState)).toEqual(mockedState.{{ camelCase name }}.somePayLoad);
+  });
 })

generators/container/test.js.hbs

@@ -1,26 +1,27 @@
 /**
  *
- * Tests for {{ properCase name }}
+ * Tests for {{ properCase name }} container
  *
  *
  */
 
 
-import React from 'react'
-import { renderProvider } from '@utils/testUtils'
-// import { fireEvent } from '@testing-library/dom'
-import { {{ properCase name }}Test as {{ properCase name }} } from '../index'
+import React from 'react';
+// import { fireEvent } from '@testing-library/dom';
+import { renderProvider } from '@utils/testUtils';
+import { {{ properCase name }}Test as {{ properCase name }} } from '../index';
 
 describe('<{{ properCase name }} /> container tests', () => {
-  // let submitSpy
+   // let submitSpy
 
   beforeEach(() => {
-    // submitSpy = jest.fn()
-  })
+    // submitSpy = jest.fn();
+  });
+
   it('should render and match the snapshot', () => {
     const { baseElement } = renderProvider(
       <{{ properCase name }} />
-    )
-    expect(baseElement).toMatchSnapshot()
-  })
-})
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-floki",
-  "version": "1.0.93",
+  "version": "1.0.94",
   "description": "A React component, container and test generation library",
   "repository": {
     "type": "git",