forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-02 13:51:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Stop injecting dependencies in selectServer action

Browse Source
This commit is contained in:
Alejandro Celaya
2025-11-14 08:50:08 +01:00
parent e9951e95a9
commit b295240d28
6 changed files with 33 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/common/ShlinkWebComponentContainer.tsx
View File

@@ -5,13 +5,11 @@ import {
ShlinkWebComponent,
} from '@shlinkio/shlink-web-component';
import type { Settings } from '@shlinkio/shlink-web-component/settings';
import type { FC } from 'react';
import { memo } from 'react';
import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuilder';
import type { FCWithDeps } from '../container/utils';
import { componentFactory, useDependencies } from '../container/utils';
import { isReachableServer } from '../servers/data';
import type { WithSelectedServerProps } from '../servers/helpers/withSelectedServer';
import type { WithSelectedServerProps, WithSelectedServerPropsDeps } from '../servers/helpers/withSelectedServer';
import { withSelectedServer } from '../servers/helpers/withSelectedServer';
import { NotFound } from './NotFound';
@@ -19,10 +17,8 @@ type ShlinkWebComponentContainerProps = WithSelectedServerProps & {
settings: Settings;
};
type ShlinkWebComponentContainerDeps = {
buildShlinkApiClient: ShlinkApiClientBuilder,
type ShlinkWebComponentContainerDeps = WithSelectedServerPropsDeps & {
TagColorsStorage: TagColorsStorage,
ServerError: FC,
};
const ShlinkWebComponentContainer: FCWithDeps<

16
src/servers/EditServer.tsx
View File

@@ -1,26 +1,22 @@
import { Button,useParsedQuery } from '@shlinkio/shlink-frontend-kit';
import type { FC } from 'react';
import { Button, useParsedQuery } from '@shlinkio/shlink-frontend-kit';
import { NoMenuLayout } from '../common/NoMenuLayout';
import type { FCWithDeps } from '../container/utils';
import { componentFactory } from '../container/utils';
import { componentFactory, useDependencies } from '../container/utils';
import { useGoBack } from '../utils/helpers/hooks';
import type { ServerData } from './data';
import { isServerWithId } from './data';
import { ServerForm } from './helpers/ServerForm';
import type { WithSelectedServerProps } from './helpers/withSelectedServer';
import type { WithSelectedServerProps, WithSelectedServerPropsDeps } from './helpers/withSelectedServer';
import { withSelectedServer } from './helpers/withSelectedServer';
type EditServerProps = WithSelectedServerProps & {
editServer: (serverId: string, serverData: ServerData) => void;
};
type EditServerDeps = {
ServerError: FC;
};
const EditServer: FCWithDeps<EditServerProps, EditServerDeps> = withSelectedServer((
const EditServer: FCWithDeps<EditServerProps, WithSelectedServerPropsDeps> = withSelectedServer((
{ editServer, selectedServer, selectServer },
) => {
const { buildShlinkApiClient } = useDependencies(EditServer);
const goBack = useGoBack();
const { reconnect } = useParsedQuery<{ reconnect?: 'true' }>();
@@ -31,7 +27,7 @@ const EditServer: FCWithDeps<EditServerProps, EditServerDeps> = withSelectedServ
const handleSubmit = (serverData: ServerData) => {
editServer(selectedServer.id, serverData);
if (reconnect === 'true') {
selectServer(selectedServer.id);
selectServer({ serverId: selectedServer.id, buildShlinkApiClient });
}
goBack();
};

13
src/servers/helpers/withSelectedServer.tsx
View File

@@ -2,34 +2,37 @@ import { Message } from '@shlinkio/shlink-frontend-kit';
import type { FC } from 'react';
import { useEffect } from 'react';
import { useParams } from 'react-router';
import type { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
import { NoMenuLayout } from '../../common/NoMenuLayout';
import type { FCWithDeps } from '../../container/utils';
import { useDependencies } from '../../container/utils';
import type { SelectedServer } from '../data';
import { isNotFoundServer } from '../data';
import type { SelectServerOptions } from '../reducers/selectedServer';
export type WithSelectedServerProps = {
selectServer: (serverId: string) => void;
selectServer: (options: SelectServerOptions) => void;
selectedServer: SelectedServer;
};
type WithSelectedServerPropsDeps = {
export type WithSelectedServerPropsDeps = {
ServerError: FC;
buildShlinkApiClient: ShlinkApiClientBuilder;
};
export function withSelectedServer<T extends object>(
WrappedComponent: FCWithDeps<WithSelectedServerProps & T, WithSelectedServerPropsDeps>,
) {
const ComponentWrapper: FCWithDeps<WithSelectedServerProps & T, WithSelectedServerPropsDeps> = (props) => {
const { ServerError } = useDependencies(ComponentWrapper);
const { ServerError, buildShlinkApiClient } = useDependencies(ComponentWrapper);
const params = useParams<{ serverId: string }>();
const { selectServer, selectedServer } = props;
useEffect(() => {
if (params.serverId) {
selectServer(params.serverId);
selectServer({ serverId: params.serverId, buildShlinkApiClient });
}
}, [params.serverId, selectServer]);
}, [buildShlinkApiClient, params.serverId, selectServer]);
if (!selectedServer) {
return (

16
src/servers/reducers/selectedServer.ts
View File

@@ -29,9 +29,14 @@ const initialState: SelectedServer = null;
export const resetSelectedServer = createAction<void>(`${REDUCER_PREFIX}/resetSelectedServer`);
export const selectServer = (buildShlinkApiClient: ShlinkApiClientBuilder) => createAsyncThunk(
export type SelectServerOptions = {
serverId: string;
buildShlinkApiClient: ShlinkApiClientBuilder;
};
export const selectServer = createAsyncThunk(
`${REDUCER_PREFIX}/selectServer`,
async (serverId: string, { dispatch, getState }): Promise<SelectedServer> => {
async ({ serverId, buildShlinkApiClient }: SelectServerOptions, { dispatch, getState }): Promise<SelectedServer> => {
dispatch(resetSelectedServer());
const { servers } = getState();
@@ -58,14 +63,11 @@ export const selectServer = (buildShlinkApiClient: ShlinkApiClientBuilder) => cr
const { reducer } = createSlice({
name: REDUCER_PREFIX,
initialState,
initialState: initialState as SelectedServer,
reducers: {},
extraReducers: (builder) => {
builder.addCase(resetSelectedServer, () => initialState);
builder.addCase(
`${REDUCER_PREFIX}/selectServer/fulfilled`,
(_, { payload }: { payload: SelectedServer }) => payload,
);
builder.addCase(selectServer.fulfilled, (_, { payload }) => payload);
},
});

2
src/servers/services/provideServices.ts
View File

@@ -54,7 +54,7 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
bottle.service('ServersExporter', ServersExporter, 'Storage', 'window', 'jsonToCsv');
// Actions
bottle.serviceFactory('selectServer', selectServer, 'buildShlinkApiClient', 'loadMercureInfo');
bottle.serviceFactory('selectServer', () => selectServer, 'buildShlinkApiClient', 'loadMercureInfo');
bottle.serviceFactory('createServers', () => createServers);
bottle.serviceFactory('deleteServer', () => deleteServer);
bottle.serviceFactory('editServer', () => editServer);

15
test/servers/reducers/selectedServer.test.ts
View File

@@ -7,14 +7,13 @@ import {
MIN_FALLBACK_VERSION,
resetSelectedServer,
selectedServerReducer as reducer,
selectServer as selectServerCreator,
selectServer,
} from '../../../src/servers/reducers/selectedServer';
describe('selectedServerReducer', () => {
const dispatch = vi.fn();
const health = vi.fn();
const buildApiClient = vi.fn().mockReturnValue(fromPartial<ShlinkApiClient>({ health }));
const selectServer = selectServerCreator(buildApiClient);
const buildShlinkApiClient = vi.fn().mockReturnValue(fromPartial<ShlinkApiClient>({ health }));
describe('reducer', () => {
it('returns default when action is RESET_SELECTED_SERVER', () =>
@@ -22,7 +21,7 @@ describe('selectedServerReducer', () => {
it('returns selected server when action is SELECT_SERVER', () => {
const payload = fromPartial<RegularServer>({ id: 'abc123' });
expect(reducer(null, selectServer.fulfilled(payload, '', ''))).toEqual(payload);
expect(reducer(null, selectServer.fulfilled(payload, '', { serverId: '', buildShlinkApiClient }))).toEqual(payload);
});
});
@@ -49,10 +48,10 @@ describe('selectedServerReducer', () => {
health.mockResolvedValue({ version: serverVersion });
await selectServer(id)(dispatch, getState, {});
await selectServer({ serverId: id, buildShlinkApiClient })(dispatch, getState, {});
expect(getState).toHaveBeenCalledTimes(1);
expect(buildApiClient).toHaveBeenCalledTimes(1);
expect(buildShlinkApiClient).toHaveBeenCalledTimes(1);
expect(dispatch).toHaveBeenCalledTimes(3); // "Pending", "reset" and "fulfilled"
expect(dispatch).toHaveBeenLastCalledWith(expect.objectContaining({ payload: expectedSelectedServer }));
});
@@ -64,7 +63,7 @@ describe('selectedServerReducer', () => {
health.mockRejectedValue({});
await selectServer(id)(dispatch, getState, {});
await selectServer({ serverId: id, buildShlinkApiClient })(dispatch, getState, {});
expect(health).toHaveBeenCalled();
expect(dispatch).toHaveBeenLastCalledWith(expect.objectContaining({ payload: expectedSelectedServer }));
@@ -75,7 +74,7 @@ describe('selectedServerReducer', () => {
const getState = vi.fn(() => fromPartial<ShlinkState>({ servers: {} }));
const expectedSelectedServer: NotFoundServer = { serverNotFound: true };
await selectServer(id)(dispatch, getState, {});
await selectServer({ serverId: id, buildShlinkApiClient })(dispatch, getState, {});
expect(getState).toHaveBeenCalled();
expect(health).not.toHaveBeenCalled();