I'm trying to make a site that grabs data from a server with axios, then updates the final content once per second.
Here's the ajax request.
axiosFunc = () => {
axios.get('https://api.warframestat.us/pc').then(results => {
this.setState({
alerts: results.data.alerts
});
setTimeout(this.axiosFunc,1000 * 60);
})
}
componentDidMount() {
this.axiosFunc();
}
Then I return conditionally rendered components (AlertsBox) with data passed into it. They render based by time of day compared to time that they start and end.
render() {
return (
<main className="content">
<header>{this.state.whichEvent.toUpperCase()}</header>
{this.state.alerts.map(alert => {
let enddate = alert.expiry.substring(0,10);
let endtime = alert.expiry.substring(11,19);
let startdate = alert.activation.substring(0,10);
let starttime = alert.activation.substring(11,19);
let endAlert = new Date(`${enddate} ${endtime} UTC`).toLocaleString();
let startAlert = new Date(`${startdate} ${starttime} UTC`).toLocaleString();
let endNumber = Date.parse(endAlert);
let startNumber = Date.parse(startAlert);
return Date.now() > startNumber && Date.now() < endNumber ?
<AlertsBox
deadline={endAlert}
activate={startAlert}
timeOne={enddate}
timeTwo={endtime}
timeThree={startdate}
timeFour={starttime}
image={alert.mission.reward.thumbnail}
reward={alert.mission.reward.itemString}
credits={alert.mission.reward.credits}
type={alert.mission.type}
sector={alert.mission.node}
key={alert.id}/>
:null
})}
</main>
);
}
Next, in the component, I create a timer function to display time once.
let timer = () => {
//Extract the data from the original string
//Convert the UTC to locale time
let seconds = Math.round((this.state.eta/1000) % 60);
let minutes = Math.floor( (this.state.eta/1000/60) % 60 );
let hours = Math.floor( (this.state.eta/(1000*60*60)) % 24 );
let days = Math.floor( this.state.eta/(1000*60*60*24) );
return `${days >= 1? days + " days" : ""} ${hours >= 1? hours + " hrs" : ""} ${minutes} min ${seconds} sec`
}
Finally, within the render area, I render the return function
<figcaption>
{timer()}
</figcaption>
This renders it once. If I do this...
{setInterval(timer(), 1000)}
The function doesn't work, and gives the wrong values. How do I make it give the right values?