Set everything up to use hooks for reduc actions and state

src/app/App.tsx

@@ -1,5 +1,5 @@
 import { changeThemeInMarkup, getSystemPreferredTheme } from '@shlinkio/shlink-frontend-kit';
-import type { Settings } from '@shlinkio/shlink-web-component/settings';
+import type { Settings as AppSettings } from '@shlinkio/shlink-web-component/settings';
 import { clsx } from 'clsx';
 import type { FC } from 'react';
 import { useEffect, useRef } from 'react';
@@ -9,12 +9,13 @@ import { NotFound } from '../common/NotFound';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
 import type { ServersMap } from '../servers/data';
+import { Settings } from '../settings/Settings';
 import { forceUpdate } from '../utils/helpers/sw';
 
 type AppProps = {
   fetchServers: () => void;
   servers: ServersMap;
-  settings: Settings;
+  settings: AppSettings;
   resetAppUpdate: () => void;
   appUpdated: boolean;
 };
@@ -25,7 +26,6 @@ type AppDeps = {
   ShlinkWebComponentContainer: FC;
   CreateServer: FC;
   EditServer: FC;
-  Settings: FC;
   ManageServers: FC;
   ShlinkVersionsContainer: FC;
 };
@@ -39,7 +39,6 @@ const App: FCWithDeps<AppProps, AppDeps> = (
     ShlinkWebComponentContainer,
     CreateServer,
     EditServer,
-    Settings,
     ManageServers,
     ShlinkVersionsContainer,
   } = useDependencies(App);
@@ -105,7 +104,6 @@ export const AppFactory = componentFactory(App, [
   'ShlinkWebComponentContainer',
   'CreateServer',
   'EditServer',
-  'Settings',
   'ManageServers',
   'ShlinkVersionsContainer',
 ]);

src/container/index.ts

@@ -5,7 +5,6 @@ import { provideServices as provideApiServices } from '../api/services/provideSe
 import { provideServices as provideAppServices } from '../app/services/provideServices';
 import { provideServices as provideCommonServices } from '../common/services/provideServices';
 import { provideServices as provideServersServices } from '../servers/services/provideServices';
-import { provideServices as provideSettingsServices } from '../settings/services/provideServices';
 import { provideServices as provideUtilsServices } from '../utils/services/provideServices';
 import type { ConnectDecorator } from './types';
 
@@ -39,4 +38,3 @@ provideCommonServices(bottle, connect);
 provideApiServices(bottle);
 provideServersServices(bottle, connect);
 provideUtilsServices(bottle);
-provideSettingsServices(bottle, connect);

src/container/store.ts

@@ -1,5 +1,4 @@
 import { configureStore } from '@reduxjs/toolkit';
-import type { IContainer } from 'bottlejs';
 import type { RLSOptions } from 'redux-localstorage-simple';
 import { load, save } from 'redux-localstorage-simple';
 import { initReducers } from '../reducers';
@@ -13,11 +12,11 @@ const localStorageConfig: RLSOptions = {
   namespaceSeparator: '.',
   debounce: 300,
 };
-const preloadedState = migrateDeprecatedSettings(load(localStorageConfig) as ShlinkState);
+const getStateFromLocalStorage = () => migrateDeprecatedSettings(load(localStorageConfig) as ShlinkState);
 
-export const setUpStore = (container: IContainer) => configureStore({
+export const setUpStore = (preloadedState = getStateFromLocalStorage()) => configureStore({
   devTools: !isProduction,
-  reducer: initReducers(container),
+  reducer: initReducers(),
   preloadedState,
   middleware: (defaultMiddlewaresIncludingReduxThunk) =>
     defaultMiddlewaresIncludingReduxThunk({ immutableCheck: false, serializableCheck: false }) // State is too big for these

src/index.tsx

@@ -7,7 +7,7 @@ import { setUpStore } from './container/store';
 import { register as registerServiceWorker } from './serviceWorkerRegistration';
 import './tailwind.css';
 
-const store = setUpStore(container);
+const store = setUpStore();
 const { App, ScrollToTop, ErrorHandler, appUpdateAvailable } = container;
 
 createRoot(document.getElementById('root')!).render(

src/reducers/index.ts

@@ -1,12 +1,12 @@
 import { combineReducers } from '@reduxjs/toolkit';
-import type { IContainer } from 'bottlejs';
 import { appUpdatesReducer } from '../app/reducers/appUpdates';
+import { selectedServerReducer } from '../servers/reducers/selectedServer';
 import { serversReducer } from '../servers/reducers/servers';
 import { settingsReducer } from '../settings/reducers/settings';
 
-export const initReducers = (container: IContainer) => combineReducers({
+export const initReducers = () => combineReducers({
   appUpdated: appUpdatesReducer,
   servers: serversReducer,
-  selectedServer: container.selectedServerReducer,
+  selectedServer: selectedServerReducer,
   settings: settingsReducer,
 });

src/servers/reducers/selectedServer.ts

@@ -56,14 +56,17 @@ export const selectServer = (buildShlinkApiClient: ShlinkApiClientBuilder) => cr
   },
 );
 
-type SelectServerThunk = ReturnType<typeof selectServer>;
-
-export const selectedServerReducerCreator = (selectServerThunk: SelectServerThunk) => createSlice({
+const { reducer } = createSlice({
   name: REDUCER_PREFIX,
   initialState,
   reducers: {},
   extraReducers: (builder) => {
     builder.addCase(resetSelectedServer, () => initialState);
-    builder.addCase(selectServerThunk.fulfilled, (_, { payload }) => payload as any);
+    builder.addCase(
+      `${REDUCER_PREFIX}/selectServer/fulfilled`,
+      (_, { payload }: { payload: SelectedServer }) => payload,
+    );
   },
 });
+
+export const selectedServerReducer = reducer;

src/servers/services/provideServices.ts

@@ -11,11 +11,7 @@ import { ManageServersFactory } from '../ManageServers';
 import { ManageServersRowFactory } from '../ManageServersRow';
 import { ManageServersRowDropdownFactory } from '../ManageServersRowDropdown';
 import { fetchServers } from '../reducers/remoteServers';
-import {
-  resetSelectedServer,
-  selectedServerReducerCreator,
-  selectServer,
-} from '../reducers/selectedServer';
+import { resetSelectedServer, selectServer } from '../reducers/selectedServer';
 import { createServers, deleteServer, editServer, setAutoConnect } from '../reducers/servers';
 import { ServersDropdown } from '../ServersDropdown';
 import { ServersExporter } from './ServersExporter';
@@ -66,8 +62,4 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('fetchServers', fetchServers, 'HttpClient');
 
   bottle.serviceFactory('resetSelectedServer', () => resetSelectedServer);
-
-  // Reducers
-  bottle.serviceFactory('selectedServerReducerCreator', selectedServerReducerCreator, 'selectServer');
-  bottle.serviceFactory('selectedServerReducer', (obj) => obj.reducer, 'selectedServerReducerCreator');
 };

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);
-};

src/tailwind.css

@@ -8,7 +8,5 @@
     :root {
         --footer-height: 2.3rem;
         --footer-margin: .8rem;
-        /* FIXME Remove this once updated to shlink-web-component 0.15.1 */
-        --header-height: 52px;
     }
 }