match-summary.js

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import { MatchSummary, NoDataSummary } from '@mls-digital/react-components';
import MatchSummaryQuery from './match-summary.graphql';

const mapResultsToProps = ({ data }) => {
  if (!data.match)
    return {
      loading: data.loading,
    };

  const { stats, home, away } = data.match;

  return {
    loading: data.loading,
    home: {
      ...home,
      results: stats.scores.home,
    },
    away: {
      ...away,
      results: stats.scores.away,
    },
  };
};

const mapPropsToOptions = ({ id, season, shouldPoll }) => {
  return {
    variables: {
      id,
      season,
    },
    pollInterval: shouldPoll ? 1000 * 60 : undefined,
  };
};

@graphql(MatchSummaryQuery, {
  props: mapResultsToProps,
  options: mapPropsToOptions,
})
class MatchSummaryContainer extends Component {
  render() {
    const { loading, ...matchSummaryProps } = this.props;

    if (loading && !matchSummaryProps.home) {
      return <NoDataSummary />;
    }

    return <MatchSummary {...matchSummaryProps} />;
  }
}

export default MatchSummaryContainer;