ghost-portal/examples/tut-004.md

storage via API (part II)

Previously we queried intentions via HOC, then followed up with querying via API. Here we will replace our previous HOC component with the same storage queries.

the component

Here we extend the component from the previous section, adding a subscription to intentions to create our new component -

class Comp extends React.PureComponent<ApiProps, State> {
  ...
  componentDidMount () {
    this.setState({
      subscriptions: [
        this.subscribeIntentions(),
        this.subscribeProposals()
      ]
    });
  }

  subscribeIntentions () {
    const { api } = this.props;

    return api.state
      .getStorage(storage.staking.public.intentions)
      .subscribe((intentions: StorageIntentions) => {
        this.setState({
          intentions: intentions.map(encodeAddress)
        });
      });
  }
  ...
}

walk-through

This subscription is much simpler than what was found before, however it follows the same basic approach - query, transform the result.

next steps

Next up, we will be using the actual data we have collected to render something useful on-screen.