Giter VIP home page Giter VIP logo

flyd-crud's Introduction

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$

flyd-crud's People

Contributors

jayrbolton avatar

Stargazers

Yutaka Houlette avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.