diff --git a/.gitignore b/.gitignore
index 5d06c05..e293a2c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,5 @@ stats.json
.DS_Store
npm-debug.log
.idea
+.vscode/**
+app/**
diff --git a/generators/component/stories.js.hbs b/generators/component/stories.js.hbs
index bf3b33e..21271a4 100644
--- a/generators/component/stories.js.hbs
+++ b/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}} />);
diff --git a/generators/container/Loadable.js.hbs b/generators/container/Loadable.js.hbs
index 9f79048..6f46da9 100644
--- a/generators/container/Loadable.js.hbs
+++ b/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'));
diff --git a/generators/container/index.js.hbs b/generators/container/index.js.hbs
index 1a5be71..b375223 100644
--- a/generators/container/index.js.hbs
+++ b/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 (
{{#if wantHeaders}}
@@ -43,27 +42,28 @@ export function {{ properCase name }}() {
)
-}
+};
{{ 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 }})
\ No newline at end of file
+export const {{ properCase name }}Test = compose(injectIntl)({{ properCase name }});
diff --git a/generators/container/reducer.js.hbs b/generators/container/reducer.js.hbs
index cc0a0dd..cf6a1db 100644
--- a/generators/container/reducer.js.hbs
+++ b/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
}
})
diff --git a/generators/container/reducer.test.js.hbs b/generators/container/reducer.test.js.hbs
index 354e20d..1db65b9 100644
--- a/generators/container/reducer.test.js.hbs
+++ b/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);
+ });
+});
diff --git a/generators/container/saga.js.hbs b/generators/container/saga.js.hbs
index 3af9fee..2a23cb8 100644
--- a/generators/container/saga.js.hbs
+++ b/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)
-}
\ No newline at end of file
+ yield takeLatest(DEFAULT_ACTION, defaultFunction);
+};
diff --git a/generators/container/saga.test.js.hbs b/generators/container/saga.test.js.hbs
index 7c6acb1..fab4110 100644
--- a/generators/container/saga.test.js.hbs
+++ b/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)
- )
- })
-})
\ No newline at end of file
+ );
+ });
+});
diff --git a/generators/container/selectors.js.hbs b/generators/container/selectors.js.hbs
index 9b9611b..2b68957 100644
--- a/generators/container/selectors.js.hbs
+++ b/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)
\ No newline at end of file
+ createSelector(select{{ properCase name }}Domain, substate => substate);
+
+export const selectSomePayLoad = () =>
+ createSelector(select{{properCase name}}Domain, substate => substate.somePayLoad);
diff --git a/generators/container/selectors.test.js.hbs b/generators/container/selectors.test.js.hbs
index 9c97e6d..1da1a33 100644
--- a/generators/container/selectors.test.js.hbs
+++ b/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);
+ });
})
\ No newline at end of file
diff --git a/generators/container/test.js.hbs b/generators/container/test.js.hbs
index 0446d14..c00e849 100644
--- a/generators/container/test.js.hbs
+++ b/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()
- })
-})
\ No newline at end of file
+ );
+ expect(baseElement).toMatchSnapshot();
+ });
+});
diff --git a/package.json b/package.json
index 3d8c93c..8d8341d 100644
--- a/package.json
+++ b/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",