Set everything up to use hooks for reduc actions and state

src/settings/Settings.tsx

@@ -1,20 +1,18 @@
-import type { Settings as AppSettings } from '@shlinkio/shlink-web-component/settings';
 import { ShlinkWebSettings } from '@shlinkio/shlink-web-component/settings';
 import type { FC } from 'react';
 import { NoMenuLayout } from '../common/NoMenuLayout';
-import { DEFAULT_SHORT_URLS_ORDERING } from './reducers/settings';
+import { DEFAULT_SHORT_URLS_ORDERING, useSettings } from './reducers/settings';
 
-export type SettingsProps = {
-  settings: AppSettings;
-  setSettings: (newSettings: AppSettings) => void;
+export const Settings: FC = () => {
+  const { settings, setSettings } = useSettings();
+
+  return (
+    <NoMenuLayout>
+      <ShlinkWebSettings
+        settings={settings}
+        onUpdateSettings={setSettings}
+        defaultShortUrlsListOrdering={DEFAULT_SHORT_URLS_ORDERING}
+      />
+    </NoMenuLayout>
+  );
 };
-
-export const Settings: FC<SettingsProps> = ({ settings, setSettings }) => (
-  <NoMenuLayout>
-    <ShlinkWebSettings
-      settings={settings}
-      onUpdateSettings={setSettings}
-      defaultShortUrlsListOrdering={DEFAULT_SHORT_URLS_ORDERING}
-    />
-  </NoMenuLayout>
-);

src/settings/reducers/settings.ts

@@ -3,6 +3,9 @@ import { createSlice } from '@reduxjs/toolkit';
 import { mergeDeepRight } from '@shlinkio/data-manipulation';
 import { getSystemPreferredTheme } from '@shlinkio/shlink-frontend-kit';
 import type { Settings, ShortUrlsListSettings } from '@shlinkio/shlink-web-component/settings';
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import type { ShlinkState } from '../../container/types';
 import type { Defined } from '../../utils/types';
 
 type ShortUrlsOrder = Defined<ShortUrlsListSettings['defaultOrdering']>;
@@ -41,3 +44,11 @@ const { reducer, actions } = createSlice({
 export const { setSettings } = actions;
 
 export const settingsReducer = reducer;
+
+export const useSettings = () => {
+  const dispatch = useDispatch();
+  const setSettings = useCallback((settings: Settings) => dispatch(actions.setSettings(settings)), [dispatch]);
+  const settings = useSelector((state: ShlinkState) => state.settings);
+
+  return { settings, setSettings };
+};

src/settings/services/provideServices.ts

@@ -1,15 +0,0 @@
-import type Bottle from 'bottlejs';
-import type { ConnectDecorator } from '../../container/types';
-import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
-import { setSettings } from '../reducers/settings';
-import { Settings } from '../Settings';
-
-export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
-  // Components
-  bottle.serviceFactory('Settings', () => Settings);
-  bottle.decorator('Settings', withoutSelectedServer);
-  bottle.decorator('Settings', connect(['settings'], ['setSettings', 'resetSelectedServer']));
-
-  // Actions
-  bottle.serviceFactory('setSettings', () => setSettings);
-};