Do not inject servers state or actions

src/servers/helpers/DuplicatedServersModal.tsx

@@ -26,7 +26,7 @@ export const DuplicatedServersModal: FC<DuplicatedServersModalProps> = (
       cancelText={hasMultipleServers ? 'Ignore duplicates' : 'Discard'}
     >
       <p>{hasMultipleServers ? 'The next servers already exist:' : 'There is already a server with:'}</p>
-      <ul className="list-disc mt-4">
+      <ul className="list-disc my-4 pl-5">
         {duplicatedServers.map(({ url, apiKey }, index) => (!hasMultipleServers ? (
           <Fragment key={index}>
             <li>URL: <b>{url}</b></li>

src/servers/helpers/ImportServersBtn.tsx

@@ -5,7 +5,8 @@ import type { ChangeEvent, PropsWithChildren } from 'react';
 import { useCallback, useRef, useState } from 'react';
 import type { FCWithDeps } from '../../container/utils';
 import { componentFactory, useDependencies } from '../../container/utils';
-import type { ServerData, ServersMap, ServerWithId } from '../data';
+import type { ServerData } from '../data';
+import { useServers } from '../reducers/servers';
 import type { ServersImporter } from '../services/ServersImporter';
 import { DuplicatedServersModal } from './DuplicatedServersModal';
 import { dedupServers, ensureUniqueIds } from './index';
@@ -17,24 +18,18 @@ export type ImportServersBtnProps = PropsWithChildren<{
   className?: string;
 }>;
 
-type ImportServersBtnConnectProps = ImportServersBtnProps & {
-  createServers: (servers: ServerWithId[]) => void;
-  servers: ServersMap;
-};
-
 type ImportServersBtnDeps = {
   ServersImporter: ServersImporter
 };
 
-const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBtnDeps> = ({
-  createServers,
-  servers,
+const ImportServersBtn: FCWithDeps<ImportServersBtnProps, ImportServersBtnDeps> = ({
   children,
   onImport,
   onError = () => {},
   tooltipPlacement = 'bottom',
   className = '',
 }) => {
+  const { createServers, servers } = useServers();
   const { ServersImporter: serversImporter } = useDependencies(ImportServersBtn);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { anchor, tooltip } = useTooltip({ placement: tooltipPlacement });

src/servers/helpers/ServerError.tsx

@@ -2,24 +2,14 @@ import { Card, Message } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { Link } from 'react-router';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
-import type { FCWithDeps } from '../../container/utils';
-import { componentFactory, useDependencies } from '../../container/utils';
-import type { ServersMap } from '../data';
 import { isServerWithId } from '../data';
-import type { DeleteServerButtonProps } from '../DeleteServerButton';
+import { DeleteServerButton } from '../DeleteServerButton';
 import { useSelectedServer } from '../reducers/selectedServer';
+import { useServers } from '../reducers/servers';
 import { ServersListGroup } from '../ServersListGroup';
 
-type ServerErrorProps = {
-  servers: ServersMap;
-};
-
-type ServerErrorDeps = {
-  DeleteServerButton: FC<DeleteServerButtonProps>;
-};
-
-const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers }) => {
-  const { DeleteServerButton } = useDependencies(ServerError);
+export const ServerError: FC = () => {
+  const { servers } = useServers();
   const { selectedServer } = useSelectedServer();
 
   return (
@@ -55,5 +45,3 @@ const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers })
     </NoMenuLayout>
   );
 };
-
-export const ServerErrorFactory = componentFactory(ServerError, ['DeleteServerButton']);

src/servers/helpers/withSelectedServer.tsx

@@ -1,5 +1,4 @@
 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';
@@ -8,9 +7,9 @@ import type { FCWithDeps } from '../../container/utils';
 import { useDependencies } from '../../container/utils';
 import { isNotFoundServer } from '../data';
 import { useSelectedServer } from '../reducers/selectedServer';
+import { ServerError } from './ServerError';
 
 export type WithSelectedServerPropsDeps = {
-  ServerError: FC;
   buildShlinkApiClient: ShlinkApiClientBuilder;
 };
 
@@ -18,7 +17,7 @@ export function withSelectedServer<T extends object>(
   WrappedComponent: FCWithDeps<T, WithSelectedServerPropsDeps>,
 ) {
   const ComponentWrapper: FCWithDeps<T, WithSelectedServerPropsDeps> = (props) => {
-    const { ServerError, buildShlinkApiClient } = useDependencies(ComponentWrapper);
+    const { buildShlinkApiClient } = useDependencies(ComponentWrapper);
     const params = useParams<{ serverId: string }>();
     const { selectServer, selectedServer } = useSelectedServer();