Do not inject components into other components

src/common/Home.tsx

@@ -6,11 +6,12 @@ import type { FC } from 'react';
 import { useEffect } from 'react';
 import { ExternalLink } from 'react-external-link';
 import { useNavigate } from 'react-router';
+import { withoutSelectedServer } from '../servers/helpers/withoutSelectedServer';
 import { useServers } from '../servers/reducers/servers';
 import { ServersListGroup } from '../servers/ServersListGroup';
 import { ShlinkLogo } from './img/ShlinkLogo';
 
-export const Home: FC = () => {
+export const Home: FC = withoutSelectedServer(() => {
   const navigate = useNavigate();
   const { servers } = useServers();
   const serversList = Object.values(servers);
@@ -66,4 +67,4 @@ export const Home: FC = () => {
       </Card>
     </div>
   );
-};
+});

src/common/ShlinkWebComponentContainer.tsx

@@ -4,10 +4,10 @@ import {
   ShlinkSidebarVisibilityProvider,
   ShlinkWebComponent,
 } from '@shlinkio/shlink-web-component';
+import type { FC } from 'react';
 import { memo } from 'react';
 import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuilder';
-import type { FCWithDeps } from '../container/utils';
-import { componentFactory, useDependencies } from '../container/utils';
+import { withDependencies } from '../container/context';
 import { isReachableServer } from '../servers/data';
 import { ServerError } from '../servers/helpers/ServerError';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';
@@ -15,23 +15,21 @@ import { useSelectedServer } from '../servers/reducers/selectedServer';
 import { useSettings } from '../settings/reducers/settings';
 import { NotFound } from './NotFound';
 
-type ShlinkWebComponentContainerDeps = {
+export type ShlinkWebComponentContainerProps = {
   TagColorsStorage: TagColorsStorage;
   buildShlinkApiClient: ShlinkApiClientBuilder;
 };
 
-const ShlinkWebComponentContainer: FCWithDeps<
-  any,
-  ShlinkWebComponentContainerDeps
+const ShlinkWebComponentContainerBase: FC<
+  ShlinkWebComponentContainerProps
 // FIXME Using `memo` here to solve a flickering effect in charts.
 //       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(() => {
-  const {
-    buildShlinkApiClient,
-    TagColorsStorage: tagColorsStorage,
-  } = useDependencies(ShlinkWebComponentContainer);
+> = withSelectedServer(memo(({
+  buildShlinkApiClient,
+  TagColorsStorage: tagColorsStorage,
+}) => {
   const { selectedServer } = useSelectedServer();
   const { settings } = useSettings();
 
@@ -58,7 +56,7 @@ const ShlinkWebComponentContainer: FCWithDeps<
   );
 }));
 
-export const ShlinkWebComponentContainerFactory = componentFactory(ShlinkWebComponentContainer, [
+export const ShlinkWebComponentContainer = withDependencies(ShlinkWebComponentContainerBase, [
   'buildShlinkApiClient',
   'TagColorsStorage',
 ]);