Replace usage of injected selectedServer with useSelectedServer

src/common/ShlinkVersionsContainer.tsx

@@ -1,16 +1,15 @@
 import { clsx } from 'clsx';
-import type { SelectedServer } from '../servers/data';
 import { isReachableServer } from '../servers/data';
+import { useSelectedServer } from '../servers/reducers/selectedServer';
 import { ShlinkVersions } from './ShlinkVersions';
 
-export type ShlinkVersionsContainerProps = {
-  selectedServer: SelectedServer;
+export const ShlinkVersionsContainer = () => {
+  const { selectedServer } = useSelectedServer();
+  return (
+    <div
+      className={clsx('text-center', { 'md:ml-(--aside-menu-width)': isReachableServer(selectedServer) })}
+    >
+      <ShlinkVersions selectedServer={selectedServer} />
+    </div>
+  );
 };
-
-export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => (
-  <div
-    className={clsx('text-center', { 'md:ml-(--aside-menu-width)': isReachableServer(selectedServer) })}
-  >
-    <ShlinkVersions selectedServer={selectedServer} />
-  </div>
-);

src/common/ShlinkWebComponentContainer.tsx

@@ -9,11 +9,12 @@ import { memo } from 'react';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
 import { isReachableServer } from '../servers/data';
-import type { WithSelectedServerProps, WithSelectedServerPropsDeps } from '../servers/helpers/withSelectedServer';
+import type { WithSelectedServerPropsDeps } from '../servers/helpers/withSelectedServer';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';
+import { useSelectedServer } from '../servers/reducers/selectedServer';
 import { NotFound } from './NotFound';
 
-type ShlinkWebComponentContainerProps = WithSelectedServerProps & {
+type ShlinkWebComponentContainerProps = {
   settings: Settings;
 };
 
@@ -28,12 +29,13 @@ const ShlinkWebComponentContainer: FCWithDeps<
 //       memo is probably not the right solution. The root cause is the withSelectedServer HOC, but I couldn't fix the
 //       extra rendering there.
 //       This should be revisited at some point.
-> = withSelectedServer(memo(({ selectedServer, settings }) => {
+> = withSelectedServer(memo(({ settings }) => {
   const {
     buildShlinkApiClient,
     TagColorsStorage: tagColorsStorage,
     ServerError,
   } = useDependencies(ShlinkWebComponentContainer);
+  const { selectedServer } = useSelectedServer();
 
   if (!isReachableServer(selectedServer)) {
     return <ServerError />;

src/common/services/provideServices.ts

@@ -26,10 +26,9 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.decorator('Home', connect(['servers'], []));
 
   bottle.factory('ShlinkWebComponentContainer', ShlinkWebComponentContainerFactory);
-  bottle.decorator('ShlinkWebComponentContainer', connect(['selectedServer', 'settings'], ['selectServer']));
+  bottle.decorator('ShlinkWebComponentContainer', connect(['settings'], ['selectServer']));
 
   bottle.serviceFactory('ShlinkVersionsContainer', () => ShlinkVersionsContainer);
-  bottle.decorator('ShlinkVersionsContainer', connect(['selectedServer']));
 
   bottle.serviceFactory('ErrorHandler', () => ErrorHandler);
 };

src/servers/EditServer.tsx

@@ -6,17 +6,17 @@ import { useGoBack } from '../utils/helpers/hooks';
 import type { ServerData } from './data';
 import { isServerWithId } from './data';
 import { ServerForm } from './helpers/ServerForm';
-import type { WithSelectedServerProps, WithSelectedServerPropsDeps } from './helpers/withSelectedServer';
+import type { WithSelectedServerPropsDeps } from './helpers/withSelectedServer';
 import { withSelectedServer } from './helpers/withSelectedServer';
+import { useSelectedServer } from './reducers/selectedServer';
 
-type EditServerProps = WithSelectedServerProps & {
+type EditServerProps = {
   editServer: (serverId: string, serverData: ServerData) => void;
 };
 
-const EditServer: FCWithDeps<EditServerProps, WithSelectedServerPropsDeps> = withSelectedServer((
-  { editServer, selectedServer, selectServer },
-) => {
+const EditServer: FCWithDeps<EditServerProps, WithSelectedServerPropsDeps> = withSelectedServer(({ editServer }) => {
   const { buildShlinkApiClient } = useDependencies(EditServer);
+  const { selectServer, selectedServer } = useSelectedServer();
   const goBack = useGoBack();
   const { reconnect } = useParsedQuery<{ reconnect?: 'true' }>();
 

src/servers/ServersDropdown.tsx

@@ -1,16 +1,17 @@
 import { faPlus as plusIcon, faServer as serverIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Dropdown, NavBar } from '@shlinkio/shlink-frontend-kit';
-import type { SelectedServer, ServersMap } from './data';
+import type { ServersMap } from './data';
 import { getServerId } from './data';
+import { useSelectedServer } from './reducers/selectedServer';
 
 export interface ServersDropdownProps {
   servers: ServersMap;
-  selectedServer: SelectedServer;
 }
 
-export const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
+export const ServersDropdown = ({ servers }: ServersDropdownProps) => {
   const serversList = Object.values(servers);
+  const { selectedServer } = useSelectedServer();
 
   return (
     <NavBar.Dropdown buttonContent={(

src/servers/helpers/ServerError.tsx

@@ -4,22 +4,23 @@ import { Link } from 'react-router';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
 import type { FCWithDeps } from '../../container/utils';
 import { componentFactory, useDependencies } from '../../container/utils';
-import type { SelectedServer, ServersMap } from '../data';
+import type { ServersMap } from '../data';
 import { isServerWithId } from '../data';
 import type { DeleteServerButtonProps } from '../DeleteServerButton';
+import { useSelectedServer } from '../reducers/selectedServer';
 import { ServersListGroup } from '../ServersListGroup';
 
 type ServerErrorProps = {
   servers: ServersMap;
-  selectedServer: SelectedServer;
 };
 
 type ServerErrorDeps = {
   DeleteServerButton: FC<DeleteServerButtonProps>;
 };
 
-const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers, selectedServer }) => {
+const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers }) => {
   const { DeleteServerButton } = useDependencies(ServerError);
+  const { selectedServer } = useSelectedServer();
 
   return (
     <NoMenuLayout>

src/servers/helpers/withSelectedServer.tsx

@@ -6,14 +6,8 @@ import type { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientB
 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: (options: SelectServerOptions) => void;
-  selectedServer: SelectedServer;
-};
+import { useSelectedServer } from '../reducers/selectedServer';
 
 export type WithSelectedServerPropsDeps = {
   ServerError: FC;
@@ -21,12 +15,12 @@ export type WithSelectedServerPropsDeps = {
 };
 
 export function withSelectedServer<T extends object>(
-  WrappedComponent: FCWithDeps<WithSelectedServerProps & T, WithSelectedServerPropsDeps>,
+  WrappedComponent: FCWithDeps<T, WithSelectedServerPropsDeps>,
 ) {
-  const ComponentWrapper: FCWithDeps<WithSelectedServerProps & T, WithSelectedServerPropsDeps> = (props) => {
+  const ComponentWrapper: FCWithDeps<T, WithSelectedServerPropsDeps> = (props) => {
     const { ServerError, buildShlinkApiClient } = useDependencies(ComponentWrapper);
     const params = useParams<{ serverId: string }>();
-    const { selectServer, selectedServer } = props;
+    const { selectServer, selectedServer } = useSelectedServer();
 
     useEffect(() => {
       if (params.serverId) {

src/servers/reducers/selectedServer.ts

@@ -63,7 +63,7 @@ export const selectServer = createAsyncThunk(
   },
 );
 
-const { reducer } = createSlice({
+export const { reducer: selectedServerReducer } = createSlice({
   name: REDUCER_PREFIX,
   initialState: initialState as SelectedServer,
   reducers: {},
@@ -73,8 +73,6 @@ const { reducer } = createSlice({
   },
 });
 
-export const selectedServerReducer = reducer;
-
 export const useSelectedServer = () => {
   const dispatch = useAppDispatch();
   const dispatchResetSelectedServer = useCallback(() => dispatch(resetSelectedServer()), [dispatch]);

src/servers/services/provideServices.ts

@@ -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'], []));
+  bottle.decorator('ManageServers', connect(['servers'], []));
 
   bottle.factory('ManageServersRow', ManageServersRowFactory);
 
@@ -30,13 +30,13 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
 
   bottle.factory('CreateServer', CreateServerFactory);
   bottle.decorator('CreateServer', withoutSelectedServer);
-  bottle.decorator('CreateServer', connect(['selectedServer', 'servers'], ['createServers']));
+  bottle.decorator('CreateServer', connect(['servers'], ['createServers']));
 
   bottle.factory('EditServer', EditServerFactory);
-  bottle.decorator('EditServer', connect(['selectedServer'], ['editServer', 'selectServer']));
+  bottle.decorator('EditServer', connect([], ['editServer', 'selectServer']));
 
   bottle.serviceFactory('ServersDropdown', () => ServersDropdown);
-  bottle.decorator('ServersDropdown', connect(['servers', 'selectedServer']));
+  bottle.decorator('ServersDropdown', connect(['servers']));
 
   bottle.serviceFactory('DeleteServerModal', () => DeleteServerModal);
   bottle.decorator('DeleteServerModal', connect(null, ['deleteServer']));
@@ -47,7 +47,7 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.decorator('ImportServersBtn', connect(['servers'], ['createServers']));
 
   bottle.factory('ServerError', ServerErrorFactory);
-  bottle.decorator('ServerError', connect(['servers', 'selectedServer']));
+  bottle.decorator('ServerError', connect(['servers']));
 
   // Services
   bottle.service('ServersImporter', ServersImporter, 'csvToJson');