@lab009/teide-data-view

Lightweight data view abstraction for managing fetching/loaded/errored states for remote data

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@lab009/teide-data-view
4.0.0-beta.14 years ago5 years agoMinified + gzip package size for @lab009/teide-data-view in KB

Readme

@lab009/teide-data-view
Simple component for managing asynchronous data dependency states. If you have a view with 3 base states: fetching, loaded, and errored - this will help you clean up a lot of boilerplate. Works out of the box with @lab009/erebus for doing API stuff.

Install

npm install --save @lab009/teide-data-view

API

You can define three functions:
  • resolveData
- Defaults to doing nothing - Triggered on mount/update when any storeProps (what you give to teide's connect function) are not fulfilled - Responsible for dispatching any actions to fetch data
  • renderData
- Defaults to displaying nothing - Triggered when all storeProps are resolved - Receives a data object as an argument - Responsible for rendering the data
  • renderLoader
- Defaults to displaying nothing - Triggered when all storeProps are not resolved - Responsible for rendering a loader
  • renderErrors
- Defaults to displaying nothing - Triggered when any storeProp value has an error attribute - Receives an errors Map as an argument
- Key is the storeProp
- Value is the error object
- Responsible for rendering any errors that happened while fetching data

Example

import React from 'react'
import { PropTypes, connect } from '@lab009/teide'
import DataComponent from '@lab009/teide-data-view'
import actions from 'core/actions'

@connect({
  users: 'subsets.users'
})
export default class UserList extends DataComponent {
  static propTypes = {
    users: PropTypes.iterable
  }

  resolveData() {
    actions.api.users.find({ subset: 'users' })
  }

  renderData({ users }) {
    return (
      <div>
        <h1>{users.size} Users</h1>
        <ul>
        {
          users.map(user =>
            <li key={user.get('id')}>{user.get('name')}</li>
          )
        }
        </ul>
      </div>
    )
  }

  renderLoader () {
    return (
      <h1>Loading...</h1>
    )
  }

  renderErrors(errors) {
    return (
      <ul>
        {
          errors.map((err, field) =>
            <li key={field}>{field}: {err.message}</li>
          )
        }
      </ul>
    )
  }
}