Please read this documentation at https://kreatio-sw.github.io/inflight/
Single Page Applications (SPA) pose unique issues which conventional applications did not face. In an SPA, quite often the following situation is faced:
A pragmatic approach can be as follows:
When switching selection criteria, the previous query, which may still be in flight, needs to be canceled.
Even the it could not be canceled it needs to be ensured that stale data does not show up in the UI (may happen if not implemented correctly).
Regarding entries already displayed, while switching there may be several scenarios:
Needs to simplify loading subsequent pages:
Ideally distinguish when no data has arrived from no entities matched the criteria.
Allows updating entities locally:
Well, this library targets to simplify the above in simple and consistent ways.
See InFlightState for more details:
These issues are not specific to this library and not solved by this library.
Local updates when combined with pagination can get quite tricky.
Consider the cases when not all entities are loaded in the UI yet.
Inserts:
Where to place the newly created entries
what to do if newly created entity does not match the current selection criteria
what to do if the newly added entities shows up on a subsequently added page
Update:
Delete:
Add npm package to your Angular4/Angular5 project:
```bash $ npm -i @kreatio/inflight
$ yarn add @kreatio/inflight ```
All classes are plain typescript classes, so you need not mention or provide any of these in your project.
See the following for API details:
```typescript const inFlight = new InFlight();
// This will be passed to the function that gets actual data
const perPage = 25;
// If set to true it will clear the data before issuing next
// request. Setting flase will cause the data to chnage when
// first page of new request arrives.
const clearData = true;
inFlight.start(perPage, clearData, (page, perPage) => {
return getAllImages(page, perPage);
});
inFlight.stateObservable.subscribe((state: InFlightState) => {
// Will yield for every state change
});
// You can use state directly as a variable for binding
let dataInFlight = inFlight.state.inFlight;
let dataLoaded = inFlight.state.dataLoaded;
inFlight.resultsObservable.subscribe((results:PagedResults) => {
// Will yield whenever results change
let totalResults = results.total;
let currentPage = results.page;
let entities = results.entities;
});
// Load additional page if there are more pages
if(inFlight.state.hasMorePages) {
inFlight.getNextPage();
}
// To switch the list entirely call start again with new criteria
inFlight.start(5, true, (page, perPage) => {
return getMyImages(page, perPage);
});
```
It should return an Observable
that should yield a PagedResults
.
Typically it will be a get
call on one of the Angular HTTP classes
with potential chaining of map
calls. The returned Observable should
yield only once.
Test cases have good coverage - has actually been more complex to develop than the actual functionality. Mock Data Generator has test cases of its own which are set to skip by default.
Beware test cases take significant time to run as these need to test delays and errors.
$ ng test