Refactor DI approach for components

src/common/ShlinkWebComponentContainer.tsx

@@ -1,20 +1,34 @@
 import type { Settings, ShlinkWebComponentType, TagColorsStorage } from '@shlinkio/shlink-web-component';
 import type { FC } 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 { withSelectedServer } from '../servers/helpers/withSelectedServer';
 import { NotFound } from './NotFound';
 
-interface ShlinkWebComponentContainerProps {
+type ShlinkWebComponentContainerProps = WithSelectedServerProps & {
   settings: Settings;
-}
+};
 
-export const ShlinkWebComponentContainer = (
+type ShlinkWebComponentContainerDeps = {
   buildShlinkApiClient: ShlinkApiClientBuilder,
-  tagColorsStorage: TagColorsStorage,
+  TagColorsStorage: TagColorsStorage,
   ShlinkWebComponent: ShlinkWebComponentType,
   ServerError: FC,
-) => withSelectedServer<ShlinkWebComponentContainerProps>(({ selectedServer, settings }) => {
+};
+
+const ShlinkWebComponentContainer: FCWithDeps<
+ShlinkWebComponentContainerProps,
+ShlinkWebComponentContainerDeps
+> = withSelectedServer(({ selectedServer, settings }) => {
+  const {
+    buildShlinkApiClient,
+    TagColorsStorage: tagColorsStorage,
+    ShlinkWebComponent,
+    ServerError,
+  } = useDependencies(ShlinkWebComponentContainer);
   const selectedServerIsReachable = isReachableServer(selectedServer);
   const routesPrefix = selectedServerIsReachable ? `/server/${selectedServer.id}` : '';
 
@@ -34,4 +48,11 @@ export const ShlinkWebComponentContainer = (
       )}
     />
   );
-}, ServerError);
+});
+
+export const ShlinkWebComponentContainerFactory = componentFactory(ShlinkWebComponentContainer, [
+  'buildShlinkApiClient',
+  'TagColorsStorage',
+  'ShlinkWebComponent',
+  'ServerError',
+]);