We Keep Coding

Update date and time when time is midnight

I am working on react dashboard which is to be displayed on large TV. It works fine for a single day. But when time reaches midnight dashboard gets stuck on same day and won't roll over to next day.
My approach
import React from 'react'
import moment from "moment";
function UpdateDate() {
const [{ startDate, endDate }] = useStateValue();
useEffect(() => {
var daterollOver = setInterval(function () {
var now = moment().format("HH:mm:ss");
if (now === "00:00:00") {
window.location.reload();
}
}, 1000);
return () => {
clearInterval(daterollOver);
}
}, [])
var url=`http:domain/live-dashboard?from=${startDate}&to=${endDate}`;
return (
<div>
<iframe
className="embed-responsive-item"
src={url}
></iframe>
</div>
)
}
export default UpdateDate;
I am using react context api to manage the state. Below is the section of the reducers.js which takes current time from moment.
import moment from "moment";
export const initialState = {
startDate: moment().startOf("day").local();,
endDate: moment().endOf("day").local();,
}
What would be the best option to refresh the page the at midnight which would update startDate & endDate and roll over to next day when time is midnight?

I'm naive when it comes to React myself, but from my understanding, you can use the useState hook to get/store things there.
I'd get the difference between now and midnight (represented here as endOf("day").add(1, 'ms')), then just set a timeout for that long. Don't bother checking every second or every minute or every hour. You know how much time needs to elapse, let that elapse. The setTimeout function is not terribly accurate, but on these scales it doesn't really matter. I wouldn't even check; just refresh. In the highly unlikely event it's too early, it will recalculate the next timeout to be very quick and resolve itself.
Using a state variable as the src of the iframe will cause a rerender of the HTML when the url changes, but that's fine -- you were reloading the page previously, this is less destructive than that.
I'm not sure if this works; I didn't bother creating a sandbox. Try it out, see if it helps. If it doesn't, please do create a sandbox (jsFiddle, codepen, whatever) to show it not working.
import React from 'react'
import moment from "moment";
function UpdateDate() {
function generateUrl() {
return `http:domain/live-dashboard?from=${moment().startOf("day")}&to=${moment().endOf("day")}`;
}
const [url, setUrl] = useState(generateUrl());
useEffect(() => {
let lastTimeout = 0;
let setupReload = function() {
const timeUntilMidnight = moment().diff(moment().endOf("day").add(1, "ms"), "ms");
return setTimeout(function() {
setUrl(generateUrl());
lastTimeout = setupReload();
}, timeUntilMidnight);
};
lastTimeout = setupReload();
return () => {
clearInterval(lastTimeout);
}
}, []);
return (
<div>
<iframe className="embed-responsive-item"
src={ url }>
</iframe>
</div>
);
}
export default UpdateDate;

I don't see you using startDate or endDate from context in your setInterval, so don't see the relevance of that? It's hard to say what's not working for sure but I would suggest a slightly different approach. Rather than checking every second if the time is exactly midnight... instead, I would check if the time is PAST midnight (using >=), and then also store the last time the page was refreshed, maybe in localstorage. Then you will change your logic to: is it after midnight, and more than 8 hours (or 23 hours... w/e) have elapsed since the last page refresh? Refresh the page. Something like that.

multiple setInterval timers on node server

My app is a game where a user has 30 mins to finish....node backend
Each time a user starts a game then a setInterval function is triggered server side....once 30mins is counted down then I clearInterval.
How do I make sure that each setInterval is unique to the particular user and the setInterval variable is not overwritten each time a new user starts a game? (or all setInterval's are cleared each time I clear).
Seems like I might need to create a unique "interval" variable for each new user that starts game??
Below code is triggered each time a new user starts a game
let secondsLeft = 300000;
let interval = setInterval(() => {
secondsLeft -= 1000;
if (secondsLeft === 0) {
console.log("now exit");
clearInterval(interval);
}
}, 10000);
Thanks!!

We used agenda for a pretty big strategy game backend which offers the benefit of persistence if the node app crashes etc.
We incorporated the user id into the job name and would then schedule the job, along with data to process, to run at a determined time specifying a handler to execute.
The handler would then run the job and perform the relevant tasks.
// create a unique jobname
const jobName = `${player.id}|${constants.events.game.createBuilding}`;
// define a job to run with handler
services.scheduler.define(jobName, checkCreateBuildingComplete);
// schedule it to run and pass the data
services.scheduler.schedule(at.toISOString(), jobName, {
id: id,
instance: instance,
started: when
});
Worked pretty well and offered decent protection against crashes. Maybe worth considering.

First: Concurrent Intervals and Timers are not the best design approach in JS, it is better to use one global timer and a list of objects storing the start, end, userid etc and update these in a loop.
Anyway. To have your interval id bound to a certain scope, you can use a Promise like so:
const createTimer = (duration, userid) => new Promise(res => {
const start = new Date().getTime();
let iid;
(function loop () {
const
now = new Date().getTime(),
delta = now - start
;
//elapsed
if (delta >= duration) {
clearTimeout(iid);
res(userid);
//try again later
} else {
iid = setTimeout(loop, 100)
}
})();
});
This way each timer will run »on its own«. I used setTimeout here since that wont requeue loop before it did everything it had to. It should work with setInterval as well and look like that:
const runTimer = (duration, userid, ontick) => new Promise(res => {
const
start = new Date().getTime(),
iid = setInterval(
() => {
const delta = new Date().getTime() - start;
if (delta < duration) {
//if you want to trigger something each time
ontick(delta, userid);
} else {
clearInterval(iid);
res(userid);
}
}, 500)
;
});
You do not even need a promise, a simple function will do as well, but then you have to build some solution for triggering stuff when the timer is elapsed.

Thanks #Chev and #philipp these are both good answers.
I was also made aware of a technique where you use an array for the setInterval variable.....this would make my code as follows;
let intervals = []
let secondsLeft = 300000;
intervals['i'+userId] = setInterval(() => {
secondsLeft -= 1000;
if (secondsLeft === 0) {
console.log("now exit");
clearInterval(interval);
}
}, 10000);
Does anyone else foresee this working?.
UPDATE 6.56pm PST.....it works!!

React-countdown-now not updating on render

I am creating a Mission Clock web app using React and Flux.
The code can be found here: https://github.com/jcadam14/Flux-Mission-Clock
Right now it's extremely basic, I'm new to React and Flux and it has been an extremely long time since I did any JavaScript (been in the monolithic Java application business for too long). This is to get a proof of concept so I can base my design around React/Flux.
The basic concept is a "Next Contact" timer counts down and when it hits 1min before completion, the box the counter is in turns red. Then when the NextContact timer completes, a CurrentContact timer starts, and a new NextContact timer should start.
Everything works fine up until the point where the NextContact component completes and is supposed to update with a new NextContact. The text in the component and the style update, but the Countdown does not start ticking down. It stays at the new value but doesn't start the timer.
Each time a render occurs because of some other reason, the NextContact component updates again with a new time but does not start counting.
However, if I save any change within any of the files (I'm using Visual Studio Code with module.hot active) then the counter starts and in fact picks up where it should be. So it seems like something isn't getting fully rendered on change like I would expect.
I've tried using forceUpdate but that didn't do anything, and I've tried various ways of getting the Counter component but nothing works.
Any help would be greatly appreciated. I'm hoping once I get this down and can understand how all the dispatching stuff works the rest of the application should fall into place (the timers are a central component to the app, everything else is rather simple).
EDIT: I also tried writing just a simple timer app with Countdown but this time using Redux, and the same thing happens. So I guess the question might be how do you force a component to re-initialize itself?
Thanks!
Jason

Well I ended up just writing my own counter, here it is:
import React,{Component} from 'react';
const formatValues = ({days,hours,minutes,seconds}) =>
{
const hourString = ('0' + hours).slice(-2);
const minString = ('0'+ minutes).slice(-2);
const secString = ('0' + seconds).slice(-2);
return (days + ':' + hourString + ':' + minString + ':' + secString);
}
class MCCountdown extends Component
{
constructor(props)
{
super(props);
this.state = {
endDate:this.props.endDate,
countdown:'0:00:00:00',
secondRemaining:0,
id:0
}
this.initializeCountdown = this.initializeCountdown.bind(this);
this.tick = this.tick.bind(this);
}
componentDidUpdate(prevProps, prevState)
{
if(this.props.endDate !== prevProps.endDate)
{
clearInterval(prevState.id);
this.setState({endDate:this.props.endDate});
this.initializeCountdown();
}
}
componentDidMount()
{
this.initializeCountdown();
}
tick() {
const values = this.getTimeRemaining(this.state.endDate);
this.setState({countdown:formatValues(values),secondRemaining:values.secondsLeft});
if(values.secondsLeft <= 0)
{
clearInterval(this.state.id);
if(this.props.onComplete)
{
this.props.onComplete();
}
return;
}
else
{
if(this.props.onTick)
{
this.props.onTick(this.state.secondRemaining);
}
}
}
getTimeRemaining(endtime){
const total = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor( (total/1000) % 60 );
const minutes = Math.floor( (total/1000/60) % 60 );
const hours = Math.floor( (total/(1000*60*60)) % 24 );
const days = Math.floor( total/(1000*60*60*24) );
return {
secondsLeft: total,
days,
hours,
minutes,
seconds
};
}
initializeCountdown(){
const values = this.getTimeRemaining(this.state.endDate);
const id = setInterval(() => this.tick(),1000);
this.setState({id:id,countdown:formatValues(values),secondRemaining:values.secondsLeft});
}
render()
{
const {countdown} = this.state;
return(<div>{countdown}</div>);
}
}
export default MCCountdown
This did the trick. Seems like perhaps the timers/counters I have all tried might be missing that componentDidUpdate() method because once I added that to my MCCountdown, the clock restarts when a new date is set on the component.
Not sure if this is the pretties it can be but it works and I'm pretty darn happy with that right now.

Session timeout warning popup in Angular

I'm working on an application that has a session timeout after 30 mins of inactivity. I have a new requirement to pop up a message asking users if they'd like to keep their session active, a couple mins before they're automatically logged out.
Right now the session is managed in what I think is a pretty unorthodox manner, and I need to try to work with what's already there. There's a service used by the App Module called context.service (injected as a provider) that uses a setTimeout to determine when 30 mins of inactivity has expired.
Given that I need access to that countdown, I wanted to create a mirrored timeout that executes 2 mins earlier and fires the modal, asking the user if they want to keep their session open. After injecting NgbModal into the ContextService I receive a circular reference error which seems quite reasonable. It seems a little crazy to try to populate a modal on the DOM using a provider, but I'm not sure what a viable alternative is.
Here's the current state as it exists (with the circular reference error):
// ...
import { SessionExpirationWarning } from '../components/session-expiration-warning/session-expiration-warning.component';
// ....
constructor(
private _http: HttpClient,
private _injector: Injector,
private modalSvc: NgbModal
) {
// ...
}
// ...
setSessionTimeout() {
if (this.appConfig === null) { return; }
clearTimeout(this._timeoutId);
clearTimeout(this.timeoutWarning);
const sessionTimeOutConfig = this.appConfig.SessionTimeoutMinutes;
const SessionTimeoutMinutes = sessionTimeOutConfig === undefined ? 5 : sessionTimeOutConfig;
const sessionWarningMinutes = 2;
this._timeoutId = setTimeout(() => {
this.sessionExpired();
}, SessionTimeoutMinutes * (60 * 1000));
this.timeoutWarning = setTimeout(() => {
if (!this.warningIsActive) {
const timeOutWarningModal = this.modalSvc.open(SessionExpirationWarning);
timeOutWarningModal.result.then((modalResponse) => {
if (modalResponse === true) {
this.keepAlive(null);
}
});
}
}, sessionWarningMinutes * (60 * 1000));
}
The this.timeoutWarning was my attempt at hacking together a solution.

What you could do is to have an Observable that emits when the warning popup should be displayed:
import { timer } from 'rxjs/observable/timer';
// ...
public sessionWarningTimer$ = new Subject();
// ...
setSessionTimeout() {
// ...
timer(sessionWarningMinutes * 60 * 1000).subscribe(this.sessionWarningTimer$);
}
In a component (e.g. your AppComponent) you could then subscribe to sessionWarningTimer$:
private destroyed$ = new Subject();
ngOnInit() {
this
.contextService
.sessionWarningTimer$
.takeUntil(this.destroyed$)
.subscribe(() => this.displaySessionWarning());
}
ngOnDestroy() {
this.destroyed$.next();
}
displaySessionWarning() {
// your display code here
}
Like this, you can avoid any UI code in your service and rather focus on the warning logics.

Using react, it is possible to make an app that uses axios, setInterval, setTimeout, and map?

I have an issue which I'm beginning to suspect has no solution unless I drop React and return to jQuery. I want to create an app that is similar to https://tenno.tools/ or https://deathsnacks.com/wf/ These are sites which grab JSON data and update periodically.
I want to make a react app that uses axios to refresh the data once per minute with setTimeout, since the data changes often.
axiosFunc = () => {
axios.get('https://api.warframestat.us/pc').then(results => {
this.setState({
alerts: results.data.alerts
});
setTimeout(this.axiosFunc,1000 * 60);
})
}
componentDidMount() {
this.axiosFunc();
}
Next I need to use map to cycle through the alert array's objects and make individual components based off the objects' data that are active.
render() {
return (
<main className="content">
<header>{this.state.whichEvent.toUpperCase()}</header>
{this.state.alerts.map(alert => {
//Variables that pull time based data from the objects go here, and go into the component as props
<AlertsBox key={alert.id}/>
})}
</main>
);
}
Then I use the props and state within the component to make a timer, since the data from the JSON file have expiration dates...
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`
}
And all of this works. I'm able to see the dynamic data from the JSON as they come in and leave, as well as the corresponding time. Now I just need to use setInterval in order to get the timer to tick every second. Is this possible? I asked a similar question here
How can I return values once per second using react and axios?
But again, I'm beginning to suspect that this isn't actually possible. Is it?

You'll want to use setInterval on the axiosFunc, no need to set that up inside the network request. Here's an example that calls your API every 5 seconds and renders a formatted date.
class Example extends React.Component {
constructor() {
super();
this.state = { alerts: [] };
}
axiosFunc = () => {
axios.get('https://api.warframestat.us/pc').then(results => {
this.setState({
alerts: results.data.alerts,
});
console.log('Updated the data!', results);
});
};
timer = time => {
// Your timer code goes here, just printing out example data here.
const date = new Date(time);
return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
};
componentDidMount() {
this.axiosFunc();
this.interval = setInterval(this.axiosFunc, 5000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
if (!this.state.alerts.length) {
return <div />;
}
// Sorting the alerts every time we render.
const latest = this.state.alerts.sort((a, b) => {
return new Date(b.activation) - new Date(a.activation);
})[0];
return <div>{this.timer(latest.activation)}</div>;
}
}
ReactDOM.render(<Example />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
<div id="root"></div>

It's definitely possible. As you said, all of this works - which part is actually giving you trouble? Are you getting an error anywhere?
Personally, I'd think about using Redux in addition to React in an app like this because I like to separate the fetching of data from the presentation of data, but that's all just personal preference. I have an example app that uses setInterval directly in a React component, in case the move from setTimeout to setInterval is causing you pain.