forked from masylum/mobx-rest
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
1,175 additions
and
772 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,34 +15,35 @@ npm install mobx-rest --save | |
## What is it? | ||
|
||
MobX is great to represent RESTful resources. Each resource can be represented | ||
with a store which will have exactly the same actions (create, fetch, save, destroy). | ||
with a store which will the expected REST actions (`create`, `fetch`, `save`, `destroy`, ...). | ||
|
||
Instead of writing hundreds of boilerplate lines we can leverage REST conventions | ||
to deal with backend interactions. | ||
|
||
You can provide your own API to talk to you backend of choice. I added a folder | ||
`api_client_examples` with an ajax example. | ||
to deal with your API interactions. | ||
|
||
## Example | ||
|
||
```js | ||
const apiPath = 'http://localhost:8000/api' | ||
import { Collection, Model } from 'mobx-rest' | ||
import { Api } from './Api' | ||
import { observer } from 'mobx-react' | ||
const apiPath = '/api' | ||
import jqueryAdapter from 'mobx-rest-jquery-adapter' | ||
import { apiClient, Collection, Model } from 'mobx-rest' | ||
|
||
// Set the adapter | ||
apiClient(jqueryAdapter, { apiPath }) | ||
|
||
class Task extends Model { } | ||
class Tasks extends Collection { | ||
basePath () { | ||
return `${apiPath}/tasks` | ||
url () { | ||
return `/tasks` | ||
} | ||
|
||
model () { | ||
return Task | ||
} | ||
} | ||
|
||
const tasks = new Tasks([], Api) | ||
const tasks = new Tasks() | ||
|
||
import { observer } from 'mobx-react' | ||
|
||
@observer | ||
class Companies extends React.Component { | ||
|
@@ -55,8 +56,8 @@ class Companies extends React.Component { | |
} | ||
|
||
render () { | ||
if (tasks.request) { | ||
return <span>Loading...</span> | ||
if (tasks.isRequest('fetching')) { | ||
return <span>Fetching tasks...</span> | ||
} | ||
|
||
return <ul>{tasks.models.map(this.renderTask.bind(this))}</ul> | ||
|
@@ -71,34 +72,35 @@ Your tree will have the following schema: | |
|
||
```js | ||
models: [ | ||
{ // Information at the resource level | ||
uuid: String, // Client side id. Used for optimistic updates | ||
request: { // An ongoing request | ||
label: String, // Examples: 'updating', 'creating', 'fetching', 'destroying' ... | ||
abort: Function, // A method to abort the ongoing request | ||
{ // Information at the resource level | ||
optimisticId: String, // Client side id. Used for optimistic updates | ||
request: { // An ongoing request | ||
label: String, // Examples: 'updating', 'creating', 'fetching', 'destroying' ... | ||
abort: Function, // A method to abort the ongoing request | ||
}, | ||
error: { // A failed request | ||
label: String, // Examples: 'updating', 'creating', 'fetching', 'destroying' ... | ||
body: String, // A string representing the error | ||
error: { // A failed request | ||
label: String, // Examples: 'updating', 'creating', 'fetching', 'destroying' ... | ||
body: String, // A string representing the error | ||
}, | ||
attributes: Object // The resource attributes | ||
attributes: Object // The resource attributes | ||
} | ||
] // Information at the collection level | ||
request: { // An ongoing request | ||
label: String, // Examples: 'updating', 'creating', 'fetching', 'destroying' ... | ||
abort: Function, // A method to abort the ongoing request | ||
] // Information at the collection level | ||
request: { // An ongoing request | ||
label: String, // Examples: 'updating', 'creating', 'fetching', 'destroying' ... | ||
abort: Function, // A method to abort the ongoing request | ||
progress: number // If uploading a file, represents the progress | ||
}, | ||
error: { // A failed request | ||
label: String, // Examples: 'updating', 'creating', 'fetching', 'destroying' ... | ||
body: Object, // A string representing the error | ||
error: { // A failed request | ||
label: String, // Examples: 'updating', 'creating', 'fetching', 'destroying' ... | ||
body: Object, // A string representing the error | ||
} | ||
``` | ||
|
||
## License | ||
|
||
(The MIT License) | ||
|
||
Copyright (c) 2016 Pau Ramon <[email protected]> | ||
Copyright (c) 2017 Pau Ramon <[email protected]> | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: | ||
|
||
|
Oops, something went wrong.