Skip to content

A flyd module for easy ajax CRUD operations on a collection of data

Notifications You must be signed in to change notification settings

jayrbolton/flyd-crud

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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)
// 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$

About

A flyd module for easy ajax CRUD operations on a collection of data

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published