glortho

import React from 'react';
import { apiDecorator } from 'jetset';

const doAsyncStuff = data => new Promise( resolve =>
  setTimeout(() =>
    resolve( data.map( item => ({ ...item, foo: 'bar' }) ) )
  )
);

const users = apiDecorator({

glortho

import React from 'react';
import { Api } from 'jetset';

function Users({ users }) {
  return (
    <div>
      { users.list().isPending ?
        <span>Loading...</span>
      :
        <span>

glortho

import React from 'react';
import { globalState, localState } from 'jetset';

/* without decorators you could do something like...

const usesGlobalState = globalState({ example: 'bar' });
const usesLocalState = localState({ localExample: 'foo' });
...
export default usesGlobalState( usesLocalState( CombinedStateExample ) );
*/

glortho

import { localState } from 'jetset';

@localState({ example: 'foo', example2: 'bar' })
class LocalStateExample extends React.Component {
  render() {
    return (
      <div>
        <div>
          <span>example state: { this.props.example.get() }</span>
          <button onClick={() => this.props.example.set( 'foo' )}>Set to foo</button>

glortho

import React from 'react';
import { container, Children } from 'jetset';

@container({ active: false })
class Panels extends React.Component {

  getActive = () => this.props.container.get().active;
  setActive = selected => this.props.container.set({ active: selected });

  render() {

glortho

import React from 'react';
import { globalState } from 'jetset';

@globalState({ example: 'foo', example2: 'bar' }, 'exampleWithNoInitialState')
class GlobalStateExample extends React.Component {
  render() {
    return (
      <div>
        <div>
          <span>example state: { this.props.example.get() }</span>

glortho

import React from 'react';
import { users } from './api_decorator';

@users
export default class RawApiExample extends React.Component {

  handleClick = () => this.props.users.api.post( '/1/albums', {} )

  render() {
    return (

glortho

import React from 'react';
import { users } from './api_decorator';

@users
export default class ApiSearchExample extends React.Component {

  constructor( props ) {
    super( props );
    this.state = { username: '' };
  }

glortho

import React from 'react';
import { users } from './api_decorator';

const UserDetail = users(({ users }) => {
  const user = users.list().data[0];
  if ( user ) {
    const detail = users.get( user.id );
    return (
      <div style={{ width: '48%' }}>
        {

glortho

import React from 'react'
import { apiDecorator } from 'jetset'

const users = apiDecorator({
  url: "https://jsonplaceholder.typicode.com",
  users: "/users"
})

@users
export default class UsersDecorated extends React.Component {