forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-07-26 05:31:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create useSelectedServer hook and use it where reset selected server is done

Browse Source
This commit is contained in:
Alejandro Celaya
2025-11-14 09:54:03 +01:00
parent b295240d28
commit 7890d0084a
6 changed files with 41 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/servers/helpers/withoutSelectedServer.tsx
View File

@@ -1,13 +1,10 @@
import type { FC } from 'react';
import { useEffect } from 'react';
import { useSelectedServer } from '../reducers/selectedServer';
interface WithoutSelectedServerProps {
resetSelectedServer: () => unknown;
}
export function withoutSelectedServer<T extends object>(WrappedComponent: FC<WithoutSelectedServerProps & T>) {
return (props: WithoutSelectedServerProps & T) => {
const { resetSelectedServer } = props;
export function withoutSelectedServer<T extends object>(WrappedComponent: FC<T>) {
return (props: T) => {
const { resetSelectedServer } = useSelectedServer();
useEffect(() => {
resetSelectedServer();
}, [resetSelectedServer]);

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

@@ -1,7 +1,9 @@
import { createAction, createSlice } from '@reduxjs/toolkit';
import { memoizeWith } from '@shlinkio/data-manipulation';
import type { ShlinkHealth } from '@shlinkio/shlink-web-component/api-contract';
import { useCallback } from 'react';
import type { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
import { useAppDispatch, useAppSelector } from '../../container/store';
import { createAsyncThunk } from '../../utils/helpers/redux';
import { versionToPrintable, versionToSemVer as toSemVer } from '../../utils/helpers/version';
import type { SelectedServer, ServerWithId } from '../data';
@@ -72,3 +74,19 @@ const { reducer } = createSlice({
});
export const selectedServerReducer = reducer;
export const useSelectedServer = () => {
const dispatch = useAppDispatch();
const dispatchResetSelectedServer = useCallback(() => dispatch(resetSelectedServer()), [dispatch]);
const dispatchSelectServer = useCallback(
(options: SelectServerOptions) => dispatch(selectServer(options)),
[dispatch],
);
const selectedServer = useAppSelector(({ selectedServer }) => selectedServer);
return {
selectedServer,
resetSelectedServer: dispatchResetSelectedServer,
selectServer: dispatchSelectServer,
};
};

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

@@ -11,7 +11,7 @@ import { ManageServersFactory } from '../ManageServers';
import { ManageServersRowFactory } from '../ManageServersRow';
import { ManageServersRowDropdownFactory } from '../ManageServersRowDropdown';
import { fetchServers } from '../reducers/remoteServers';
import { resetSelectedServer, selectServer } from '../reducers/selectedServer';
import { selectServer } from '../reducers/selectedServer';
import { createServers, deleteServer, editServer, setAutoConnect } from '../reducers/servers';
import { ServersDropdown } from '../ServersDropdown';
import { ServersExporter } from './ServersExporter';
@@ -21,7 +21,7 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
// Components
bottle.factory('ManageServers', ManageServersFactory);
bottle.decorator('ManageServers', withoutSelectedServer);
bottle.decorator('ManageServers', connect(['selectedServer', 'servers'], ['resetSelectedServer']));
bottle.decorator('ManageServers', connect(['selectedServer', 'servers'], []));
bottle.factory('ManageServersRow', ManageServersRowFactory);
@@ -30,10 +30,10 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
bottle.factory('CreateServer', CreateServerFactory);
bottle.decorator('CreateServer', withoutSelectedServer);
bottle.decorator('CreateServer', connect(['selectedServer', 'servers'], ['createServers', 'resetSelectedServer']));
bottle.decorator('CreateServer', connect(['selectedServer', 'servers'], ['createServers']));
bottle.factory('EditServer', EditServerFactory);
bottle.decorator('EditServer', connect(['selectedServer'], ['editServer', 'selectServer', 'resetSelectedServer']));
bottle.decorator('EditServer', connect(['selectedServer'], ['editServer', 'selectServer']));
bottle.serviceFactory('ServersDropdown', () => ServersDropdown);
bottle.decorator('ServersDropdown', connect(['servers', 'selectedServer']));
@@ -60,6 +60,4 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
bottle.serviceFactory('editServer', () => editServer);
bottle.serviceFactory('setAutoConnect', () => setAutoConnect);
bottle.serviceFactory('fetchServers', fetchServers, 'HttpClient');
bottle.serviceFactory('resetSelectedServer', () => resetSelectedServer);
};