Could not able to find component name playlyfe/relay-no-missing-variable-in-props

[yashcr07]

/* @flow */
class _AgentStats extends React.Component {
  props: Props;

  render() {
    const today = convertDate(Date.now());
    const { competitionScorecard } = this.props.agent;
    return (
      <div className={css.container}>
        <div className={css.timeline}>
          <AgentMetricSparkline
            agentGID={this.props.agentGID}
            metricID={SPECIAL_METRICS.competitionPoints.sid}
            competitionID={this.props.competitionID}
            interval={this.props.interval}
            width={700}
            height={60}
            onChange={this._handleDateChange}
          />
          <div className={css.dateControl}>
            <View
              className={css.switcher}
              onClick={this._onDateChange('previous')}
            >
              <IconPrev />
            </View>
            <div className={css.date}>
              {this._renderDate()}
            </div>
            <View
              className={
                this.props.relay.variables.date !== today
                  ? css.switcher
                  : cx(css.switcher, css.switcherDisabled)
              }
              onClick={
                this.props.relay.variables.date !== today
                  ? this._onDateChange('next')
                  : null
              }
            >
              <IconNext />
            </View>
          </div>
        </div>
        {competitionScorecard.entries.map(entry =>
          <CompetitionMetricBreakup
            key={entry.metric.sid}
            breakup={entry}
            onSelect={this.props.action('toggleStats')}
            isOpened={this.props.selectedMetric === entry.metric.sid}
          >
            {this._renderStats(entry)}
          </CompetitionMetricBreakup>,
        )}
      </div>
    );
  }
}

const _AgentStatsReduxComponent = stateComponent(
  inject(_AgentStats, ['intl']),
  {
    initialState: {
      selectedMetric: null,
    },
    actions: {
      toggleStats(state, value) {
        if (state.selectedMetric === value) {
          return update(state, {
            selectedMetric: { $set: null },
          });
        }
        return update(state, {
          selectedMetric: { $set: value },
        });
      },
    },
    mapStateToProps(state) {
      return {
        selectedMetric: state.selectedMetric,
      };
    },
  },
);

const _AgentStatsRelayContainer = Relay.createContainer(
  _AgentStatsReduxComponent,
  {
    initialVariables: {
      competitionID: null,
      date: convertDate(Date.now()),
    },
    fragments: {
      agent: () => Relay.QL`
      fragment on Agent {
        competitionScorecard(
          competitionID: $competitionID,
          from: $date,
          to: $date,
        ) {
          entries {
            ${CompetitionMetricBreakup.getFragment('breakup')}
          }
        }
      }
    `,
    },
  },
);

export default createRelayRootContainerComponent(_AgentStatsRelayContainer, {
  prepareParams(props) {
    return {
      agentGID: props.agentGID,
      competitionID: props.competitionID,
    };
  },
  queries: {
    agent: (Component, variables) => Relay.QL`
      query Agent_Competition_Stats {
        node(id: $agentGID) {
          ${Component.getFragment('agent', {
            competitionID: variables.competitionID,
          })}
        }
      }
    `,
  },

  renderLoading() {
    return (
      <div style={{ height: '26rem' }}>
        <Spinner />
      </div>
    );
  },

  renderFetched({ data, props, fetchState }) {
    if (fetchState.done) {
      return <_AgentStatsRelayContainer {...props} {...data} />;
    }
    return this.renderLoading();
  },
});