Demo of withData useage for internal presentation

Data-demo.jsx

import { withData } from 'perch-data';
import ChartWidget from '../Shared/ObservableDashboard/ChartWidget';
import { getObservableResults } from '../../actions/search';

class ActivityByCommunity extends React.Component {
  constructor(props) {
    super(props);
    this.state = { sortDirection: 'desc' };
  }

  componentWillReceiveProps(nextProps) {
    const { days, community, q, data: { observableStats } } = this.props;
    if (days !== nextProps.days) {
      observableStats.applyParams({ days: nextProps.days });
    }
    if (community !== nextProps.community) {
      observableStats.applyParams({ community: nextProps.community });
    }
    if (q !== nextProps.q) {
      observableStats.applyParams({ q: nextProps.q });
    }
  }

  setDirection = direction => this.setState({ sortDirection: direction });

  sortData = data => (
    this.state.sortDirection === 'asc'
      ? data.sort((a, b) => a.value > b.value)
      : data.sort((a, b) => a.value < b.value)
  );

  render() {
    const { data: { observableStats } } = this.props;
    const dataLoaded = !observableStats.loading && !observableStats.errors;
    const sortedData = dataLoaded && _.size(observableStats.activities_per_community) > 0
      ? this.sortData(observableStats.activities_per_community)
      : {};
    return (
      <ChartWidget
        title="Observations By Community"
        chartType="bar"
        legendType="tag"
        chartData={sortedData}
        onSort={this.setDirection}
        isLoading={observableStats.loading}
      />
    );
  }
}

ActivityByCommunity.propTypes = {
  data: PropTypes.shape({
    observableStats: PropTypes.shape({}),
  }).isRequired,
  days: PropTypes.string.isRequired,
  community: PropTypes.string.isRequired,
  q: PropTypes.string.isRequired,
};

export default withData({
  observableStats: [({ q, days, community }) =>
    getObservableResults({ q, types: 'activities', days, community }), { maxAge: 60 }],
})(ActivityByCommunity);

withData-demo.jsx

import { Data } from 'perch-data';
import ChartWidget from '../Shared/ObservableDashboard/ChartWidget';
import { getObservableResults } from '../../actions/search';

class ActivityByCommunity extends React.Component {
  constructor(props) {
    super(props);
    this.state = { sortDirection: 'desc' };
  }

  setDirection = direction => this.setState({ sortDirection: direction });

  sortData = data => (
    this.state.sortDirection === 'asc'
      ? data.sort((a, b) => a.value > b.value)
      : data.sort((a, b) => a.value < b.value)
  );

  render() {
    const { q, days, community } = this.props;
    return (
      <Data
        action={getObservableResults}
        variables={{ q, types: 'activities', days, community }}
        options={{ maxAge: 60 }}
      >
        {({ data, loading }) => (
          <ChartWidget
            title="Observations By Community"
            chartType="bar"
            legendType="tag"
            chartData={data ? this.sortData(data.activities_per_community) : {}}
            onSort={this.setDirection}
            isLoading={loading}
          />
        )}
      </Data>
    );
  }
}

ActivityByCommunity.propTypes = {
  days: PropTypes.string.isRequired,
  community: PropTypes.string.isRequired,
  q: PropTypes.string.isRequired,
};

export default ActivityByCommunity;