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;
    const key = createStorageKey(intentionsMethod)();
    const transform = storageTransform(intentionsMethod);

    return api.state
      .getStorage(key)
      .subscribe((value) => {
        this.setState({
          intentions: (transform(value, 0) as any[]).map(encodeAddress)
        });
      });
  }
  ...
}

walk-through

This subscription is much simpler than what was found before, however it follows the same basic approach - query, transform - in this case the transform is the same as the one applied even for the HOC component.

next steps

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