mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Migrated mercureInfo reducer to RTK
This commit is contained in:
parent
f209fa2d58
commit
4a95724425
5 changed files with 88 additions and 93 deletions
|
@ -1,6 +1,5 @@
|
||||||
import { AxiosInstance } from 'axios';
|
import { AxiosInstance } from 'axios';
|
||||||
import { prop } from 'ramda';
|
import { hasServerData, ServerWithId } from '../../servers/data';
|
||||||
import { hasServerData, SelectedServer, ServerWithId } from '../../servers/data';
|
|
||||||
import { GetState } from '../../container/types';
|
import { GetState } from '../../container/types';
|
||||||
import { ShlinkApiClient } from './ShlinkApiClient';
|
import { ShlinkApiClient } from './ShlinkApiClient';
|
||||||
|
|
||||||
|
@ -8,22 +7,19 @@ const apiClients: Record<string, ShlinkApiClient> = {};
|
||||||
|
|
||||||
const isGetState = (getStateOrSelectedServer: GetState | ServerWithId): getStateOrSelectedServer is GetState =>
|
const isGetState = (getStateOrSelectedServer: GetState | ServerWithId): getStateOrSelectedServer is GetState =>
|
||||||
typeof getStateOrSelectedServer === 'function';
|
typeof getStateOrSelectedServer === 'function';
|
||||||
const getSelectedServerFromState = (getState: GetState): SelectedServer => prop('selectedServer', getState());
|
const getSelectedServerFromState = (getState: GetState): ServerWithId => {
|
||||||
|
const { selectedServer } = getState();
|
||||||
export type ShlinkApiClientBuilder = (getStateOrSelectedServer: GetState | ServerWithId) => ShlinkApiClient;
|
if (!hasServerData(selectedServer)) {
|
||||||
|
|
||||||
export const buildShlinkApiClient = (axios: AxiosInstance): ShlinkApiClientBuilder => (
|
|
||||||
getStateOrSelectedServer: GetState | ServerWithId,
|
|
||||||
) => {
|
|
||||||
const server = isGetState(getStateOrSelectedServer)
|
|
||||||
? getSelectedServerFromState(getStateOrSelectedServer)
|
|
||||||
: getStateOrSelectedServer;
|
|
||||||
|
|
||||||
if (!hasServerData(server)) {
|
|
||||||
throw new Error('There\'s no selected server or it is not found');
|
throw new Error('There\'s no selected server or it is not found');
|
||||||
}
|
}
|
||||||
|
|
||||||
const { url, apiKey } = server;
|
return selectedServer;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const buildShlinkApiClient = (axios: AxiosInstance) => (getStateOrSelectedServer: GetState | ServerWithId) => {
|
||||||
|
const { url, apiKey } = isGetState(getStateOrSelectedServer)
|
||||||
|
? getSelectedServerFromState(getStateOrSelectedServer)
|
||||||
|
: getStateOrSelectedServer;
|
||||||
const clientKey = `${url}_${apiKey}`;
|
const clientKey = `${url}_${apiKey}`;
|
||||||
|
|
||||||
if (!apiClients[clientKey]) {
|
if (!apiClients[clientKey]) {
|
||||||
|
@ -32,3 +28,5 @@ export const buildShlinkApiClient = (axios: AxiosInstance): ShlinkApiClientBuild
|
||||||
|
|
||||||
return apiClients[clientKey];
|
return apiClients[clientKey];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type ShlinkApiClientBuilder = ReturnType<typeof buildShlinkApiClient>;
|
||||||
|
|
|
@ -1,52 +1,44 @@
|
||||||
import { Action, Dispatch } from 'redux';
|
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
|
||||||
import { ShlinkMercureInfo } from '../../api/types';
|
import { ShlinkMercureInfo } from '../../api/types';
|
||||||
import { GetState } from '../../container/types';
|
import { ShlinkState } from '../../container/types';
|
||||||
import { buildReducer } from '../../utils/helpers/redux';
|
|
||||||
import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
|
import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
|
||||||
|
|
||||||
export const GET_MERCURE_INFO_START = 'shlink/mercure/GET_MERCURE_INFO_START';
|
const GET_MERCURE_INFO = 'shlink/mercure/GET_MERCURE_INFO';
|
||||||
export const GET_MERCURE_INFO_ERROR = 'shlink/mercure/GET_MERCURE_INFO_ERROR';
|
|
||||||
export const GET_MERCURE_INFO = 'shlink/mercure/GET_MERCURE_INFO';
|
|
||||||
|
|
||||||
export interface MercureInfo {
|
export interface MercureInfo extends Partial<ShlinkMercureInfo> {
|
||||||
token?: string;
|
|
||||||
mercureHubUrl?: string;
|
|
||||||
interval?: number;
|
interval?: number;
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
error: boolean;
|
error: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type GetMercureInfoAction = Action<string> & ShlinkMercureInfo & { interval?: number };
|
|
||||||
|
|
||||||
const initialState: MercureInfo = {
|
const initialState: MercureInfo = {
|
||||||
loading: true,
|
loading: true,
|
||||||
error: false,
|
error: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default buildReducer<MercureInfo, GetMercureInfoAction>({
|
export const mercureInfoReducerCreator = (buildShlinkApiClient: ShlinkApiClientBuilder) => {
|
||||||
[GET_MERCURE_INFO_START]: (state) => ({ ...state, loading: true, error: false }),
|
const loadMercureInfo = createAsyncThunk<ShlinkMercureInfo, void, { state: ShlinkState }>(
|
||||||
[GET_MERCURE_INFO_ERROR]: (state) => ({ ...state, loading: false, error: true }),
|
GET_MERCURE_INFO,
|
||||||
[GET_MERCURE_INFO]: (_, action) => ({ ...action, loading: false, error: false }),
|
async (_, { getState }) => {
|
||||||
}, initialState);
|
const { settings } = getState();
|
||||||
|
if (!settings.realTimeUpdates.enabled) {
|
||||||
|
throw new Error('Real time updates not enabled');
|
||||||
|
}
|
||||||
|
|
||||||
export const loadMercureInfo = (buildShlinkApiClient: ShlinkApiClientBuilder) =>
|
return buildShlinkApiClient(getState).mercureInfo();
|
||||||
() => async (dispatch: Dispatch, getState: GetState) => {
|
},
|
||||||
dispatch({ type: GET_MERCURE_INFO_START });
|
);
|
||||||
|
|
||||||
const { settings } = getState();
|
const { reducer } = createSlice({
|
||||||
const { mercureInfo } = buildShlinkApiClient(getState);
|
name: 'mercureInfoReducer',
|
||||||
|
initialState,
|
||||||
|
reducers: {},
|
||||||
|
extraReducers: (builder) => {
|
||||||
|
builder.addCase(loadMercureInfo.pending, (state) => ({ ...state, loading: true, error: false }));
|
||||||
|
builder.addCase(loadMercureInfo.rejected, (state) => ({ ...state, loading: false, error: true }));
|
||||||
|
builder.addCase(loadMercureInfo.fulfilled, (_, { payload }) => ({ ...payload, loading: false, error: false }));
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
if (!settings.realTimeUpdates.enabled) {
|
return { loadMercureInfo, reducer };
|
||||||
dispatch({ type: GET_MERCURE_INFO_ERROR });
|
};
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const info = await mercureInfo();
|
|
||||||
|
|
||||||
dispatch<GetMercureInfoAction>({ type: GET_MERCURE_INFO, interval: settings.realTimeUpdates.interval, ...info });
|
|
||||||
} catch (e) {
|
|
||||||
dispatch({ type: GET_MERCURE_INFO_ERROR });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
|
@ -1,9 +1,14 @@
|
||||||
|
import { prop } from 'ramda';
|
||||||
import Bottle from 'bottlejs';
|
import Bottle from 'bottlejs';
|
||||||
import { loadMercureInfo } from '../reducers/mercureInfo';
|
import { mercureInfoReducerCreator } from '../reducers/mercureInfo';
|
||||||
|
|
||||||
const provideServices = (bottle: Bottle) => {
|
const provideServices = (bottle: Bottle) => {
|
||||||
|
// Reducer
|
||||||
|
bottle.serviceFactory('mercureInfoReducerCreator', mercureInfoReducerCreator, 'buildShlinkApiClient');
|
||||||
|
bottle.serviceFactory('mercureInfoReducer', prop('reducer'), 'mercureInfoReducerCreator');
|
||||||
|
|
||||||
// Actions
|
// Actions
|
||||||
bottle.serviceFactory('loadMercureInfo', loadMercureInfo, 'buildShlinkApiClient');
|
bottle.serviceFactory('loadMercureInfo', prop('loadMercureInfo'), 'mercureInfoReducerCreator');
|
||||||
};
|
};
|
||||||
|
|
||||||
export default provideServices;
|
export default provideServices;
|
||||||
|
|
|
@ -15,7 +15,6 @@ import shortUrlDetailReducer from '../short-urls/reducers/shortUrlDetail';
|
||||||
import tagsListReducer from '../tags/reducers/tagsList';
|
import tagsListReducer from '../tags/reducers/tagsList';
|
||||||
import tagDeleteReducer from '../tags/reducers/tagDelete';
|
import tagDeleteReducer from '../tags/reducers/tagDelete';
|
||||||
import tagEditReducer from '../tags/reducers/tagEdit';
|
import tagEditReducer from '../tags/reducers/tagEdit';
|
||||||
import mercureInfoReducer from '../mercure/reducers/mercureInfo';
|
|
||||||
import settingsReducer from '../settings/reducers/settings';
|
import settingsReducer from '../settings/reducers/settings';
|
||||||
import visitsOverviewReducer from '../visits/reducers/visitsOverview';
|
import visitsOverviewReducer from '../visits/reducers/visitsOverview';
|
||||||
import { appUpdatesReducer } from '../app/reducers/appUpdates';
|
import { appUpdatesReducer } from '../app/reducers/appUpdates';
|
||||||
|
@ -38,7 +37,7 @@ export default (container: IContainer) => combineReducers<ShlinkState>({
|
||||||
tagsList: tagsListReducer,
|
tagsList: tagsListReducer,
|
||||||
tagDelete: tagDeleteReducer,
|
tagDelete: tagDeleteReducer,
|
||||||
tagEdit: tagEditReducer,
|
tagEdit: tagEditReducer,
|
||||||
mercureInfo: mercureInfoReducer,
|
mercureInfo: container.mercureInfoReducer,
|
||||||
settings: settingsReducer,
|
settings: settingsReducer,
|
||||||
domainsList: container.domainsListReducer,
|
domainsList: container.domainsListReducer,
|
||||||
visitsOverview: visitsOverviewReducer,
|
visitsOverview: visitsOverviewReducer,
|
||||||
|
|
|
@ -1,12 +1,5 @@
|
||||||
import { Mock } from 'ts-mockery';
|
import { Mock } from 'ts-mockery';
|
||||||
import reducer, {
|
import { mercureInfoReducerCreator } from '../../../src/mercure/reducers/mercureInfo';
|
||||||
GET_MERCURE_INFO_START,
|
|
||||||
GET_MERCURE_INFO_ERROR,
|
|
||||||
GET_MERCURE_INFO,
|
|
||||||
loadMercureInfo,
|
|
||||||
GetMercureInfoAction,
|
|
||||||
} from '../../../src/mercure/reducers/mercureInfo';
|
|
||||||
import { ShlinkMercureInfo } from '../../../src/api/types';
|
|
||||||
import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient';
|
import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient';
|
||||||
import { GetState } from '../../../src/container/types';
|
import { GetState } from '../../../src/container/types';
|
||||||
|
|
||||||
|
@ -15,39 +8,35 @@ describe('mercureInfoReducer', () => {
|
||||||
mercureHubUrl: 'http://example.com/.well-known/mercure',
|
mercureHubUrl: 'http://example.com/.well-known/mercure',
|
||||||
token: 'abc.123.def',
|
token: 'abc.123.def',
|
||||||
};
|
};
|
||||||
|
const getMercureInfo = jest.fn();
|
||||||
|
const buildShlinkApiClient = () => Mock.of<ShlinkApiClient>({ mercureInfo: getMercureInfo });
|
||||||
|
const { loadMercureInfo, reducer } = mercureInfoReducerCreator(buildShlinkApiClient);
|
||||||
|
|
||||||
|
beforeEach(jest.resetAllMocks);
|
||||||
|
|
||||||
describe('reducer', () => {
|
describe('reducer', () => {
|
||||||
const action = (type: string, args: Partial<ShlinkMercureInfo> = {}) => Mock.of<GetMercureInfoAction>(
|
|
||||||
{ type, ...args },
|
|
||||||
);
|
|
||||||
|
|
||||||
it('returns loading on GET_MERCURE_INFO_START', () => {
|
it('returns loading on GET_MERCURE_INFO_START', () => {
|
||||||
expect(reducer(undefined, action(GET_MERCURE_INFO_START))).toEqual({
|
expect(reducer(undefined, { type: loadMercureInfo.pending.toString() })).toEqual({
|
||||||
loading: true,
|
loading: true,
|
||||||
error: false,
|
error: false,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('returns error on GET_MERCURE_INFO_ERROR', () => {
|
it('returns error on GET_MERCURE_INFO_ERROR', () => {
|
||||||
expect(reducer(undefined, action(GET_MERCURE_INFO_ERROR))).toEqual({
|
expect(reducer(undefined, { type: loadMercureInfo.rejected.toString() })).toEqual({
|
||||||
loading: false,
|
loading: false,
|
||||||
error: true,
|
error: true,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('returns mercure info on GET_MERCURE_INFO', () => {
|
it('returns mercure info on GET_MERCURE_INFO', () => {
|
||||||
expect(reducer(undefined, { type: GET_MERCURE_INFO, ...mercureInfo })).toEqual(expect.objectContaining({
|
expect(reducer(undefined, { type: loadMercureInfo.fulfilled.toString(), payload: mercureInfo })).toEqual(
|
||||||
...mercureInfo,
|
expect.objectContaining({ ...mercureInfo, loading: false, error: false }),
|
||||||
loading: false,
|
);
|
||||||
error: false,
|
|
||||||
}));
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('loadMercureInfo', () => {
|
describe('loadMercureInfo', () => {
|
||||||
const createApiClientMock = (result: Promise<ShlinkMercureInfo>) => Mock.of<ShlinkApiClient>({
|
|
||||||
mercureInfo: jest.fn().mockReturnValue(result),
|
|
||||||
});
|
|
||||||
const dispatch = jest.fn();
|
const dispatch = jest.fn();
|
||||||
const createGetStateMock = (enabled: boolean): GetState => jest.fn().mockReturnValue({
|
const createGetStateMock = (enabled: boolean): GetState => jest.fn().mockReturnValue({
|
||||||
settings: {
|
settings: {
|
||||||
|
@ -55,43 +44,55 @@ describe('mercureInfoReducer', () => {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(jest.resetAllMocks);
|
|
||||||
|
|
||||||
it('dispatches error when real time updates are disabled', async () => {
|
it('dispatches error when real time updates are disabled', async () => {
|
||||||
const apiClientMock = createApiClientMock(Promise.resolve(mercureInfo));
|
getMercureInfo.mockResolvedValue(mercureInfo);
|
||||||
const getState = createGetStateMock(false);
|
const getState = createGetStateMock(false);
|
||||||
|
|
||||||
await loadMercureInfo(() => apiClientMock)()(dispatch, getState);
|
await loadMercureInfo()(dispatch, getState, {});
|
||||||
|
|
||||||
expect(apiClientMock.mercureInfo).not.toHaveBeenCalled();
|
expect(getMercureInfo).not.toHaveBeenCalled();
|
||||||
expect(dispatch).toHaveBeenCalledTimes(2);
|
expect(dispatch).toHaveBeenCalledTimes(2);
|
||||||
expect(dispatch).toHaveBeenNthCalledWith(1, { type: GET_MERCURE_INFO_START });
|
expect(dispatch).toHaveBeenNthCalledWith(1, expect.objectContaining({
|
||||||
expect(dispatch).toHaveBeenNthCalledWith(2, { type: GET_MERCURE_INFO_ERROR });
|
type: loadMercureInfo.pending.toString(),
|
||||||
|
}));
|
||||||
|
expect(dispatch).toHaveBeenNthCalledWith(2, expect.objectContaining({
|
||||||
|
type: loadMercureInfo.rejected.toString(),
|
||||||
|
}));
|
||||||
});
|
});
|
||||||
|
|
||||||
it('calls API on success', async () => {
|
it('calls API on success', async () => {
|
||||||
const apiClientMock = createApiClientMock(Promise.resolve(mercureInfo));
|
getMercureInfo.mockResolvedValue(mercureInfo);
|
||||||
const getState = createGetStateMock(true);
|
const getState = createGetStateMock(true);
|
||||||
|
|
||||||
await loadMercureInfo(() => apiClientMock)()(dispatch, getState);
|
await loadMercureInfo()(dispatch, getState, {});
|
||||||
|
|
||||||
expect(apiClientMock.mercureInfo).toHaveBeenCalledTimes(1);
|
expect(getMercureInfo).toHaveBeenCalledTimes(1);
|
||||||
expect(dispatch).toHaveBeenCalledTimes(2);
|
expect(dispatch).toHaveBeenCalledTimes(2);
|
||||||
expect(dispatch).toHaveBeenNthCalledWith(1, { type: GET_MERCURE_INFO_START });
|
expect(dispatch).toHaveBeenNthCalledWith(1, expect.objectContaining({
|
||||||
expect(dispatch).toHaveBeenNthCalledWith(2, { type: GET_MERCURE_INFO, ...mercureInfo });
|
type: loadMercureInfo.pending.toString(),
|
||||||
|
}));
|
||||||
|
expect(dispatch).toHaveBeenNthCalledWith(2, expect.objectContaining({
|
||||||
|
type: loadMercureInfo.fulfilled.toString(),
|
||||||
|
payload: mercureInfo,
|
||||||
|
}));
|
||||||
});
|
});
|
||||||
|
|
||||||
it('throws error on failure', async () => {
|
it('throws error on failure', async () => {
|
||||||
const error = 'Error';
|
const error = 'Error';
|
||||||
const apiClientMock = createApiClientMock(Promise.reject(error));
|
|
||||||
const getState = createGetStateMock(true);
|
const getState = createGetStateMock(true);
|
||||||
|
|
||||||
await loadMercureInfo(() => apiClientMock)()(dispatch, getState);
|
getMercureInfo.mockRejectedValue(error);
|
||||||
|
|
||||||
expect(apiClientMock.mercureInfo).toHaveBeenCalledTimes(1);
|
await loadMercureInfo()(dispatch, getState, {});
|
||||||
|
|
||||||
|
expect(getMercureInfo).toHaveBeenCalledTimes(1);
|
||||||
expect(dispatch).toHaveBeenCalledTimes(2);
|
expect(dispatch).toHaveBeenCalledTimes(2);
|
||||||
expect(dispatch).toHaveBeenNthCalledWith(1, { type: GET_MERCURE_INFO_START });
|
expect(dispatch).toHaveBeenNthCalledWith(1, expect.objectContaining({
|
||||||
expect(dispatch).toHaveBeenNthCalledWith(2, { type: GET_MERCURE_INFO_ERROR });
|
type: loadMercureInfo.pending.toString(),
|
||||||
|
}));
|
||||||
|
expect(dispatch).toHaveBeenNthCalledWith(2, expect.objectContaining({
|
||||||
|
type: loadMercureInfo.rejected.toString(),
|
||||||
|
}));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue