https://github.com/jayrbolton/flyd-crud
A flyd module for easy ajax CRUD operations on a collection of data
https://github.com/jayrbolton/flyd-crud
Last synced: 2 months ago
JSON representation
A flyd module for easy ajax CRUD operations on a collection of data
- Host: GitHub
- URL: https://github.com/jayrbolton/flyd-crud
- Owner: jayrbolton
- Created: 2017-04-05T22:13:52.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-27T23:41:38.000Z (about 8 years ago)
- Last Synced: 2025-02-13T09:36:11.149Z (3 months ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# flyd-crud
Easily manage a ajax in your UI logic of data using event streams.
## crud({options})
`options` is an object that can contain any number of properties for each different kind of ajax request that you want. The property name is an arbitrary name you can pick (eg 'create', 'index', 'read', 'fetch', 'update', 'destroy', etc, etc). The value of each property is a set of **request options**
The only reserved property name is **any**. This allows you to set defaults for all the other requests. The properties in your **any** options will get merged into the other request options.
Request options can include these properties:
* `method`: (required) the HTTP method for this request ('get', 'patch', 'put', 'post', 'delete', etc)
* `params$`: (required) a stream of data that triggers a new ajax request, with this data being sent as JSON in the request
* `path`: (required) string path for this request, or a function that receives the data from the `params$` stream and should return a string path
* `headers`: (optional) an object of header keys and values for the request
* `url`: (optional) the base url for this request, which the path gets appended to
* `onSuccess`: (optional) give an array of string names of other requests that you want to trigger when this request completes successfully (status === 200)
* `onStart`: (optional) an array of names of other requests that you want to trigger when this request starts
* `onFail`: (optional) an array of names of other requests that you want to trigger when this request fails (status !== 200)
```js
// Stream of new user objects, maybe from some form data
const newUser$ = flyd.stream()
// A stream of user objects that we want to delete on the server
const userToDelete$ = flyd.stream()
const users = flyd.crud({
// Options in "any" get merged into all the request below
// Here we are setting some global headers
any: {
headers: {'Content-Type': 'application/json'}
}
, create: {
method: 'post'
, params$: newUser$
, path: u => `/users/${u.id}`
, onSuccess: ['index']
}
, index: {
method: 'get'
, path: '/users'
, params$: userQuery$
}
, delete: {
method: 'delete'
, params$: userToDelete$
, path: u => `/users/delete?id=${u.id}`
, onSuccess: ['index']
}
})
userUpdates$({name: "Bob"})
users.loading$() // returns true
users.create.loading$() // returns true
// ... wait until request is finished
users.loading$() // returns false
users.create.loading$() // returns false
users.index.body$ // will receive the result of indexing users, triggered by the update using `onSuccess`
users.index.error$
userUpdates$({what: 'what'})
users.loading$() // true
// ...
users.loading$() // false
users.error$() // "Name is required"
users.body$() // -> [{name: "Bob", id: 1}]
```
## Return value
The return value of calling `flyd.crud({options})` is an object that contains helpful streams that indicate the status of your requests:
* `result.loading$`: boolean, whether any request still pending
* `result.error$`: the response body of an error result from the last request that had `status !== 200`
* `result.body$`: the response body of the last request that succeeded (where `status === 200`)
The returned object also has properties for each request name that you gave. Each property has its own status streams for `loading$`, `body$`, and `error$`. For example, if you had a request called `fetch`, then the resulting object will have `result.fetch.loading$`, `result.fetch.body$`, and `result.fetch.error$`