Fixed boundToMercureHub HOC so that it clears updates intervals when unmounted

This commit is contained in:
Alejandro Celaya 2020-09-12 11:55:49 +02:00
parent fa074f91be
commit cfb165d240
2 changed files with 13 additions and 5 deletions

View file

@ -22,12 +22,18 @@ export function boundToMercureHub<T = {}>(
useEffect(() => {
const onMessage = (visit: CreateVisit) => interval ? pendingUpdates.add(visit) : createNewVisits([ visit ]);
interval && setInterval(() => {
bindToMercureTopic(mercureInfo, getTopicForProps(props), onMessage, loadMercureInfo);
if (!interval) {
return undefined;
}
const timer = setInterval(() => {
createNewVisits([ ...pendingUpdates ]);
pendingUpdates.clear();
}, interval * 1000 * 60);
bindToMercureTopic(mercureInfo, getTopicForProps(props), onMessage, loadMercureInfo);
return () => clearInterval(timer);
}, [ mercureInfo ]);
return <WrappedComponent {...props} />;

View file

@ -37,9 +37,11 @@ const RealTimeUpdates = (
/>
{realTimeUpdates.enabled && (
<small className="form-text text-muted">
{realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 &&
<span>Updates will be reflected in the UI every <b>{realTimeUpdates.interval}</b> minutes.</span>
}
{realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 && (
<span>
Updates will be reflected in the UI every <b>{realTimeUpdates.interval}</b> minute{realTimeUpdates.interval > 1 && 's'}.
</span>
)}
{!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'}
</small>
)}