Add resource object shorthand syntax and refactor examples

README.md

@@ -127,8 +127,6 @@ The payload can be a massive object containing lots of information about the HTT
 
 For details on mapProps, read the [react-redux connect()](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) documentation.
 
-For the full list of options, see [bindResource](docs/bindResource.md).
-
 ## Installation
 
 ```

docs/api.md

@@ -40,62 +40,55 @@ import { todos, posts, users } from './resources'
 
 Check the [documentation](resources.md) on resources for information about using resources and what kind of props they can offer for your React components.
 
-### [bindResource](docs/bindResource.md)
-
-You can use `bindResource` to automatically wire up all of the resource props as well as "fetch on mount" and "reset on unmount" behavior for a component. This is useful for page-level components that are associated to a particular resource.
-
-Please read [bindResource.md](docs/bindResource.md) for more details.
-
 ### Creating a Basic Component
 
 When rendering your resource state, be sure to check the `ready` and `error` states before attempting to use the `payload`.
 
 ```js
-import React from 'react'
-import PropTypes from 'prop-types'
-import { bindResource, createClient } from 'redux-supermodel'
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { createClient } from 'redux-supermodel'
 
 const client = createClient('http://jsonplaceholder.typicode.com')
 const todos = client.createCollection('todos', { urlRoot: 'todos' })
 
-export default function TodoList ({createTodos, ready, error, rows}) {
-  if (!ready) return <div className="loading">Please wait...</div>
-  if (error) return <div className="error">{error.response.data}</div>
+export class TodoList extends Component {
+  componentDidMount = () => this.props.fetch()
+
+  componentWillUnmount = () => this.props.reset()
 
-  return (
-    <div>
+  render () {
+    const { create, ready, error, rows } = this.props
+    if (!ready) return <div className="loading">Please wait...</div>
+    if (error) return <div className="error">{error.response.data}</div>
+
+    return (
       <div>
-        <button type="button" onClick={() => createTodos({title: 'new item'})}>
-          Create
-        </button>
+        <div>
+          <button type="button" onClick={create}>
+            Create
+          </button>
+        </div>
+        <table>
+          <tbody>{rows && rows.map(todo => <tr key={row.id}><td>{row.title}</td></tr>)}</tbody>
+        </table>
       </div>
-      <table>
-        <tbody>{rows && rows.map(todo => <tr key={row.id}><td>{row.title}</td></tr>)}</tbody>
-      </table>
-    </div>
-  )
+    )
+  }
 }
 
-TodoList.propTypes = {
-  createTodos: PropTypes.func,
-  ready: PropTypes.bool,
-  error: PropTypes.object,
-  rows: PropTypes.array
+export mapProps = state => {
+  const { ready, error, payload: { data } } = todos(state)
+  return { ready, error, rows: data }
 }
 
-export function mergeProps (stateProps, dispatchProps, ownProps) {
-  const { ready, error, payload } = stateProps.todos
-
-  return {
-    ...ownProps,
-    ...dispatchProps,
-    ready,
-    error,
-    rows: payload && payload.data
-  }
+const actions = {
+  fetch: todos.fetch,
+  create: () => todos.create({ title: 'new item' }),
+  reset: todos.reset,
 }
 
-export default bindResource({ todos }, { mergeProps })(TodoList)
+export default connect(mapProps, actions)(TodoList)
 ```
 
 #### PropTypes

docs/resources.md

@@ -12,9 +12,25 @@ export const todos = client('todos')
 
 // https://example.com/api/posts.json
 export const posts = client('posts', { url: 'posts.json' })
+
+// https://example.com/api/blogs/hello-world
+export const blogs = client('blogs', { urlRoot: 'blogs', idAttribute: 'slug' })
+blogs.fetch({ slug: 'hello-world' })
+```
+
+You can also pass an object to the client to define multiple resources at once.
+
+```js
+const resources = client({
+  todos: true,
+  posts: { url: 'posts.json' },  
+})
+
+// same as client('todos') and client('posts', { url: 'posts.json' })
+const { todos, posts } = resources
 ```
 
-The rest of this document is going to go into more detail about how resources work, but if you're just browsing, you can skip all of the boring details and go directly to [bindResource](bindResource.md) which will show you how to connect your new resource to your React components!
+The rest of this document is going to go into more detail about how resources work and what you can do with them.
 
 ## `client(name, options)`