mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-10 18:27:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #511 from acelaya-forks/feature/push-visits-in-date

Browse source 
Feature/push visits in date
This commit is contained in:
Alejandro Celaya 2021-10-24 22:44:52 +02:00 committed by GitHub
commit bd0fca23cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 206 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -20,7 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
* *Nothing*
### Fixed
* *Nothing*
* [#252](https://github.com/shlinkio/shlink-web-client/issues/252) Fixed visits coming from mercure being added in real time, even when selected date interval does not match tha visit's date.
## [3.3.2] - 2021-10-17

20
src/utils/helpers/date.ts
View file

@ -1,4 +1,4 @@
import { format, formatISO, parse } from 'date-fns';
import { format, formatISO, isAfter, isBefore, isWithinInterval, parse, parseISO as stdParseISO } from 'date-fns';
import { OptionalString } from '../utils';
type DateOrString = Date | string;
@ -21,3 +21,21 @@ export const formatIsoDate = (date?: NullableDate) => formatDateFromFormat(date,
export const formatInternational = formatDate();
export const parseDate = (date: string, format: string) => parse(date, format, new Date());
const parseISO = (date: DateOrString): Date => isDateObject(date) ? date : stdParseISO(date);
export const isBetween = (date: DateOrString, start?: DateOrString, end?: DateOrString): boolean => {
if (!start && end) {
return isBefore(parseISO(date), parseISO(end));
}
if (start && !end) {
return isAfter(parseISO(date), parseISO(start));
}
if (start && end) {
return isWithinInterval(parseISO(date), { start: parseISO(start), end: parseISO(end) });
}
return true;
};

14
src/visits/reducers/orphanVisits.ts
View file

@ -6,6 +6,7 @@ import { GetState } from '../../container/types';
import { ShlinkVisitsParams } from '../../api/types';
import { isOrphanVisit } from '../types/helpers';
import { ApiErrorAction } from '../../api/types/actions';
import { isBetween } from '../../utils/helpers/date';
import { getVisitsWithLoader } from './common';
import { CREATE_VISITS, CreateVisitsAction } from './visitCreation';
@ -20,6 +21,7 @@ export const GET_ORPHAN_VISITS_PROGRESS_CHANGED = 'shlink/orphanVisits/GET_ORPHA
export interface OrphanVisitsAction extends Action<string> {
visits: Visit[];
query?: ShlinkVisitsParams;
}
type OrphanVisitsCombinedAction = OrphanVisitsAction
@ -39,13 +41,16 @@ const initialState: VisitsInfo = {
export default buildReducer<VisitsInfo, OrphanVisitsCombinedAction>({
[GET_ORPHAN_VISITS_START]: () => ({ ...initialState, loading: true }),
[GET_ORPHAN_VISITS_ERROR]: (_, { errorData }) => ({ ...initialState, error: true, errorData }),
[GET_ORPHAN_VISITS]: (_, { visits }) => ({ ...initialState, visits }),
[GET_ORPHAN_VISITS]: (_, { visits, query }) => ({ ...initialState, visits, query }),
[GET_ORPHAN_VISITS_LARGE]: (state) => ({ ...state, loadingLarge: true }),
[GET_ORPHAN_VISITS_CANCEL]: (state) => ({ ...state, cancelLoad: true }),
[GET_ORPHAN_VISITS_PROGRESS_CHANGED]: (state, { progress }) => ({ ...state, progress }),
[CREATE_VISITS]: (state, { createdVisits }) => {
const { visits } = state;
const newVisits = createdVisits.map(({ visit }) => visit);
const { visits, query = {} } = state;
const { startDate, endDate } = query;
const newVisits = createdVisits
.filter(({ visit }) => isBetween(visit.date, startDate, endDate))
.map(({ visit }) => visit);
return { ...state, visits: [ ...newVisits, ...visits ] };
},
@ -66,6 +71,7 @@ export const getOrphanVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) =>
return { ...result, data: visits };
});
const shouldCancel = () => getState().orphanVisits.cancelLoad;
const extraFinishActionData: Partial<OrphanVisitsAction> = { query };
const actionMap = {
start: GET_ORPHAN_VISITS_START,
large: GET_ORPHAN_VISITS_LARGE,
@ -74,7 +80,7 @@ export const getOrphanVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) =>
progress: GET_ORPHAN_VISITS_PROGRESS_CHANGED,
};
return getVisitsWithLoader(visitsLoader, {}, actionMap, dispatch, shouldCancel);
return getVisitsWithLoader(visitsLoader, extraFinishActionData, actionMap, dispatch, shouldCancel);
};
export const cancelGetOrphanVisits = buildActionCreator(GET_ORPHAN_VISITS_CANCEL);

19
src/visits/reducers/shortUrlVisits.ts
View file

@ -7,6 +7,7 @@ import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilde
import { GetState } from '../../container/types';
import { ShlinkVisitsParams } from '../../api/types';
import { ApiErrorAction } from '../../api/types/actions';
import { isBetween } from '../../utils/helpers/date';
import { getVisitsWithLoader } from './common';
import { CREATE_VISITS, CreateVisitsAction } from './visitCreation';
@ -23,6 +24,7 @@ export interface ShortUrlVisits extends VisitsInfo, ShortUrlIdentifier {}
interface ShortUrlVisitsAction extends Action<string>, ShortUrlIdentifier {
visits: Visit[];
query?: ShlinkVisitsParams;
}
type ShortUrlVisitsCombinedAction = ShortUrlVisitsAction
@ -33,7 +35,7 @@ type ShortUrlVisitsCombinedAction = ShortUrlVisitsAction
const initialState: ShortUrlVisits = {
visits: [],
shortCode: '',
domain: undefined,
domain: undefined, // Deprecated. Value from query params can be used instead
loading: false,
loadingLarge: false,
error: false,
@ -44,22 +46,27 @@ const initialState: ShortUrlVisits = {
export default buildReducer<ShortUrlVisits, ShortUrlVisitsCombinedAction>({
[GET_SHORT_URL_VISITS_START]: () => ({ ...initialState, loading: true }),
[GET_SHORT_URL_VISITS_ERROR]: (_, { errorData }) => ({ ...initialState, error: true, errorData }),
[GET_SHORT_URL_VISITS]: (_, { visits, shortCode, domain }) => ({
[GET_SHORT_URL_VISITS]: (_, { visits, query, shortCode, domain }) => ({
...initialState,
visits,
shortCode,
domain,
query,
}),
[GET_SHORT_URL_VISITS_LARGE]: (state) => ({ ...state, loadingLarge: true }),
[GET_SHORT_URL_VISITS_CANCEL]: (state) => ({ ...state, cancelLoad: true }),
[GET_SHORT_URL_VISITS_PROGRESS_CHANGED]: (state, { progress }) => ({ ...state, progress }),
[CREATE_VISITS]: (state, { createdVisits }) => {
const { shortCode, domain, visits } = state;
const { shortCode, domain, visits, query = {} } = state;
const { startDate, endDate } = query;
const newVisits = createdVisits
.filter(({ shortUrl }) => shortUrl && shortUrlMatches(shortUrl, shortCode, domain))
.filter(
({ shortUrl, visit }) =>
shortUrl && shortUrlMatches(shortUrl, shortCode, domain) && isBetween(visit.date, startDate, endDate),
)
.map(({ visit }) => visit);
return { ...state, visits: [ ...newVisits, ...visits ] };
return newVisits.length === 0 ? state : { ...state, visits: [ ...newVisits, ...visits ] };
},
}, initialState);
@ -73,7 +80,7 @@ export const getShortUrlVisits = (buildShlinkApiClient: ShlinkApiClientBuilder)
{ ...query, page, itemsPerPage },
);
const shouldCancel = () => getState().shortUrlVisits.cancelLoad;
const extraFinishActionData: Partial<ShortUrlVisitsAction> = { shortCode, domain: query.domain };
const extraFinishActionData: Partial<ShortUrlVisitsAction> = { shortCode, query, domain: query.domain };
const actionMap = {
start: GET_SHORT_URL_VISITS_START,
large: GET_SHORT_URL_VISITS_LARGE,

11
src/visits/reducers/tagVisits.ts
View file

@ -5,6 +5,7 @@ import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilde
import { GetState } from '../../container/types';
import { ShlinkVisitsParams } from '../../api/types';
import { ApiErrorAction } from '../../api/types/actions';
import { isBetween } from '../../utils/helpers/date';
import { getVisitsWithLoader } from './common';
import { CREATE_VISITS, CreateVisitsAction } from './visitCreation';
@ -24,6 +25,7 @@ export interface TagVisits extends VisitsInfo {
export interface TagVisitsAction extends Action<string> {
visits: Visit[];
tag: string;
query?: ShlinkVisitsParams;
}
type TagsVisitsCombinedAction = TagVisitsAction
@ -44,14 +46,15 @@ const initialState: TagVisits = {
export default buildReducer<TagVisits, TagsVisitsCombinedAction>({
[GET_TAG_VISITS_START]: () => ({ ...initialState, loading: true }),
[GET_TAG_VISITS_ERROR]: (_, { errorData }) => ({ ...initialState, error: true, errorData }),
[GET_TAG_VISITS]: (_, { visits, tag }) => ({ ...initialState, visits, tag }),
[GET_TAG_VISITS]: (_, { visits, tag, query }) => ({ ...initialState, visits, tag, query }),
[GET_TAG_VISITS_LARGE]: (state) => ({ ...state, loadingLarge: true }),
[GET_TAG_VISITS_CANCEL]: (state) => ({ ...state, cancelLoad: true }),
[GET_TAG_VISITS_PROGRESS_CHANGED]: (state, { progress }) => ({ ...state, progress }),
[CREATE_VISITS]: (state, { createdVisits }) => {
const { tag, visits } = state;
const { tag, visits, query = {} } = state;
const { startDate, endDate } = query;
const newVisits = createdVisits
.filter(({ shortUrl }) => shortUrl?.tags.includes(tag))
.filter(({ shortUrl, visit }) => shortUrl?.tags.includes(tag) && isBetween(visit.date, startDate, endDate))
.map(({ visit }) => visit);
return { ...state, visits: [ ...newVisits, ...visits ] };
@ -68,7 +71,7 @@ export const getTagVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
{ ...query, page, itemsPerPage },
);
const shouldCancel = () => getState().tagVisits.cancelLoad;
const extraFinishActionData: Partial<TagVisitsAction> = { tag };
const extraFinishActionData: Partial<TagVisitsAction> = { tag, query };
const actionMap = {
start: GET_TAG_VISITS_START,
large: GET_TAG_VISITS_LARGE,

3
src/visits/types/index.ts
View file

@ -1,6 +1,6 @@
import { Action } from 'redux';
import { ShortUrl } from '../../short-urls/data';
import { ProblemDetailsError } from '../../api/types';
import { ProblemDetailsError, ShlinkVisitsParams } from '../../api/types';
import { DateRange } from '../../utils/dates/types';
export interface VisitsInfo {
@ -11,6 +11,7 @@ export interface VisitsInfo {
errorData?: ProblemDetailsError;
progress: number;
cancelLoad: boolean;
query?: ShlinkVisitsParams;
}
export interface VisitsLoadProgressChangedAction extends Action<string> {

46
test/visits/reducers/orphanVisits.test.ts
View file

@ -1,4 +1,5 @@
import { Mock } from 'ts-mockery';
import { addDays, subDays } from 'date-fns';
import reducer, {
getOrphanVisits,
cancelGetOrphanVisits,
@ -15,8 +16,10 @@ import { Visit, VisitsInfo } from '../../../src/visits/types';
import { ShlinkVisits } from '../../../src/api/types';
import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient';
import { ShlinkState } from '../../../src/container/types';
import { formatIsoDate } from '../../../src/utils/helpers/date';
describe('orphanVisitsReducer', () => {
const now = new Date();
const visitsMocks = rangeOf(2, () => Mock.all<Visit>());
describe('reducer', () => {
@ -64,15 +67,48 @@ describe('orphanVisitsReducer', () => {
expect(visits).toEqual(actionVisits);
});
it('prepends new visits on CREATE_VISIT', () => {
const prevState = buildState({ visits: visitsMocks });
it.each([
[{}, visitsMocks.length + 2 ],
[
Mock.of<VisitsInfo>({
query: { endDate: formatIsoDate(subDays(now, 1)) ?? undefined },
}),
visitsMocks.length,
],
[
Mock.of<VisitsInfo>({
query: { startDate: formatIsoDate(addDays(now, 1)) ?? undefined },
}),
visitsMocks.length,
],
[
Mock.of<VisitsInfo>({
query: {
startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
endDate: formatIsoDate(subDays(now, 2)) ?? undefined,
},
}),
visitsMocks.length,
],
[
Mock.of<VisitsInfo>({
query: {
startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
endDate: formatIsoDate(addDays(now, 3)) ?? undefined,
},
}),
visitsMocks.length + 2,
],
])('prepends new visits on CREATE_VISIT', (state, expectedVisits) => {
const prevState = buildState({ ...state, visits: visitsMocks });
const visit = Mock.of<Visit>({ date: formatIsoDate(now) ?? undefined });
const { visits } = reducer(
prevState,
{ type: CREATE_VISITS, createdVisits: [{ visit: {} }, { visit: {} }] } as any,
{ type: CREATE_VISITS, createdVisits: [{ visit }, { visit }] } as any,
);
expect(visits).toEqual([{}, {}, ...visitsMocks ]);
expect(visits).toHaveLength(expectedVisits);
});
it('returns new progress on GET_ORPHAN_VISITS_PROGRESS_CHANGED', () => {
@ -124,7 +160,7 @@ describe('orphanVisitsReducer', () => {
expect(dispatchMock).toHaveBeenCalledTimes(2);
expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_ORPHAN_VISITS_START });
expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_ORPHAN_VISITS, visits });
expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_ORPHAN_VISITS, visits, query: query ?? {} });
expect(ShlinkApiClient.getOrphanVisits).toHaveBeenCalledTimes(1);
});
});

63
test/visits/reducers/shortUrlVisits.test.ts
View file

@ -1,4 +1,5 @@
import { Mock } from 'ts-mockery';
import { addDays, subDays } from 'date-fns';
import reducer, {
getShortUrlVisits,
cancelGetShortUrlVisits,
@ -16,8 +17,10 @@ import { Visit } from '../../../src/visits/types';
import { ShlinkVisits } from '../../../src/api/types';
import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient';
import { ShlinkState } from '../../../src/container/types';
import { formatIsoDate } from '../../../src/utils/helpers/date';
describe('shortUrlVisitsReducer', () => {
const now = new Date();
const visitsMocks = rangeOf(2, () => Mock.all<Visit>());
describe('reducer', () => {
@ -66,8 +69,52 @@ describe('shortUrlVisitsReducer', () => {
});
it.each([
[{ shortCode: 'abc123' }, [{}, ...visitsMocks ]],
[{ shortCode: 'def456' }, visitsMocks ],
[{ shortCode: 'abc123' }, visitsMocks.length + 1 ],
[{ shortCode: 'def456' }, visitsMocks.length ],
[
Mock.of<ShortUrlVisits>({
shortCode: 'abc123',
query: { endDate: formatIsoDate(subDays(now, 1)) ?? undefined },
}),
visitsMocks.length,
],
[
Mock.of<ShortUrlVisits>({
shortCode: 'abc123',
query: { startDate: formatIsoDate(addDays(now, 1)) ?? undefined },
}),
visitsMocks.length,
],
[
Mock.of<ShortUrlVisits>({
shortCode: 'abc123',
query: {
startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
endDate: formatIsoDate(subDays(now, 2)) ?? undefined,
},
}),
visitsMocks.length,
],
[
Mock.of<ShortUrlVisits>({
shortCode: 'abc123',
query: {
startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
endDate: formatIsoDate(addDays(now, 3)) ?? undefined,
},
}),
visitsMocks.length + 1,
],
[
Mock.of<ShortUrlVisits>({
shortCode: 'def456',
query: {
startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
endDate: formatIsoDate(addDays(now, 3)) ?? undefined,
},
}),
visitsMocks.length,
],
])('prepends new visits on CREATE_VISIT', (state, expectedVisits) => {
const shortUrl = {
shortCode: 'abc123',
@ -77,9 +124,12 @@ describe('shortUrlVisitsReducer', () => {
visits: visitsMocks,
});
const { visits } = reducer(prevState, { type: CREATE_VISITS, createdVisits: [{ shortUrl, visit: {} }] } as any);
const { visits } = reducer(
prevState,
{ type: CREATE_VISITS, createdVisits: [{ shortUrl, visit: { date: formatIsoDate(now) ?? undefined } }] } as any,
);
expect(visits).toEqual(expectedVisits);
expect(visits).toHaveLength(expectedVisits);
});
it('returns new progress on GET_SHORT_URL_VISITS_PROGRESS_CHANGED', () => {
@ -133,7 +183,10 @@ describe('shortUrlVisitsReducer', () => {
expect(dispatchMock).toHaveBeenCalledTimes(2);
expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_SHORT_URL_VISITS_START });
expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_SHORT_URL_VISITS, visits, shortCode, domain });
expect(dispatchMock).toHaveBeenNthCalledWith(
2,
{ type: GET_SHORT_URL_VISITS, visits, shortCode, domain, query: query ?? {} },
);
expect(ShlinkApiClient.getShortUrlVisits).toHaveBeenCalledTimes(1);
});

60
test/visits/reducers/tagVisits.test.ts
View file

@ -1,4 +1,5 @@
import { Mock } from 'ts-mockery';
import { addDays, subDays } from 'date-fns';
import reducer, {
getTagVisits,
cancelGetTagVisits,
@ -16,8 +17,10 @@ import { Visit } from '../../../src/visits/types';
import { ShlinkVisits } from '../../../src/api/types';
import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient';
import { ShlinkState } from '../../../src/container/types';
import { formatIsoDate } from '../../../src/utils/helpers/date';
describe('tagVisitsReducer', () => {
const now = new Date();
const visitsMocks = rangeOf(2, () => Mock.all<Visit>());
describe('reducer', () => {
@ -66,8 +69,52 @@ describe('tagVisitsReducer', () => {
});
it.each([
[{ tag: 'foo' }, [{}, ...visitsMocks ]],
[{ tag: 'bar' }, visitsMocks ],
[{ tag: 'foo' }, visitsMocks.length + 1 ],
[{ tag: 'bar' }, visitsMocks.length ],
[
Mock.of<TagVisits>({
tag: 'foo',
query: { endDate: formatIsoDate(subDays(now, 1)) ?? undefined },
}),
visitsMocks.length,
],
[
Mock.of<TagVisits>({
tag: 'foo',
query: { startDate: formatIsoDate(addDays(now, 1)) ?? undefined },
}),
visitsMocks.length,
],
[
Mock.of<TagVisits>({
tag: 'foo',
query: {
startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
endDate: formatIsoDate(subDays(now, 2)) ?? undefined,
},
}),
visitsMocks.length,
],
[
Mock.of<TagVisits>({
tag: 'foo',
query: {
startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
endDate: formatIsoDate(addDays(now, 3)) ?? undefined,
},
}),
visitsMocks.length + 1,
],
[
Mock.of<TagVisits>({
tag: 'bar',
query: {
startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
endDate: formatIsoDate(addDays(now, 3)) ?? undefined,
},
}),
visitsMocks.length,
],
])('prepends new visits on CREATE_VISIT', (state, expectedVisits) => {
const shortUrl = {
tags: [ 'foo', 'baz' ],
@ -77,9 +124,12 @@ describe('tagVisitsReducer', () => {
visits: visitsMocks,
});
const { visits } = reducer(prevState, { type: CREATE_VISITS, createdVisits: [{ shortUrl, visit: {} }] } as any);
const { visits } = reducer(prevState, {
type: CREATE_VISITS,
createdVisits: [{ shortUrl, visit: { date: formatIsoDate(now) ?? undefined } }],
} as any);
expect(visits).toEqual(expectedVisits);
expect(visits).toHaveLength(expectedVisits);
});
it('returns new progress on GET_TAG_VISITS_PROGRESS_CHANGED', () => {
@ -132,7 +182,7 @@ describe('tagVisitsReducer', () => {
expect(dispatchMock).toHaveBeenCalledTimes(2);
expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_TAG_VISITS_START });
expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_TAG_VISITS, visits, tag });
expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_TAG_VISITS, visits, tag, query: query ?? {} });
expect(ShlinkApiClient.getTagVisits).toHaveBeenCalledTimes(1);
});
});