connect setinterval with beginsampleData()

[newAiro]

hi, so i want to introduce an interval each second in the trafficFlow.jsx, and connect this interval with beginSampleData() function, @jrsquared i tried to do that in the componentDidMount() function but it did not work, nothing change and there is no call of the beginSampleData each second, i would greatly appreciate some direction.

[jrsquared]

Can you show me exactly what you tried?

[newAiro]

@jrsquared here the modification i did, i want to make the http call each second and update the data
thanks in advance,

import * as utils from './newformatt.js'
.....
beginSampleData () {
    this.traffic = { nodes: [], connections: [] };
    request.get('http://localhost:8080/api/v1/metrics')
      .set('Accept', 'application/json')
      .end((err, res) => {
        if (res && res.status === 200) {
          this.traffic.clientUpdateTime = Date.now();
          this.updateData(utils.newformatt(res.body));
        }
      });
  }

  componentDidMount () {
    this.checkInitialRoute();
    **this.setInterval(this.beginSampleData(),10000);**

    // Listen for changes to the stores
    filterStore.addChangeListener(this.filtersChanged);
  }

[aSqrd-eSqrd]

@newAiro,

I had a bit of trouble with the same thing also. What I ended up having to do was the following

componentDidMount () {
    this.checkInitialRoute();

    const self = this;
    setInterval( () => { self.beginSampleData(self); }, 10000);
}

I actually got that from @jolexa's fork.

That said, I did make another incremental improvement to let the timer be cleaned up nicely. Otherwise, the timer runs forever even if you've navigated away from the React component. I created a global variable in trafficFlow.jsx that in my case I called intervalHandle, then I did the following:

componentDidMount () {
    this.checkInitialRoute();

    const self = this;
    intervalHandle = setInterval( () => { self.beginSampleData(self); }, 10000);
}

Then in componentWillUnmount

componentWillUnmount () {
    filterStore.removeChangeListener(this.filtersChanged);
    clearInterval(intervalHandle);
}

If you still have trouble I would check your request.get is address as it might just need to be relative such as /api/v1/metrics, but that likely is dependent on your base address/route/project structure...

[edperry]

GREAT information, this helped me a lot!!!! Thanks