@lab009/teide-data-view

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

Stats

StarsIssuesVersionUpdatedCreatedSize
@lab009/teide-data-view
0134.0.0-beta.13 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>
    )
  }
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.