Update connect to accept a function or object.

Author: adriaanwm

app/util/connect.js

@@ -1,11 +1,38 @@
 import {pipe} from 'wasmuth'
-import withStateFn from '/util/withState'
-import withRequestFn from '/util/withRequest'
+import withState from '/util/withState'
+import withRequests from '/util/withRequests'
 
-export const connect = ({withState, withRequest}) =>
-  pipe.apply(this, [
-    ...!!withRequest && [withRequestFn(withRequest)],
-    ...!!withState && [withStateFn(withState)]
-  ])
+/**
+ * It is very common to need a component that
+ *  - uses (and rerenders based on) some values in state
+ *  - gets some data from an api
+ *
+ * This HOC is meant to accomplish these two things with
+ * a minimum amount of boilerplate
+ *
+ * The mapper argument can either be:
+ *   1. a function like `(state, props) => ({withState: {...}, withRequests: {...}})`
+ *   2. or an object like `{withState: (state, props) => ({...}), withRequests: (state, props) => ({...})}`
+ *
+ * See withState and withRequests for instructions on what should be inside the objects `{...}`
+ *
+ * use option 1 when you need to use some value calculated in the mapper in both withState and withRequests,
+ * use option 2 when this is not the case, or you just need one of withState or withRequests
+ *
+ */
+export const connect = mapper => {
+  if (typeof mapper === 'function') {
+    return pipe.apply(this, [
+      withRequests((state, props) => mapper(state, props).withRequests || {}),
+      withState((state, props) => mapper(state, props).withState || {}),
+    ])
+  } else {
+    const {withRequests: withRequestsMapper, withState: withStateMapper} = mapper
+    return pipe.apply(this, [
+      ...!!withRequests && [withRequests(withRequestsMapper)],
+      ...!!withState && [withState(withStateMapper)]
+    ])
+  }
+}
 
 export default connect

app/util/withRequest.js renamed to app/util/withRequests.js

@@ -6,7 +6,7 @@ import compose from '/util/compose'
 export const invalidate = url =>
   dispatch(update(['invalidatedRequests'], {[url]: true}))
 
-export const withRequest = mapper => Component => compose({
+export const withRequests = mapper => Component => compose({
   componentWillMount () {
     const syncState = () => {
       const requests = mapper(getState(), this.props)
@@ -42,7 +42,7 @@ export const withRequest = mapper => Component => compose({
   }
 })
 
-export default withRequest
+export default withRequests
 
 const performRequests = requests =>
   map(

package-lock.json

@@ -38,6 +38,8 @@
     "redux-devtools-extension": "2.13.2",
     "replacer-brunch": "1.0.1",
     "throttle-debounce": "1.0.1",
+    "to-camel-case": "^1.0.0",
+    "to-snake-case": "^1.0.0",
     "uglify-js-brunch": "2.10.0",
     "wasmuth": "1.6.0"
   },