Version 7.2.0 (#29)

* feat: use hook for id; correct spacing; correct reducer keys

* chore: rev version; document library updates

* fix: correct key name in Ionic reducer

* fix: revert to minor version update

* chore: update peer and optional dependencies

* chore: update peer React dependencey to accommodate Ionic

* fix: correct Route path

generate.js

@@ -26,6 +26,7 @@ function generate (subSectionName, destination, options) {
   allFiles.forEach(file => {
     const template = fs.readFileSync(file, 'utf8')
     const result = template
+      .replace(/%subsection%/g, subSectionName)
       .replace(/%sub-section%/g, kebabCaseName)
       .replace(/%subSection%/g, camelCaseName)
       .replace(/%SubSection%/g, pascalCaseName)

ionic-template/Routes.js

@@ -13,7 +13,7 @@ function Routes () {
   return (
     <Layout>
       <IonRouterOutlet>
-        <Route exact path={`${path}/`}>
+        <Route exact path={path}>
           <Views.%SubSections% />
         </Route>
         <Route path={`${path}/:id`}>

ionic-template/reducer.js

@@ -4,19 +4,15 @@ import { handleActions } from 'redux-actions'
 // import * as actions from './actions'
 // import * as apiActions from 'api-actions'
 
-const reducerKey = '%subSection%'
-// const slice = 'root.%subSection%'
-
+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%'),

ionic-template/views/SubSectionShow.js

@@ -11,16 +11,14 @@ import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react'
 // import * as Types from 'types'
 
 const propTypes = {
-  // id: PropTypes.number.isRequired,
-  // %subSection%: Types.%subSection%,
+  // %subSection%: Types.%SubSection%,
   // fetch%SubSection%: PropTypes.func.isRequired,
   // clear%SubSection%: PropTypes.func.isRequired,
 }
 const defaultProps = {}
 
 function %SubSection%Show (
   // {
-  //   id,
   //   %subSection%,
   //   fetch%SubSection%,
   //   clear%SubSection%,
@@ -33,7 +31,9 @@ function %SubSection%Show (
   //  // Cleanup
   //  return () => clear%SubSection%()
   // }, [ id ])
+  //
   // if (!%subSection%) return <LoadingModal />
+  //
   return (
     <IonList>
       <IonListHeader>%SubSections% Show View</IonListHeader>

ionic-template/views/SubSections.js

@@ -10,7 +10,7 @@ import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react'
 // import * as apiActions from 'api-actions'
 
 const propTypes = {
-  // %subSections%: PropTypes.arrayOf(Types.%subSection%),
+  // %subSections%: PropTypes.arrayOf(Types.%SubSection%),
   // fetch%SubSections%: PropTypes.func.isRequired,
 }
 const defaultProps = {}
@@ -22,7 +22,9 @@ function %SubSections% (
   // }
 ) {
   // useEffect(() => { fetch%SubSections%() }, [])
+  //
   // if (!%subSections%) return <LoadingModal />
+  //
   return (
     <IonList>
       <IonListHeader>%SubSections% Index View</IonListHeader>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-subsection-generator",
-  "version": "7.1.1",
+  "version": "7.2.0",
   "description": "",
   "main": "index.js",
   "engines": {
@@ -18,24 +18,24 @@
   "author": "dpikt",
   "license": "ISC",
   "dependencies": {
-    "commander": "^8.3.0",
-    "fs-extra": "^4.0.2",
-    "glob": "^7.1.2",
+    "commander": "^9.4.1",
+    "fs-extra": "^11.1.0",
+    "glob": "^8.0.3",
     "lodash": "^4.17.11",
-    "pluralize": "^7.0.0"
+    "pluralize": "^8.0.0"
   },
   "devDependencies": {
     "@launchpadlab/eslint-config": "^2.1.0",
-    "eslint": "^4.11.0"
+    "eslint": "^7.32.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-redux": "^7.2.8",
+    "react": ">= 16",
+    "react-redux": "^7.2.8 || ^8.0.0",
     "react-router-dom": "^4.0.0 || ^5.0.0",
     "redux": "^4.1.2",
     "redux-actions": "^2.6.5"
   },
   "optionalDependencies": {
-    "@ionic/react": "^5.0.0"
+    "@ionic/react": ">= 5"
   }
 }

template/layout.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
 const propTypes = {
   children: PropTypes.node.isRequired,
 }
-
 const defaultProps = {}
 
 function Layout ({ children }) {
@@ -16,7 +15,6 @@ function Layout ({ children }) {
 }
 
 Layout.propTypes = propTypes
-
 Layout.defaultProps = defaultProps
 
 export default Layout

template/reducer.js

@@ -4,19 +4,15 @@ import { handleActions } from 'redux-actions'
 // import * as actions from './actions'
 // import * as apiActions from 'api-actions'
 
-const reducerKey = '%subSection%'
-// const slice = 'root.%subSection%'
-
+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%'),

template/views/SubSectionShow.js

@@ -2,43 +2,43 @@ 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 { Spinner } from 'lp-components'
-// import { connectParams } from 'lp-hoc'
 // import { selectors } from '../reducer'
 // import * as actions from '../actions'
 // import * as apiActions from 'api-actions'
 // import * as Types from 'types'
 
 const propTypes = {
-  // id: PropTypes.number.isRequired,
-  // %subSection%: Types.%subSection%,
+  // %subSection%: Types.%SubSection%,
   // fetch%SubSection%: PropTypes.func.isRequired,
   // clear%SubSection%: PropTypes.func.isRequired,
 }
-
 const defaultProps = {}
 
-function %SubSection%Show (  
-  // { 
-  //   id,
-  //   %subSection%, 
+function %SubSection%Show (
+  // {
+  //   %subSection%,
   //   fetch%SubSection%,
   //   clear%SubSection%,
   // }
 ) {
-  // useEffect(() => { 
+  const { id } = useParams()
+  //
+  // useEffect(() => {
   //  fetch%SubSection%(id)
   //  // Cleanup
   //  return () => clear%SubSection%()
   // }, [ id ])
+  //
   // if (!%subSection%) return <Spinner />
+  //
   return (
     <div> This is the %SubSection% show view! </div>
   )
 }
 
 %SubSection%Show.propTypes = propTypes
-
 %SubSection%Show.defaultProps = defaultProps
 
 function mapStateToProps (/* state */) {
@@ -53,6 +53,5 @@ const mapDispatchToProps = {
 }
 
 export default compose(
-  // connectParams('id'),
   connect(mapStateToProps, mapDispatchToProps),
 )(%SubSection%Show)

template/views/SubSections.js

@@ -9,27 +9,27 @@ import { connect } from 'react-redux'
 // import * as apiActions from 'api-actions'
 
 const propTypes = {
-  // %subSections%: PropTypes.arrayOf(Types.%subSection%),
+  // %subSections%: PropTypes.arrayOf(Types.%SubSection%),
   // fetch%SubSections%: PropTypes.func.isRequired,
 }
-
 const defaultProps = {}
 
 function %SubSections% (
-  // { 
-  //   %subSections%, 
+  // {
+  //   %subSections%,
   //   fetch%SubSections%,
   // }
 ) {
   // useEffect(() => { fetch%SubSections%() }, [])
+  //
   // if (!%subSections%) return <Spinner />
+  //
   return (
     <div> This is the %SubSection% index view! </div>
   )
 }
 
 %SubSections%.propTypes = propTypes
-
 %SubSections%.defaultProps = defaultProps
 
 function mapStateToProps (/* state */) {