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);
 };