shasta-data-view

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

Usage no npm install needed!

<script type="module">
  import shastaDataView from 'https://cdn.skypack.dev/shasta-data-view';
</script>

README

shasta-data-view NPM version Downloads Build Status

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 tahoe for doing API stuff.

This is a work in progress - There is sparse documentation, no tests, and it's not on npm. Use at your own risk while we finish up!

Install

npm install shasta-data-view --save

API

You can define three functions:

  • resolveData
    • Defaults to doing nothing
    • Triggered on mount/update when any storeProps (what you give to shasta'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 'shasta'
import actions from 'core/actions'
import DataComponent from 'shasta-data-view'

@connect({ users: 'api.subsets.users' })
class UserList extends DataComponent {
  static displayName = 'UserList';
  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>
        ).toArray()
      }
    </ul>)
  }
}