Do not inject settings state or actions

src/common/ShlinkWebComponentContainer.tsx

@@ -4,7 +4,6 @@ import {
   ShlinkSidebarVisibilityProvider,
   ShlinkWebComponent,
 } from '@shlinkio/shlink-web-component';
-import type { Settings } from '@shlinkio/shlink-web-component/settings';
 import { memo } from 'react';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
@@ -13,29 +12,27 @@ import { ServerError } from '../servers/helpers/ServerError';
 import type { WithSelectedServerPropsDeps } from '../servers/helpers/withSelectedServer';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';
 import { useSelectedServer } from '../servers/reducers/selectedServer';
+import { useSettings } from '../settings/reducers/settings';
 import { NotFound } from './NotFound';
 
-type ShlinkWebComponentContainerProps = {
-  settings: Settings;
-};
-
 type ShlinkWebComponentContainerDeps = WithSelectedServerPropsDeps & {
   TagColorsStorage: TagColorsStorage,
 };
 
 const ShlinkWebComponentContainer: FCWithDeps<
-  ShlinkWebComponentContainerProps,
+  any,
   ShlinkWebComponentContainerDeps
 // 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(({ settings }) => {
+> = withSelectedServer(memo(() => {
   const {
     buildShlinkApiClient,
     TagColorsStorage: tagColorsStorage,
   } = useDependencies(ShlinkWebComponentContainer);
   const { selectedServer } = useSelectedServer();
+  const { settings } = useSettings();
 
   if (!isReachableServer(selectedServer)) {
     return <ServerError />;

src/common/services/provideServices.ts

@@ -1,27 +1,18 @@
 import { FetchHttpClient } from '@shlinkio/shlink-js-sdk/fetch';
 import type Bottle from 'bottlejs';
-import type { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
-import { ErrorHandler } from '../ErrorHandler';
 import { Home } from '../Home';
-import { ScrollToTop } from '../ScrollToTop';
 import { ShlinkWebComponentContainerFactory } from '../ShlinkWebComponentContainer';
 
-export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
+export const provideServices = (bottle: Bottle) => {
   // Services
   bottle.constant('window', window);
   bottle.constant('console', console);
   bottle.constant('fetch', window.fetch.bind(window));
   bottle.service('HttpClient', FetchHttpClient, 'fetch');
 
-  // Components
-  bottle.serviceFactory('ScrollToTop', () => ScrollToTop);
-
   bottle.serviceFactory('Home', () => Home);
   bottle.decorator('Home', withoutSelectedServer);
 
   bottle.factory('ShlinkWebComponentContainer', ShlinkWebComponentContainerFactory);
-  bottle.decorator('ShlinkWebComponentContainer', connect(['settings'], []));
-
-  bottle.serviceFactory('ErrorHandler', () => ErrorHandler);
 };