inplay.jsx

import React, { Component } from "react";
import axios from "axios";
import moment from "moment";

export default class Feutred extends Component {
  state = {
    sports: [],
    events: [],
    isLoading: true,
    errors: null
  };
  getSports() {
    axios
      .get("http://localhost:3000/api/v1/sports.json")
      .then(response =>
        response.data.map(sport => ({
          id: sport.id,
          name: sport.name,
          slug: sport.slug
        }))
      )
      .then(sports => {
        sports.forEach(sport => this.getEvents(sport.id));
        this.setState({
          sports,
          isLoading: false
        });
      })
      .catch(error => this.setState({ error, isLoading: false }));
  }
  getEvents(sport_id) {
    axios
      .get("http://localhost:3000/api/v1/events?sport_id=${sport_id}")
      .then(response =>
        response.data.map(event => ({
          id: event.id,
          time: event.time,
          league: event.league,
          time_status: event.time_status,
          homeTeam: event.home,
          awayTeam: event.away
        }))
      )
      .then(events => {
        this.setState({
          events,
          isLoading: false
        });
      })
      .catch(error => this.setState({ error, isLoading: false }));
  }
  componentDidMount() {
      this.getSports();
      (this.interval = setInterval(
        () => this.getEvents({ time: Date.now() }),
        12000
      ));
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    const { sports, isLoading } = this.state;
    return (
      <React.Fragment>
        {!isLoading ? (
          sports.map(sport => {
            const { id, name } = sport;
            return (
              <div key={sport.id}>
                <div className="text">
                  <p className="meta">
                    <span className="matchinfo">
                      <span className="block">time</span>
                      <span className="block">timestatus</span>
                    </span>
                  </p>
                  <h3>
                    <a href="">home-team vs away tream</a>
                  </h3>
                  <p className="league">
                    <a className="watchlive" href="">
                      <span className="icon" />
                      <span>Watch live</span>
                    </a>
                    <span>{sport.name} - league cc - league name</span>
                  </p>
                </div>
              </div>
            );
          })
        ) : (
          <p>Loading...</p>
        )}
      </React.Fragment>
    );
  }
}