How to build auto refresh into UI Components

[ArtturiP]

I'm building a component and I'm having hard time figuring out auto refresh.

The requirement is this:

• Component should be refreshed if there hasn't been user interaction for a set time
• If user interacts (changes the content that is shown), the refresh counter should reset

Currently the component takes in data via API call directly from the component (yes I know, not the ideal way, however the data fetching requires some intense heavy lifting, and it needs to be handled in scripted rest api).

What I have tried so far:

• Get the data via data resource (does not help, using data resource itself does not autorefresh)
• Connecting setTimeout to component's state, and clearing it in case of user interaction 
  --> This was my favourite route, but due to reason I don't understand, I can't use dispatch function asynchronously. It leads to error "dispatch is not a function". Screenshot attached.

@Brad Tilton , I feel no shame in tagging you here, as you seem to be the one who leads the community in this area =).

[Brad Tilton]

Unfortunately, I've done a lot less component building than UI Builder stuff so I'm not sure about this one. Your second approach feels like the right way to go, though.

[ArtturiP]

Thx for the note. I’ll continue the investigation, and if I come up with a solution I’ll post it here.

[ArtturiP · Accepted solution]

Was able to solve it. I was on the right track, but the problem was my insufficient understanding of async javascript technicalities. One can not directly pass the parameters into callback function when setting setTimeout; they should be included as additional parameters into setTimeout -function. 

This solves the trick:

function timeOutFunction(disptachFunction, dispatchParm1, dispatchParm2) {

    console.log("timeout triggered");

    disptachFunction(dispatchParm1, dispatchParm2)

}

And to actionhandlers:

TIMELINE_DATA_RECEIVED: ({ state, properties, action, updateState, dispatch }) => {

updateState({

items:action.payload.result,

showLoading:false,

timeOut:

setTimeout(timeOutFunction, 5000,dispatch,'REFRESH_VIEW',{

date_diff:properties.dateDifference

})

})

},

I'll do a proper blog post about this later.

[ChrisPy]

I'll gladly welcome that blogpost 🙂