Refactor DI approach for components

src/settings/Settings.tsx

@@ -2,6 +2,17 @@ import { NavPillItem, NavPills } from '@shlinkio/shlink-frontend-kit';
 import type { FC, ReactNode } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { NoMenuLayout } from '../common/NoMenuLayout';
+import type { FCWithDeps } from '../container/utils';
+import { componentFactory, useDependencies } from '../container/utils';
+
+type SettingsDeps = {
+  RealTimeUpdatesSettings: FC;
+  ShortUrlCreationSettings: FC;
+  ShortUrlsListSettings: FC;
+  UserInterfaceSettings: FC;
+  VisitsSettings: FC;
+  TagsSettings: FC;
+};
 
 const SettingsSections: FC<{ items: ReactNode[] }> = ({ items }) => (
   <>
@@ -9,26 +20,39 @@ const SettingsSections: FC<{ items: ReactNode[] }> = ({ items }) => (
   </>
 );
 
-export const Settings = (
-  RealTimeUpdates: FC,
-  ShortUrlCreation: FC,
-  ShortUrlsList: FC,
-  UserInterface: FC,
-  Visits: FC,
-  Tags: FC,
-) => () => (
-  <NoMenuLayout>
-    <NavPills className="mb-3">
-      <NavPillItem to="general">General</NavPillItem>
-      <NavPillItem to="short-urls">Short URLs</NavPillItem>
-      <NavPillItem to="other-items">Other items</NavPillItem>
-    </NavPills>
+const Settings: FCWithDeps<{}, SettingsDeps> = () => {
+  const {
+    RealTimeUpdatesSettings: RealTimeUpdates,
+    ShortUrlCreationSettings: ShortUrlCreation,
+    ShortUrlsListSettings: ShortUrlsList,
+    UserInterfaceSettings: UserInterface,
+    VisitsSettings: Visits,
+    TagsSettings: Tags,
+  } = useDependencies(Settings);
 
-    <Routes>
-      <Route path="general" element={<SettingsSections items={[<UserInterface />, <RealTimeUpdates />]} />} />
-      <Route path="short-urls" element={<SettingsSections items={[<ShortUrlCreation />, <ShortUrlsList />]} />} />
-      <Route path="other-items" element={<SettingsSections items={[<Tags />, <Visits />]} />} />
-      <Route path="*" element={<Navigate replace to="general" />} />
-    </Routes>
-  </NoMenuLayout>
-);
+  return (
+    <NoMenuLayout>
+      <NavPills className="mb-3">
+        <NavPillItem to="general">General</NavPillItem>
+        <NavPillItem to="short-urls">Short URLs</NavPillItem>
+        <NavPillItem to="other-items">Other items</NavPillItem>
+      </NavPills>
+
+      <Routes>
+        <Route path="general" element={<SettingsSections items={[<UserInterface />, <RealTimeUpdates />]} />} />
+        <Route path="short-urls" element={<SettingsSections items={[<ShortUrlCreation />, <ShortUrlsList />]} />} />
+        <Route path="other-items" element={<SettingsSections items={[<Tags />, <Visits />]} />} />
+        <Route path="*" element={<Navigate replace to="general" />} />
+      </Routes>
+    </NoMenuLayout>
+  );
+};
+
+export const SettingsFactory = componentFactory(Settings, [
+  'RealTimeUpdatesSettings',
+  'ShortUrlCreationSettings',
+  'ShortUrlsListSettings',
+  'UserInterfaceSettings',
+  'VisitsSettings',
+  'TagsSettings',
+]);

src/settings/services/provideServices.ts

@@ -11,7 +11,7 @@ import {
   setVisitsSettings,
   toggleRealTimeUpdates,
 } from '../reducers/settings';
-import { Settings } from '../Settings';
+import { SettingsFactory } from '../Settings';
 import { ShortUrlCreationSettings } from '../ShortUrlCreationSettings';
 import { ShortUrlsListSettings } from '../ShortUrlsListSettings';
 import { TagsSettings } from '../TagsSettings';
@@ -20,16 +20,7 @@ import { VisitsSettings } from '../VisitsSettings';
 
 export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
-  bottle.serviceFactory(
-    'Settings',
-    Settings,
-    'RealTimeUpdatesSettings',
-    'ShortUrlCreationSettings',
-    'ShortUrlsListSettings',
-    'UserInterfaceSettings',
-    'VisitsSettings',
-    'TagsSettings',
-  );
+  bottle.factory('Settings', SettingsFactory);
   bottle.decorator('Settings', withoutSelectedServer);
   bottle.decorator('Settings', connect(null, ['resetSelectedServer']));