[REACT] Redux-like example with project model

[eluce2]

I hope I'm not missing something else here, but in our experiments with the examples we notice that we're not actually loading the data via that requestData function, but rather just listening to that requestData event and then binding the data to the React component directly. But it seems that something is still trying to request data (and throwing an error) even though we never implemented a loadUrl or a requestData function at all.

I'll try to replicate this in my minimal example project, but I wanted to add this context also in case that's a known behavior

[joakim.l]

I don't know when, but hopefully quite soon.

If you activate lazyLoad on the EventStore, the calls made to requestData will contain info about which resources to load events for. If its a regular store, there will be a startIndex and a count param. If you need the resource ids, you could cache them yourself when you load resources, or you can look them up in the ResourceStore.

I can understand this could be a bit tricky to achieve in React, but it should be doable.

We have a Lazy Loading Guide that maybe of use, if you havn't seen it already.

[joakim.l]

Sorry, but there's currently no support for framework "binding" of data and lazy load.

[eluce2]

Does it have to be lazyLoad? I guess you're saying that's the only way I'm going to get the events that I need, containing the right params? Because when binding the data, I could easily pass in all the data that is currently in my local cache; an ever growing list of data as the user scrolls, right?

We came close to this implementation months ago but had to abandon it because I couldn't figure out how to limit the events by resource. What I may have failed to realize at the time was that the startIndex and count for the requestData function of the EventStore was actually telling me about the resources? Is that true? It would seem that enabling lazyLoad on the EventStore means the library is expecting me to only return a maximum number of event records.

Also see attached for the example I mentioned. Notice we get the following error, and the green loading indicator never stops, even though all the data is loaded.

Uncaught (in promise) TypeError: this.performDataRequest is not a function

[joakim.l]

I wouldn't recommend implementing your own lazy load solution. I'm sure it is possible, but it might be more work than you expect.

Yes, the startIndex and count in the EventStore request is for matching resources. I don't understand what you mean by "the library is expecting me to only return a maximum number of event records". The lazy load functionality will request data only as it is needed.

I'll take a look at your attached example.

[joakim.l]

It seems like youve been trying a bunch of things in that example.
These adjustments assumes you want to use lazy loading

1. Remove the load page calls from App.tsx
2. Remove the inline data (resources, events, assignments) from App.tsx
3. Move the autoLoad config from the project to the ResourceStore in SchedulerProConfig.ts
4. Rename onRequestData to requestData and make sure they return the data like below:

resourceStore : {
    lazyLoad: true,
    autoLoad: true
    requestData({ startIndex, count }){
        return {
           data : [ /* resource data goes here */],
           total : 0 // total number of resources available to load
    }
}

eventStore : {
    lazyLoad: true,
    requestData({ startIndex, count, startDate, endDate }){
        return {
           data : [ /* event data goes here */]
    }
}