diff --git a/src/reducers/index.ts b/src/reducers/index.ts index 70635df1..b70858a3 100644 --- a/src/reducers/index.ts +++ b/src/reducers/index.ts @@ -4,7 +4,6 @@ import { serversReducer } from '../servers/reducers/servers'; import shortUrlVisitsReducer from '../visits/reducers/shortUrlVisits'; import tagVisitsReducer from '../visits/reducers/tagVisits'; import orphanVisitsReducer from '../visits/reducers/orphanVisits'; -import nonOrphanVisitsReducer from '../visits/reducers/nonOrphanVisits'; import { settingsReducer } from '../settings/reducers/settings'; import { appUpdatesReducer } from '../app/reducers/appUpdates'; import { sidebarReducer } from '../common/reducers/sidebar'; @@ -22,7 +21,7 @@ export default (container: IContainer) => combineReducers({ tagVisits: tagVisitsReducer, domainVisits: container.domainVisitsReducer, orphanVisits: orphanVisitsReducer, - nonOrphanVisits: nonOrphanVisitsReducer, + nonOrphanVisits: container.nonOrphanVisitsReducer, tagsList: container.tagsListReducer, tagDelete: container.tagDeleteReducer, tagEdit: container.tagEditReducer, diff --git a/src/visits/reducers/domainVisits.ts b/src/visits/reducers/domainVisits.ts index 0cb42ef7..86b03cd7 100644 --- a/src/visits/reducers/domainVisits.ts +++ b/src/visits/reducers/domainVisits.ts @@ -65,10 +65,9 @@ export const domainVisitsReducerCreator = ( builder.addCase(largeAction, (state) => ({ ...state, loadingLarge: true })); builder.addCase(progressChangedAction, (state, { payload: progress }) => ({ ...state, progress })); - builder.addCase( - fallbackToIntervalAction, - (state, { payload: fallbackInterval }) => ({ ...state, fallbackInterval }), - ); + builder.addCase(fallbackToIntervalAction, (state, { payload: fallbackInterval }) => ( + { ...state, fallbackInterval } + )); builder.addCase(createNewVisits, (state, { payload }) => { const { domain, visits, query = {} } = state; @@ -82,7 +81,6 @@ export const domainVisitsReducerCreator = ( }); }, }); - const { cancelGetDomainVisits } = actions; return { reducer, cancelGetDomainVisits }; diff --git a/src/visits/reducers/nonOrphanVisits.ts b/src/visits/reducers/nonOrphanVisits.ts index 632b78e9..c4edcf96 100644 --- a/src/visits/reducers/nonOrphanVisits.ts +++ b/src/visits/reducers/nonOrphanVisits.ts @@ -1,35 +1,12 @@ -import { createAction } from '@reduxjs/toolkit'; -import { Dispatch } from 'redux'; -import { buildReducer } from '../../utils/helpers/redux'; +import { createSlice } from '@reduxjs/toolkit'; import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder'; -import { GetState } from '../../container/types'; -import { ApiErrorAction } from '../../api/types/actions'; import { isBetween } from '../../utils/helpers/date'; -import { getVisitsWithLoader, lastVisitLoaderForLoader } from './common'; -import { createNewVisits, CreateVisitsAction } from './visitCreation'; -import { - LoadVisits, - VisitsFallbackIntervalAction, - VisitsInfo, - VisitsLoaded, - VisitsLoadedAction, - VisitsLoadProgressChangedAction, -} from './types'; +import { createVisitsAsyncThunk, lastVisitLoaderForLoader } from './common'; +import { createNewVisits } from './visitCreation'; +import { VisitsInfo } from './types'; +import { parseApiError } from '../../api/utils'; const REDUCER_PREFIX = 'shlink/orphanVisits'; -export const GET_NON_ORPHAN_VISITS_START = `${REDUCER_PREFIX}/getNonOrphanVisits/pending`; -export const GET_NON_ORPHAN_VISITS_ERROR = `${REDUCER_PREFIX}/getNonOrphanVisits/rejected`; -export const GET_NON_ORPHAN_VISITS = `${REDUCER_PREFIX}/getNonOrphanVisits/fulfilled`; -export const GET_NON_ORPHAN_VISITS_LARGE = `${REDUCER_PREFIX}/getNonOrphanVisits/large`; -export const GET_NON_ORPHAN_VISITS_CANCEL = `${REDUCER_PREFIX}/getNonOrphanVisits/cancel`; -export const GET_NON_ORPHAN_VISITS_PROGRESS_CHANGED = `${REDUCER_PREFIX}/getNonOrphanVisits/progressChanged`; -export const GET_NON_ORPHAN_VISITS_FALLBACK_TO_INTERVAL = `${REDUCER_PREFIX}/getNonOrphanVisits/fallbackToInterval`; - -type NonOrphanVisitsCombinedAction = VisitsLoadedAction -& VisitsLoadProgressChangedAction -& VisitsFallbackIntervalAction -& CreateVisitsAction -& ApiErrorAction; const initialState: VisitsInfo = { visits: [], @@ -40,43 +17,56 @@ const initialState: VisitsInfo = { progress: 0, }; -export default buildReducer({ - [`${REDUCER_PREFIX}/getNonOrphanVisits/pending`]: () => ({ ...initialState, loading: true }), - [`${REDUCER_PREFIX}/getNonOrphanVisits/rejected`]: (_, { errorData }) => ( - { ...initialState, error: true, errorData } - ), - [`${REDUCER_PREFIX}/getNonOrphanVisits/fulfilled`]: (state, { payload }: VisitsLoadedAction) => ( - { ...state, ...payload, loading: false, loadingLarge: false, error: false } - ), - [`${REDUCER_PREFIX}/getNonOrphanVisits/large`]: (state) => ({ ...state, loadingLarge: true }), - [`${REDUCER_PREFIX}/getNonOrphanVisits/cancel`]: (state) => ({ ...state, cancelLoad: true }), - [`${REDUCER_PREFIX}/getNonOrphanVisits/progressChanged`]: (state, { payload: progress }) => ({ ...state, progress }), - [`${REDUCER_PREFIX}/getNonOrphanVisits/fallbackToInterval`]: (state, { payload: fallbackInterval }) => ( - { ...state, fallbackInterval } - ), - [createNewVisits.toString()]: (state, { payload }: CreateVisitsAction) => { - const { visits, query = {} } = state; - const { startDate, endDate } = query; - const newVisits = payload.createdVisits - .filter(({ visit }) => isBetween(visit.date, startDate, endDate)) - .map(({ visit }) => visit); +export const getNonOrphanVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => createVisitsAsyncThunk({ + actionsPrefix: `${REDUCER_PREFIX}/getNonOrphanVisits`, + createLoaders: ({ query = {}, doIntervalFallback = false }, getState) => { + const { getNonOrphanVisits: shlinkGetNonOrphanVisits } = buildShlinkApiClient(getState); + const visitsLoader = async (page: number, itemsPerPage: number) => + shlinkGetNonOrphanVisits({ ...query, page, itemsPerPage }); + const lastVisitLoader = lastVisitLoaderForLoader(doIntervalFallback, shlinkGetNonOrphanVisits); - return { ...state, visits: [...newVisits, ...visits] }; + return [visitsLoader, lastVisitLoader]; }, -}, initialState); + getExtraFulfilledPayload: ({ query = {} }) => ({ query }), + shouldCancel: (getState) => getState().orphanVisits.cancelLoad, +}); -export const getNonOrphanVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => ( - { query = {}, doIntervalFallback = false }: LoadVisits, -) => async (dispatch: Dispatch, getState: GetState) => { - const { getNonOrphanVisits: shlinkGetNonOrphanVisits } = buildShlinkApiClient(getState); - const visitsLoader = async (page: number, itemsPerPage: number) => - shlinkGetNonOrphanVisits({ ...query, page, itemsPerPage }); - const lastVisitLoader = lastVisitLoaderForLoader(doIntervalFallback, shlinkGetNonOrphanVisits); - const shouldCancel = () => getState().orphanVisits.cancelLoad; - const extraFinishActionData: Partial = { query }; - const prefix = `${REDUCER_PREFIX}/getNonOrphanVisits`; +export const nonOrphanVisitsReducerCreator = ( + { asyncThunk, largeAction, progressChangedAction, fallbackToIntervalAction }: ReturnType, +) => { + const { reducer, actions } = createSlice({ + name: REDUCER_PREFIX, + initialState, + reducers: { + cancelGetNonOrphanVisits: (state) => ({ ...state, cancelLoad: true }), + }, + extraReducers: (builder) => { + builder.addCase(asyncThunk.pending, () => ({ ...initialState, loading: true })); + builder.addCase(asyncThunk.rejected, (_, { error }) => ( + { ...initialState, error: true, errorData: parseApiError(error) } + )); + builder.addCase(asyncThunk.fulfilled, (state, { payload }) => ( + { ...state, ...payload, loading: false, loadingLarge: false, error: false } + )); - return getVisitsWithLoader(visitsLoader, lastVisitLoader, extraFinishActionData, prefix, dispatch, shouldCancel); + builder.addCase(largeAction, (state) => ({ ...state, loadingLarge: true })); + builder.addCase(progressChangedAction, (state, { payload: progress }) => ({ ...state, progress })); + builder.addCase(fallbackToIntervalAction, (state, { payload: fallbackInterval }) => ( + { ...state, fallbackInterval } + )); + + builder.addCase(createNewVisits, (state, { payload }) => { + const { visits, query = {} } = state; + const { startDate, endDate } = query; + const newVisits = payload.createdVisits + .filter(({ visit }) => isBetween(visit.date, startDate, endDate)) + .map(({ visit }) => visit); + + return { ...state, visits: [...newVisits, ...visits] }; + }); + }, + }); + const { cancelGetNonOrphanVisits } = actions; + + return { reducer, cancelGetNonOrphanVisits }; }; - -export const cancelGetNonOrphanVisits = createAction(`${REDUCER_PREFIX}/getNonOrphanVisits/cancel`); diff --git a/src/visits/services/provideServices.ts b/src/visits/services/provideServices.ts index 55574ebe..9529831d 100644 --- a/src/visits/services/provideServices.ts +++ b/src/visits/services/provideServices.ts @@ -10,7 +10,7 @@ import { cancelGetShortUrlVisits, getShortUrlVisits } from '../reducers/shortUrl import { cancelGetTagVisits, getTagVisits } from '../reducers/tagVisits'; import { getDomainVisits, domainVisitsReducerCreator } from '../reducers/domainVisits'; import { cancelGetOrphanVisits, getOrphanVisits } from '../reducers/orphanVisits'; -import { cancelGetNonOrphanVisits, getNonOrphanVisits } from '../reducers/nonOrphanVisits'; +import { getNonOrphanVisits, nonOrphanVisitsReducerCreator } from '../reducers/nonOrphanVisits'; import { ConnectDecorator } from '../../container/types'; import { loadVisitsOverview, visitsOverviewReducerCreator } from '../reducers/visitsOverview'; import * as visitsParser from './VisitsParser'; @@ -67,8 +67,9 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => { bottle.serviceFactory('getOrphanVisits', getOrphanVisits, 'buildShlinkApiClient'); bottle.serviceFactory('cancelGetOrphanVisits', () => cancelGetOrphanVisits); - bottle.serviceFactory('getNonOrphanVisits', getNonOrphanVisits, 'buildShlinkApiClient'); - bottle.serviceFactory('cancelGetNonOrphanVisits', () => cancelGetNonOrphanVisits); + bottle.serviceFactory('getNonOrphanVisitsCreator', getNonOrphanVisits, 'buildShlinkApiClient'); + bottle.serviceFactory('getNonOrphanVisits', prop('asyncThunk'), 'getNonOrphanVisitsCreator'); + bottle.serviceFactory('cancelGetNonOrphanVisits', prop('cancelGetNonOrphanVisits'), 'nonOrphanVisitsReducerCreator'); bottle.serviceFactory('createNewVisits', () => createNewVisits); bottle.serviceFactory('loadVisitsOverview', loadVisitsOverview, 'buildShlinkApiClient'); @@ -79,6 +80,9 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => { bottle.serviceFactory('domainVisitsReducerCreator', domainVisitsReducerCreator, 'getDomainVisitsCreator'); bottle.serviceFactory('domainVisitsReducer', prop('reducer'), 'domainVisitsReducerCreator'); + + bottle.serviceFactory('nonOrphanVisitsReducerCreator', nonOrphanVisitsReducerCreator, 'getNonOrphanVisitsCreator'); + bottle.serviceFactory('nonOrphanVisitsReducer', prop('reducer'), 'nonOrphanVisitsReducerCreator'); }; export default provideServices; diff --git a/test/visits/reducers/nonOrphanVisits.test.ts b/test/visits/reducers/nonOrphanVisits.test.ts index b9beb629..59a36658 100644 --- a/test/visits/reducers/nonOrphanVisits.test.ts +++ b/test/visits/reducers/nonOrphanVisits.test.ts @@ -1,15 +1,8 @@ import { Mock } from 'ts-mockery'; import { addDays, formatISO, subDays } from 'date-fns'; -import reducer, { - getNonOrphanVisits, - cancelGetNonOrphanVisits, - GET_NON_ORPHAN_VISITS_START, - GET_NON_ORPHAN_VISITS_ERROR, - GET_NON_ORPHAN_VISITS, - GET_NON_ORPHAN_VISITS_LARGE, - GET_NON_ORPHAN_VISITS_CANCEL, - GET_NON_ORPHAN_VISITS_PROGRESS_CHANGED, - GET_NON_ORPHAN_VISITS_FALLBACK_TO_INTERVAL, +import { + getNonOrphanVisits as getNonOrphanVisitsCreator, + nonOrphanVisitsReducerCreator, } from '../../../src/visits/reducers/nonOrphanVisits'; import { rangeOf } from '../../../src/utils/utils'; import { Visit } from '../../../src/visits/types'; @@ -24,34 +17,37 @@ import { VisitsInfo } from '../../../src/visits/reducers/types'; describe('nonOrphanVisitsReducer', () => { const now = new Date(); const visitsMocks = rangeOf(2, () => Mock.all()); + const getNonOrphanVisitsCall = jest.fn(); + const buildShlinkApiClient = () => Mock.of({ getNonOrphanVisits: getNonOrphanVisitsCall }); + const creator = getNonOrphanVisitsCreator(buildShlinkApiClient); + const { asyncThunk: getNonOrphanVisits, progressChangedAction, largeAction, fallbackToIntervalAction } = creator; + const { reducer, cancelGetNonOrphanVisits } = nonOrphanVisitsReducerCreator(creator); + + beforeEach(jest.clearAllMocks); describe('reducer', () => { const buildState = (data: Partial) => Mock.of(data); it('returns loading on GET_NON_ORPHAN_VISITS_START', () => { - const state = reducer(buildState({ loading: false }), { type: GET_NON_ORPHAN_VISITS_START } as any); - const { loading } = state; - + const { loading } = reducer(buildState({ loading: false }), { type: getNonOrphanVisits.pending.toString() }); expect(loading).toEqual(true); }); it('returns loadingLarge on GET_NON_ORPHAN_VISITS_LARGE', () => { - const state = reducer(buildState({ loadingLarge: false }), { type: GET_NON_ORPHAN_VISITS_LARGE } as any); - const { loadingLarge } = state; - + const { loadingLarge } = reducer(buildState({ loadingLarge: false }), { type: largeAction.toString() }); expect(loadingLarge).toEqual(true); }); it('returns cancelLoad on GET_NON_ORPHAN_VISITS_CANCEL', () => { - const state = reducer(buildState({ cancelLoad: false }), { type: GET_NON_ORPHAN_VISITS_CANCEL } as any); - const { cancelLoad } = state; - + const { cancelLoad } = reducer(buildState({ cancelLoad: false }), { type: cancelGetNonOrphanVisits.toString() }); expect(cancelLoad).toEqual(true); }); it('stops loading and returns error on GET_NON_ORPHAN_VISITS_ERROR', () => { - const state = reducer(buildState({ loading: true, error: false }), { type: GET_NON_ORPHAN_VISITS_ERROR } as any); - const { loading, error } = state; + const { loading, error } = reducer( + buildState({ loading: true, error: false }), + { type: getNonOrphanVisits.rejected.toString() }, + ); expect(loading).toEqual(false); expect(error).toEqual(true); @@ -60,7 +56,7 @@ describe('nonOrphanVisitsReducer', () => { it('return visits on GET_NON_ORPHAN_VISITS', () => { const actionVisits = [{}, {}]; const state = reducer(buildState({ loading: true, error: false }), { - type: GET_NON_ORPHAN_VISITS, + type: getNonOrphanVisits.fulfilled.toString(), payload: { visits: actionVisits }, } as any); const { loading, error, visits } = state; @@ -115,8 +111,7 @@ describe('nonOrphanVisitsReducer', () => { }); it('returns new progress on GET_NON_ORPHAN_VISITS_PROGRESS_CHANGED', () => { - const state = reducer(undefined, { type: GET_NON_ORPHAN_VISITS_PROGRESS_CHANGED, payload: 85 } as any); - + const state = reducer(undefined, { type: progressChangedAction.toString(), payload: 85 } as any); expect(state).toEqual(expect.objectContaining({ progress: 85 })); }); @@ -124,7 +119,7 @@ describe('nonOrphanVisitsReducer', () => { const fallbackInterval: DateInterval = 'last30Days'; const state = reducer( undefined, - { type: GET_NON_ORPHAN_VISITS_FALLBACK_TO_INTERVAL, payload: fallbackInterval } as any, + { type: fallbackToIntervalAction.toString(), payload: fallbackInterval } as any, ); expect(state).toEqual(expect.objectContaining({ fallbackInterval })); @@ -132,11 +127,6 @@ describe('nonOrphanVisitsReducer', () => { }); describe('getNonOrphanVisits', () => { - type GetVisitsReturn = Promise | ((query: any) => Promise); - - const buildApiClientMock = (returned: GetVisitsReturn) => Mock.of({ - getNonOrphanVisits: jest.fn(typeof returned === 'function' ? returned : async () => returned), - }); const dispatchMock = jest.fn(); const getState = () => Mock.of({ orphanVisits: { cancelLoad: false }, @@ -145,14 +135,18 @@ describe('nonOrphanVisitsReducer', () => { beforeEach(jest.resetAllMocks); it('dispatches start and error when promise is rejected', async () => { - const ShlinkApiClient = buildApiClientMock(Promise.reject({})); + getNonOrphanVisitsCall.mockRejectedValue({}); - await getNonOrphanVisits(() => ShlinkApiClient)({})(dispatchMock, getState); + await getNonOrphanVisits({})(dispatchMock, getState, {}); expect(dispatchMock).toHaveBeenCalledTimes(2); - expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_NON_ORPHAN_VISITS_START }); - expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_NON_ORPHAN_VISITS_ERROR }); - expect(ShlinkApiClient.getNonOrphanVisits).toHaveBeenCalledTimes(1); + expect(dispatchMock).toHaveBeenNthCalledWith(1, expect.objectContaining({ + type: getNonOrphanVisits.pending.toString(), + })); + expect(dispatchMock).toHaveBeenNthCalledWith(2, expect.objectContaining({ + type: getNonOrphanVisits.rejected.toString(), + })); + expect(getNonOrphanVisitsCall).toHaveBeenCalledTimes(1); }); it.each([ @@ -160,37 +154,45 @@ describe('nonOrphanVisitsReducer', () => { [{}], ])('dispatches start and success when promise is resolved', async (query) => { const visits = visitsMocks.map((visit) => ({ ...visit, visitedUrl: '' })); - const ShlinkApiClient = buildApiClientMock(Promise.resolve({ + getNonOrphanVisitsCall.mockResolvedValue({ data: visits, pagination: { currentPage: 1, pagesCount: 1, totalItems: 1, }, - })); + }); - await getNonOrphanVisits(() => ShlinkApiClient)({ query })(dispatchMock, getState); + await getNonOrphanVisits({ query })(dispatchMock, getState, {}); expect(dispatchMock).toHaveBeenCalledTimes(2); - expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_NON_ORPHAN_VISITS_START }); - expect(dispatchMock).toHaveBeenNthCalledWith(2, { - type: GET_NON_ORPHAN_VISITS, + expect(dispatchMock).toHaveBeenNthCalledWith(1, expect.objectContaining( + { type: getNonOrphanVisits.pending.toString() }, + )); + expect(dispatchMock).toHaveBeenNthCalledWith(2, expect.objectContaining({ + type: getNonOrphanVisits.fulfilled.toString(), payload: { visits, query: query ?? {} }, - }); - expect(ShlinkApiClient.getNonOrphanVisits).toHaveBeenCalledTimes(1); + })); + expect(getNonOrphanVisitsCall).toHaveBeenCalledTimes(1); }); it.each([ [ [Mock.of({ date: formatISO(subDays(new Date(), 5)) })], - { type: GET_NON_ORPHAN_VISITS_FALLBACK_TO_INTERVAL, payload: 'last7Days' }, + { type: fallbackToIntervalAction.toString(), payload: 'last7Days' }, + 3, ], [ [Mock.of({ date: formatISO(subDays(new Date(), 200)) })], - { type: GET_NON_ORPHAN_VISITS_FALLBACK_TO_INTERVAL, payload: 'last365Days' }, + { type: fallbackToIntervalAction.toString(), payload: 'last365Days' }, + 3, ], - [[], expect.objectContaining({ type: GET_NON_ORPHAN_VISITS })], - ])('dispatches fallback interval when the list of visits is empty', async (lastVisits, expectedSecondDispatch) => { + [[], expect.objectContaining({ type: getNonOrphanVisits.fulfilled.toString() }), 2], + ])('dispatches fallback interval when the list of visits is empty', async ( + lastVisits, + expectedSecondDispatch, + expectedAmountOfDispatches, + ) => { const buildVisitsResult = (data: Visit[] = []): ShlinkVisits => ({ data, pagination: { @@ -199,22 +201,23 @@ describe('nonOrphanVisitsReducer', () => { totalItems: 1, }, }); - const getShlinkOrphanVisits = jest.fn() + getNonOrphanVisitsCall .mockResolvedValueOnce(buildVisitsResult()) .mockResolvedValueOnce(buildVisitsResult(lastVisits)); - const ShlinkApiClient = Mock.of({ getNonOrphanVisits: getShlinkOrphanVisits }); - await getNonOrphanVisits(() => ShlinkApiClient)({ doIntervalFallback: true })(dispatchMock, getState); + await getNonOrphanVisits({ doIntervalFallback: true })(dispatchMock, getState, {}); - expect(dispatchMock).toHaveBeenCalledTimes(2); - expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_NON_ORPHAN_VISITS_START }); + expect(dispatchMock).toHaveBeenCalledTimes(expectedAmountOfDispatches); + expect(dispatchMock).toHaveBeenNthCalledWith(1, expect.objectContaining({ + type: getNonOrphanVisits.pending.toString(), + })); expect(dispatchMock).toHaveBeenNthCalledWith(2, expectedSecondDispatch); - expect(getShlinkOrphanVisits).toHaveBeenCalledTimes(2); + expect(getNonOrphanVisitsCall).toHaveBeenCalledTimes(2); }); }); describe('cancelGetNonOrphanVisits', () => { it('just returns the action with proper type', () => - expect(cancelGetNonOrphanVisits()).toEqual({ type: GET_NON_ORPHAN_VISITS_CANCEL })); + expect(cancelGetNonOrphanVisits()).toEqual({ type: cancelGetNonOrphanVisits.toString() })); }); });