Merge pull request #99 from acelaya/feature/visits-pagination

Feature/visits pagination
This commit is contained in:
Alejandro Celaya 2019-01-10 20:17:28 +01:00 committed by GitHub
commit c2ee688176
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 48 additions and 8 deletions

View file

@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
#### Changed #### Changed
* [#87](https://github.com/shlinkio/shlink-web-client/issues/87) and [#89](https://github.com/shlinkio/shlink-web-client/issues/89) Updated all dependencies to latest major versions. * [#87](https://github.com/shlinkio/shlink-web-client/issues/87) and [#89](https://github.com/shlinkio/shlink-web-client/issues/89) Updated all dependencies to latest major versions.
* [#96](https://github.com/shlinkio/shlink-web-client/issues/96) Updated visits page to load visits in multiple paginated requests of `5000` visits when used shlink server supports it. This will prevent shlink to hang when trying to load big amounts of visits.
#### Deprecated #### Deprecated

View file

@ -22,9 +22,9 @@ export default class ShlinkApiClient {
.then((resp) => resp.data); .then((resp) => resp.data);
}; };
getShortUrlVisits = (shortCode, dates) => getShortUrlVisits = (shortCode, query) =>
this._performRequest(`/short-urls/${shortCode}/visits`, 'GET', dates) this._performRequest(`/short-urls/${shortCode}/visits`, 'GET', query)
.then((resp) => resp.data.visits.data); .then((resp) => resp.data.visits);
getShortUrl = (shortCode) => getShortUrl = (shortCode) =>
this._performRequest(`/short-urls/${shortCode}`, 'GET') this._performRequest(`/short-urls/${shortCode}`, 'GET')

View file

@ -46,10 +46,23 @@ export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, dates) =>
dispatch({ type: GET_SHORT_URL_VISITS_START }); dispatch({ type: GET_SHORT_URL_VISITS_START });
const { selectedServer } = getState(); const { selectedServer } = getState();
const shlinkApiClient = buildShlinkApiClient(selectedServer); const { getShortUrlVisits } = buildShlinkApiClient(selectedServer);
const itemsPerPage = 5000;
const isLastPage = ({ currentPage, pagesCount }) => currentPage >= pagesCount;
const loadVisits = async (page = 1) => {
const { pagination, data } = await getShortUrlVisits(shortCode, { ...dates, page, itemsPerPage });
// If pagination was not returned, then this is an older shlink version. Just return data
if (!pagination || isLastPage(pagination)) {
return data;
}
return data.concat(await loadVisits(page + 1));
};
try { try {
const visits = await shlinkApiClient.getShortUrlVisits(shortCode, dates); const visits = await loadVisits();
dispatch({ visits, type: GET_SHORT_URL_VISITS }); dispatch({ visits, type: GET_SHORT_URL_VISITS });
} catch (e) { } catch (e) {

View file

@ -64,7 +64,7 @@ describe('ShlinkApiClient', () => {
const lastAxiosCall = last(axiosSpy.getCalls()); const lastAxiosCall = last(axiosSpy.getCalls());
const axiosArgs = head(lastAxiosCall.args); const axiosArgs = head(lastAxiosCall.args);
expect(expectedVisits).toEqual(actualVisits); expect({ data: expectedVisits }).toEqual(actualVisits);
expect(axiosArgs.url).toContain('/short-urls/abc123/visits'); expect(axiosArgs.url).toContain('/short-urls/abc123/visits');
expect(axiosArgs.method).toEqual('GET'); expect(axiosArgs.method).toEqual('GET');
}); });

View file

@ -47,7 +47,7 @@ describe('shortUrlVisitsReducer', () => {
describe('getShortUrlVisits', () => { describe('getShortUrlVisits', () => {
const buildApiClientMock = (returned) => ({ const buildApiClientMock = (returned) => ({
getShortUrlVisits: sinon.fake.returns(returned), getShortUrlVisits: typeof returned === 'function' ? sinon.fake(returned) : sinon.fake.returns(returned),
}); });
const dispatchMock = sinon.spy(); const dispatchMock = sinon.spy();
const getState = () => ({}); const getState = () => ({});
@ -74,7 +74,13 @@ describe('shortUrlVisitsReducer', () => {
it('dispatches start and success when promise is resolved', async () => { it('dispatches start and success when promise is resolved', async () => {
const resolvedVisits = [{}, {}]; const resolvedVisits = [{}, {}];
const ShlinkApiClient = buildApiClientMock(Promise.resolve(resolvedVisits)); const ShlinkApiClient = buildApiClientMock(Promise.resolve({
data: resolvedVisits,
pagination: {
currentPage: 1,
pagesCount: 1,
},
}));
const expectedDispatchCalls = 2; const expectedDispatchCalls = 2;
await getShortUrlVisits(() => ShlinkApiClient)('abc123')(dispatchMock, getState); await getShortUrlVisits(() => ShlinkApiClient)('abc123')(dispatchMock, getState);
@ -91,5 +97,25 @@ describe('shortUrlVisitsReducer', () => {
expect(secondCallType).toEqual(GET_SHORT_URL_VISITS); expect(secondCallType).toEqual(GET_SHORT_URL_VISITS);
expect(visits).toEqual(resolvedVisits); expect(visits).toEqual(resolvedVisits);
}); });
it('performs multiple API requests when response contains more pages', async () => {
const expectedRequests = 3;
const ShlinkApiClient = buildApiClientMock((shortCode, { page }) =>
Promise.resolve({
data: [{}, {}],
pagination: {
currentPage: page,
pagesCount: expectedRequests,
},
}));
await getShortUrlVisits(() => ShlinkApiClient)('abc123')(dispatchMock, getState);
const [ secondCallArg ] = dispatchMock.getCall(1).args;
const { visits } = secondCallArg;
expect(ShlinkApiClient.getShortUrlVisits.callCount).toEqual(expectedRequests);
expect(visits).toEqual([{}, {}, {}, {}, {}, {}]);
});
}); });
}); });