diff --git a/MIGRATION.md b/MIGRATION.md index c2ffe00..f464c82 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -5,3 +5,5 @@ Version 7 of the lp-subsection-generator introduced the following changes that m 1. Version 7 of the lp-subsection-generator requires that a Node version >= Node 12 be installed. 1. The lp-subsection-generator argument `subsection-name` is now required. Previously, this argument was optional and would default to `sub-section`. +## Migration to Version ^8.0.0 +Version 8 requires `@reduxjs/toolkit`, which is now standard across LPL's client templates. \ No newline at end of file diff --git a/ionic-template/actions.js b/ionic-template/actions.js deleted file mode 100644 index 62d0b04..0000000 --- a/ionic-template/actions.js +++ /dev/null @@ -1,3 +0,0 @@ -// import { createAction } from 'redux-actions' - -// export const clear%SubSection% = createAction('CLEAR_%SUB_SECTION%') diff --git a/ionic-template/index.js b/ionic-template/index.js index a75f578..1c31eeb 100644 --- a/ionic-template/index.js +++ b/ionic-template/index.js @@ -1,2 +1,2 @@ export { default as Routes } from './Routes' -export { reducer, reducerKey } from './reducer' +export { default as reducer, name as reducerKey } from './slice' diff --git a/ionic-template/reducer.js b/ionic-template/reducer.js deleted file mode 100644 index a4f9c66..0000000 --- a/ionic-template/reducer.js +++ /dev/null @@ -1,21 +0,0 @@ -import { handleActions } from 'redux-actions' -// import { selectorForSlice, unsetState } from 'lp-redux-utils' -// import { setOnSuccess } from 'lp-redux-api' -// import * as actions from './actions' -// import * as apiActions from 'api-actions' - -const reducerKey = '%subsection%' -// const slice = 'root.%subsection%' -const initialState = {} -const reducer = handleActions({ - // [apiActions.fetch%SubSections%]: setOnSuccess('%subSections%'), - // [apiActions.fetch%SubSection%]: setOnSuccess('%subSection%'), - // [actions.clear%SubSection%]: unsetState('%subSection%'), -}, initialState) -// const select = selectorForSlice(slice) -const selectors = { - // %subSections%: select('%subSections%'), - // %subSection%: select('%subSection%'), -} - -export { reducer, selectors, reducerKey } diff --git a/ionic-template/slice.js b/ionic-template/slice.js new file mode 100644 index 0000000..2dddcd3 --- /dev/null +++ b/ionic-template/slice.js @@ -0,0 +1,39 @@ +import { createSlice } from '@reduxjs/toolkit' +// import { selectorForSlice } from 'lp-redux-utils' +// import * as apiActions from 'api-actions' +// import { handleSuccess } from 'lp-redux-api' + +export const name = '%subsection%' +const initialState = {} + +const slice = createSlice({ + name, + initialState, + reducers: { + // clear%SubSection% () { + // state.%subSection% = null + // } + }, + extraReducers: (/* builder */) => { + // builder.addCase( + // apiActions.fetch%SubSections%, + // handleSuccess((state, action) => { + // state.%subSections% = action.payload.data + // }) + // ) + // builder.addCase( + // apiActions.fetch%SubSection%, + // handleSuccess((state, action) => { + // state.%subSection% = action.payload.data + // }) + // ) + }, +}) + +// const select = selectorForSlice(`root.${name}`) +export const selectors = { + // %subSections%: select('%subSections%'), + // %subSection%: select('%subSection%'), +} +// export const { clear%SubSection% } = slice.actions +export default slice.reducer \ No newline at end of file diff --git a/ionic-template/views/SubSectionShow.js b/ionic-template/views/SubSectionShow.js index 3695ba8..ac80e18 100644 --- a/ionic-template/views/SubSectionShow.js +++ b/ionic-template/views/SubSectionShow.js @@ -1,46 +1,35 @@ import React /*, { useEffect } */ from 'react' // import PropTypes from 'prop-types' -import { compose } from 'redux' -import { connect } from 'react-redux' +// import * as Types from 'types' +// import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react' // import { LoadingModal } from 'components' -// import { selectors } from '../reducer' -// import * as actions from '../actions' +// import { clear%SubSection%, selectors } from '../reducer' // import * as apiActions from 'api-actions' -// import * as Types from 'types' -const propTypes = { - // %subSection%: Types.%SubSection%, - // fetch%SubSection%: PropTypes.func.isRequired, - // clear%SubSection%: PropTypes.func.isRequired, -} +const propTypes = {} const defaultProps = {} -function %SubSection%Show ( - // { - // %subSection%, - // fetch%SubSection%, - // clear%SubSection%, - // } -) { - const { id } = useParams() - // +function %SubSection%Show () { + // const { id } = useParams() + // const %subSection% = useSelector(selectors.%subSection%) + // const dispatch = useDispatch() // useEffect(() => { - // fetch%SubSection%(id) + // dispatch(apiActions.fetch%SubSection%(id)) // // Cleanup - // return () => clear%SubSection%() - // }, [ id ]) + // return () => dispatch(clear%SubSection%()) + // }, [dispatch, id]) // // if (!%subSection%) return // return ( - %SubSections% Show View + %SubSection% Show View

- This is the %SubSections% show view for id: [{id}]. + This is the %SubSection% show view for id: [{id}].

@@ -63,17 +52,4 @@ function %SubSection%Show ( %SubSection%Show.propTypes = propTypes %SubSection%Show.defaultProps = defaultProps -function mapStateToProps (/* state */) { - return { - // %subSection%: selectors.%subSection%(state) - } -} - -const mapDispatchToProps = { - // fetch%SubSection%: apiActions.fetch%SubSection%, - // clear%SubSection%: actions.clear%SubSection% -} - -export default compose( - connect(mapStateToProps, mapDispatchToProps), -)(%SubSection%Show) +export default %SubSection%Show \ No newline at end of file diff --git a/ionic-template/views/SubSections.js b/ionic-template/views/SubSections.js index 648b84b..7824a56 100644 --- a/ionic-template/views/SubSections.js +++ b/ionic-template/views/SubSections.js @@ -1,27 +1,21 @@ import React /*, { useEffect } */ from 'react' // import PropTypes from 'prop-types' // import * as Types from 'types' -import { compose } from 'redux' -import { connect } from 'react-redux' +// import { useDispatch, useSelector } from 'react-redux' import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react' // import { LoadingModal } from 'components' -// import { selectors } from '../reducer' -// import * as actions from '../actions' +// import { selectors } from '../slice' // import * as apiActions from 'api-actions' -const propTypes = { - // %subSections%: PropTypes.arrayOf(Types.%SubSection%), - // fetch%SubSections%: PropTypes.func.isRequired, -} +const propTypes = {} const defaultProps = {} -function %SubSections% ( - // { - // %subSections%, - // fetch%SubSections%, - // } -) { - // useEffect(() => { fetch%SubSections%() }, []) +function %SubSections% () { + // const %subSections% = useSelector(selectors.%subSections%) + // const dispatch = useDispatch() + // useEffect(() => { + // dispatch(apiActions.fetch%SubSections%()) + // }, [dispatch]) // // if (!%subSections%) return // @@ -54,16 +48,4 @@ function %SubSections% ( %SubSections%.propTypes = propTypes %SubSections%.defaultProps = defaultProps -function mapStateToProps (/* state */) { - return { - // %subSections%: selectors.%subSections%(state), - } -} - -const mapDispatchToProps = { - // fetch%SubSections%: apiActions.fetch%SubSections%, -} - -export default compose( - connect(mapStateToProps, mapDispatchToProps), -)(%SubSections%) +export default %SubSections% diff --git a/package.json b/package.json index 7208824..5294022 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@launchpadlab/lp-subsection-generator", - "version": "7.2.1", + "version": "8.0.0", "description": "", "main": "index.js", "engines": { @@ -29,6 +29,7 @@ "eslint": "^7.32.0" }, "peerDependencies": { + "@reduxjs/toolkit": "^1.9.5", "react": ">= 16", "react-redux": "^7.2.8 || ^8.0.0", "react-router-dom": "^4.0.0 || ^5.0.0", diff --git a/template/actions.js b/template/actions.js deleted file mode 100644 index 62d0b04..0000000 --- a/template/actions.js +++ /dev/null @@ -1,3 +0,0 @@ -// import { createAction } from 'redux-actions' - -// export const clear%SubSection% = createAction('CLEAR_%SUB_SECTION%') diff --git a/template/index.js b/template/index.js index a75f578..1c31eeb 100644 --- a/template/index.js +++ b/template/index.js @@ -1,2 +1,2 @@ export { default as Routes } from './Routes' -export { reducer, reducerKey } from './reducer' +export { default as reducer, name as reducerKey } from './slice' diff --git a/template/reducer.js b/template/reducer.js deleted file mode 100644 index a4f9c66..0000000 --- a/template/reducer.js +++ /dev/null @@ -1,21 +0,0 @@ -import { handleActions } from 'redux-actions' -// import { selectorForSlice, unsetState } from 'lp-redux-utils' -// import { setOnSuccess } from 'lp-redux-api' -// import * as actions from './actions' -// import * as apiActions from 'api-actions' - -const reducerKey = '%subsection%' -// const slice = 'root.%subsection%' -const initialState = {} -const reducer = handleActions({ - // [apiActions.fetch%SubSections%]: setOnSuccess('%subSections%'), - // [apiActions.fetch%SubSection%]: setOnSuccess('%subSection%'), - // [actions.clear%SubSection%]: unsetState('%subSection%'), -}, initialState) -// const select = selectorForSlice(slice) -const selectors = { - // %subSections%: select('%subSections%'), - // %subSection%: select('%subSection%'), -} - -export { reducer, selectors, reducerKey } diff --git a/template/slice.js b/template/slice.js new file mode 100644 index 0000000..2dddcd3 --- /dev/null +++ b/template/slice.js @@ -0,0 +1,39 @@ +import { createSlice } from '@reduxjs/toolkit' +// import { selectorForSlice } from 'lp-redux-utils' +// import * as apiActions from 'api-actions' +// import { handleSuccess } from 'lp-redux-api' + +export const name = '%subsection%' +const initialState = {} + +const slice = createSlice({ + name, + initialState, + reducers: { + // clear%SubSection% () { + // state.%subSection% = null + // } + }, + extraReducers: (/* builder */) => { + // builder.addCase( + // apiActions.fetch%SubSections%, + // handleSuccess((state, action) => { + // state.%subSections% = action.payload.data + // }) + // ) + // builder.addCase( + // apiActions.fetch%SubSection%, + // handleSuccess((state, action) => { + // state.%subSection% = action.payload.data + // }) + // ) + }, +}) + +// const select = selectorForSlice(`root.${name}`) +export const selectors = { + // %subSections%: select('%subSections%'), + // %subSection%: select('%subSection%'), +} +// export const { clear%SubSection% } = slice.actions +export default slice.reducer \ No newline at end of file diff --git a/template/views/SubSectionShow.js b/template/views/SubSectionShow.js index ed5c735..244e717 100644 --- a/template/views/SubSectionShow.js +++ b/template/views/SubSectionShow.js @@ -1,35 +1,25 @@ import React /*, { useEffect } */ from 'react' // import PropTypes from 'prop-types' -import { compose } from 'redux' -import { connect } from 'react-redux' -import { useParams } from 'react-router-dom' +// import * as Types from 'types' +// import { useDispatch, useSelector } from 'react-redux' +// import { useParams } from 'react-router-dom' // import { Spinner } from 'lp-components' -// import { selectors } from '../reducer' -// import * as actions from '../actions' +// import { clear%SubSection%, selectors } from '../slice' // import * as apiActions from 'api-actions' -// import * as Types from 'types' -const propTypes = { - // %subSection%: Types.%SubSection%, - // fetch%SubSection%: PropTypes.func.isRequired, - // clear%SubSection%: PropTypes.func.isRequired, -} +const propTypes = {} const defaultProps = {} -function %SubSection%Show ( - // { - // %subSection%, - // fetch%SubSection%, - // clear%SubSection%, - // } -) { - const { id } = useParams() +function %SubSection%Show () { + // const { id } = useParams() + // const %subSection% = useSelector(selectors.%subSection%) + // const dispatch = useDispatch() // // useEffect(() => { - // fetch%SubSection%(id) + // dispatch(apiActions.fetch%SubSection%(id)) // // Cleanup - // return () => clear%SubSection%() - // }, [ id ]) + // return () => dispatch(clear%SubSection%()) + // }, [dispatch, id]) // // if (!%subSection%) return // @@ -41,17 +31,4 @@ function %SubSection%Show ( %SubSection%Show.propTypes = propTypes %SubSection%Show.defaultProps = defaultProps -function mapStateToProps (/* state */) { - return { - // %subSection%: selectors.%subSection%(state) - } -} - -const mapDispatchToProps = { - // fetch%SubSection%: apiActions.fetch%SubSection%, - // clear%SubSection%: actions.clear%SubSection% -} - -export default compose( - connect(mapStateToProps, mapDispatchToProps), -)(%SubSection%Show) +export default %SubSection%Show \ No newline at end of file diff --git a/template/views/SubSections.js b/template/views/SubSections.js index cb5b2f7..bee5a78 100644 --- a/template/views/SubSections.js +++ b/template/views/SubSections.js @@ -1,26 +1,19 @@ import React /*, { useEffect } */ from 'react' // import PropTypes from 'prop-types' // import * as Types from 'types' -import { compose } from 'redux' -import { connect } from 'react-redux' +// import { useDispatch, useSelector } from 'react-redux' // import { Spinner } from 'lp-components' -// import { selectors } from '../reducer' -// import * as actions from '../actions' +// import { selectors } from '../slice' // import * as apiActions from 'api-actions' -const propTypes = { - // %subSections%: PropTypes.arrayOf(Types.%SubSection%), - // fetch%SubSections%: PropTypes.func.isRequired, -} +const propTypes = {} const defaultProps = {} -function %SubSections% ( - // { - // %subSections%, - // fetch%SubSections%, - // } -) { - // useEffect(() => { fetch%SubSections%() }, []) +function %SubSections% () { + // const dispatch = useDispatch() + // useEffect(() => { + // dispatch(apiActions.fetch%SubSections%()) + // }, [dispatch]) // // if (!%subSections%) return // @@ -32,16 +25,4 @@ function %SubSections% ( %SubSections%.propTypes = propTypes %SubSections%.defaultProps = defaultProps -function mapStateToProps (/* state */) { - return { - // %subSections%: selectors.%subSections%(state), - } -} - -const mapDispatchToProps = { - // fetch%SubSections%: apiActions.fetch%SubSections%, -} - -export default compose( - connect(mapStateToProps, mapDispatchToProps), -)(%SubSections%) +export default %SubSections% \ No newline at end of file