Replace usage of injected selectedServer with useSelectedServer

src/common/ShlinkVersionsContainer.tsx

@@ -1,16 +1,15 @@
 import { clsx } from 'clsx';
-import type { SelectedServer } from '../servers/data';
 import { isReachableServer } from '../servers/data';
+import { useSelectedServer } from '../servers/reducers/selectedServer';
 import { ShlinkVersions } from './ShlinkVersions';
 
-export type ShlinkVersionsContainerProps = {
-  selectedServer: SelectedServer;
+export const ShlinkVersionsContainer = () => {
+  const { selectedServer } = useSelectedServer();
+  return (
+    <div
+      className={clsx('text-center', { 'md:ml-(--aside-menu-width)': isReachableServer(selectedServer) })}
+    >
+      <ShlinkVersions selectedServer={selectedServer} />
+    </div>
+  );
 };
-
-export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => (
-  <div
-    className={clsx('text-center', { 'md:ml-(--aside-menu-width)': isReachableServer(selectedServer) })}
-  >
-    <ShlinkVersions selectedServer={selectedServer} />
-  </div>
-);

src/common/ShlinkWebComponentContainer.tsx

@@ -9,11 +9,12 @@ import { memo } from 'react';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
 import { isReachableServer } from '../servers/data';
-import type { WithSelectedServerProps, WithSelectedServerPropsDeps } from '../servers/helpers/withSelectedServer';
+import type { WithSelectedServerPropsDeps } from '../servers/helpers/withSelectedServer';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';
+import { useSelectedServer } from '../servers/reducers/selectedServer';
 import { NotFound } from './NotFound';
 
-type ShlinkWebComponentContainerProps = WithSelectedServerProps & {
+type ShlinkWebComponentContainerProps = {
   settings: Settings;
 };
 
@@ -28,12 +29,13 @@ const ShlinkWebComponentContainer: FCWithDeps<
 //       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(({ selectedServer, settings }) => {
+> = withSelectedServer(memo(({ settings }) => {
   const {
     buildShlinkApiClient,
     TagColorsStorage: tagColorsStorage,
     ServerError,
   } = useDependencies(ShlinkWebComponentContainer);
+  const { selectedServer } = useSelectedServer();
 
   if (!isReachableServer(selectedServer)) {
     return <ServerError />;

src/common/services/provideServices.ts

@@ -26,10 +26,9 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.decorator('Home', connect(['servers'], []));
 
   bottle.factory('ShlinkWebComponentContainer', ShlinkWebComponentContainerFactory);
-  bottle.decorator('ShlinkWebComponentContainer', connect(['selectedServer', 'settings'], ['selectServer']));
+  bottle.decorator('ShlinkWebComponentContainer', connect(['settings'], ['selectServer']));
 
   bottle.serviceFactory('ShlinkVersionsContainer', () => ShlinkVersionsContainer);
-  bottle.decorator('ShlinkVersionsContainer', connect(['selectedServer']));
 
   bottle.serviceFactory('ErrorHandler', () => ErrorHandler);
 };

src/servers/EditServer.tsx

@@ -6,17 +6,17 @@ import { useGoBack } from '../utils/helpers/hooks';
 import type { ServerData } from './data';
 import { isServerWithId } from './data';
 import { ServerForm } from './helpers/ServerForm';
-import type { WithSelectedServerProps, WithSelectedServerPropsDeps } from './helpers/withSelectedServer';
+import type { WithSelectedServerPropsDeps } from './helpers/withSelectedServer';
 import { withSelectedServer } from './helpers/withSelectedServer';
+import { useSelectedServer } from './reducers/selectedServer';
 
-type EditServerProps = WithSelectedServerProps & {
+type EditServerProps = {
   editServer: (serverId: string, serverData: ServerData) => void;
 };
 
-const EditServer: FCWithDeps<EditServerProps, WithSelectedServerPropsDeps> = withSelectedServer((
-  { editServer, selectedServer, selectServer },
-) => {
+const EditServer: FCWithDeps<EditServerProps, WithSelectedServerPropsDeps> = withSelectedServer(({ editServer }) => {
   const { buildShlinkApiClient } = useDependencies(EditServer);
+  const { selectServer, selectedServer } = useSelectedServer();
   const goBack = useGoBack();
   const { reconnect } = useParsedQuery<{ reconnect?: 'true' }>();
 

src/servers/ServersDropdown.tsx

@@ -1,16 +1,17 @@
 import { faPlus as plusIcon, faServer as serverIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Dropdown, NavBar } from '@shlinkio/shlink-frontend-kit';
-import type { SelectedServer, ServersMap } from './data';
+import type { ServersMap } from './data';
 import { getServerId } from './data';
+import { useSelectedServer } from './reducers/selectedServer';
 
 export interface ServersDropdownProps {
   servers: ServersMap;
-  selectedServer: SelectedServer;
 }
 
-export const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
+export const ServersDropdown = ({ servers }: ServersDropdownProps) => {
   const serversList = Object.values(servers);
+  const { selectedServer } = useSelectedServer();
 
   return (
     <NavBar.Dropdown buttonContent={(

src/servers/helpers/ServerError.tsx

@@ -4,22 +4,23 @@ import { Link } from 'react-router';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
 import type { FCWithDeps } from '../../container/utils';
 import { componentFactory, useDependencies } from '../../container/utils';
-import type { SelectedServer, ServersMap } from '../data';
+import type { ServersMap } from '../data';
 import { isServerWithId } from '../data';
 import type { DeleteServerButtonProps } from '../DeleteServerButton';
+import { useSelectedServer } from '../reducers/selectedServer';
 import { ServersListGroup } from '../ServersListGroup';
 
 type ServerErrorProps = {
   servers: ServersMap;
-  selectedServer: SelectedServer;
 };
 
 type ServerErrorDeps = {
   DeleteServerButton: FC<DeleteServerButtonProps>;
 };
 
-const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers, selectedServer }) => {
+const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers }) => {
   const { DeleteServerButton } = useDependencies(ServerError);
+  const { selectedServer } = useSelectedServer();
 
   return (
     <NoMenuLayout>

src/servers/helpers/withSelectedServer.tsx

@@ -6,14 +6,8 @@ import type { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientB
 import { NoMenuLayout } from '../../common/NoMenuLayout';
 import type { FCWithDeps } from '../../container/utils';
 import { useDependencies } from '../../container/utils';
-import type { SelectedServer } from '../data';
 import { isNotFoundServer } from '../data';
-import type { SelectServerOptions } from '../reducers/selectedServer';
-
-export type WithSelectedServerProps = {
-  selectServer: (options: SelectServerOptions) => void;
-  selectedServer: SelectedServer;
-};
+import { useSelectedServer } from '../reducers/selectedServer';
 
 export type WithSelectedServerPropsDeps = {
   ServerError: FC;
@@ -21,12 +15,12 @@ export type WithSelectedServerPropsDeps = {
 };
 
 export function withSelectedServer<T extends object>(
-  WrappedComponent: FCWithDeps<WithSelectedServerProps & T, WithSelectedServerPropsDeps>,
+  WrappedComponent: FCWithDeps<T, WithSelectedServerPropsDeps>,
 ) {
-  const ComponentWrapper: FCWithDeps<WithSelectedServerProps & T, WithSelectedServerPropsDeps> = (props) => {
+  const ComponentWrapper: FCWithDeps<T, WithSelectedServerPropsDeps> = (props) => {
     const { ServerError, buildShlinkApiClient } = useDependencies(ComponentWrapper);
     const params = useParams<{ serverId: string }>();
-    const { selectServer, selectedServer } = props;
+    const { selectServer, selectedServer } = useSelectedServer();
 
     useEffect(() => {
       if (params.serverId) {

src/servers/reducers/selectedServer.ts

@@ -63,7 +63,7 @@ export const selectServer = createAsyncThunk(
   },
 );
 
-const { reducer } = createSlice({
+export const { reducer: selectedServerReducer } = createSlice({
   name: REDUCER_PREFIX,
   initialState: initialState as SelectedServer,
   reducers: {},
@@ -73,8 +73,6 @@ const { reducer } = createSlice({
   },
 });
 
-export const selectedServerReducer = reducer;
-
 export const useSelectedServer = () => {
   const dispatch = useAppDispatch();
   const dispatchResetSelectedServer = useCallback(() => dispatch(resetSelectedServer()), [dispatch]);

src/servers/services/provideServices.ts

@@ -21,7 +21,7 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
   bottle.factory('ManageServers', ManageServersFactory);
   bottle.decorator('ManageServers', withoutSelectedServer);
-  bottle.decorator('ManageServers', connect(['selectedServer', 'servers'], []));
+  bottle.decorator('ManageServers', connect(['servers'], []));
 
   bottle.factory('ManageServersRow', ManageServersRowFactory);
 
@@ -30,13 +30,13 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
 
   bottle.factory('CreateServer', CreateServerFactory);
   bottle.decorator('CreateServer', withoutSelectedServer);
-  bottle.decorator('CreateServer', connect(['selectedServer', 'servers'], ['createServers']));
+  bottle.decorator('CreateServer', connect(['servers'], ['createServers']));
 
   bottle.factory('EditServer', EditServerFactory);
-  bottle.decorator('EditServer', connect(['selectedServer'], ['editServer', 'selectServer']));
+  bottle.decorator('EditServer', connect([], ['editServer', 'selectServer']));
 
   bottle.serviceFactory('ServersDropdown', () => ServersDropdown);
-  bottle.decorator('ServersDropdown', connect(['servers', 'selectedServer']));
+  bottle.decorator('ServersDropdown', connect(['servers']));
 
   bottle.serviceFactory('DeleteServerModal', () => DeleteServerModal);
   bottle.decorator('DeleteServerModal', connect(null, ['deleteServer']));
@@ -47,7 +47,7 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.decorator('ImportServersBtn', connect(['servers'], ['createServers']));
 
   bottle.factory('ServerError', ServerErrorFactory);
-  bottle.decorator('ServerError', connect(['servers', 'selectedServer']));
+  bottle.decorator('ServerError', connect(['servers']));
 
   // Services
   bottle.service('ServersImporter', ServersImporter, 'csvToJson');

test/__helpers__/MemoryRouterWithParams.tsx

@@ -1,23 +0,0 @@
-import type { FC, PropsWithChildren } from 'react';
-import { useMemo } from 'react';
-import { MemoryRouter, Route, Routes } from 'react-router';
-
-export type MemoryRouterWithParamsProps = PropsWithChildren<{
-  params: Record<string, string>;
-}>;
-
-/**
- * Wrap any component using useParams() with MemoryRouterWithParams, in order to determine wat the hook should return
- */
-export const MemoryRouterWithParams: FC<MemoryRouterWithParamsProps> = ({ children, params }) => {
-  const pathname = useMemo(() => `/${Object.values(params).join('/')}`, [params]);
-  const pathPattern = useMemo(() => `/:${Object.keys(params).join('/:')}`, [params]);
-
-  return (
-    <MemoryRouter>
-      <Routes location={{ pathname }}>
-        <Route path={pathPattern} element={children} />
-      </Routes>
-    </MemoryRouter>
-  );
-};

test/common/ShlinkVersionsContainer.test.tsx

@@ -1,12 +1,15 @@
-import { render } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { ShlinkVersionsContainer } from '../../src/common/ShlinkVersionsContainer';
 import type { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
+import { renderWithStore } from '../__helpers__/setUpTest';
 
 describe('<ShlinkVersionsContainer />', () => {
-  const setUp = (selectedServer: SelectedServer = null) => render(
-    <ShlinkVersionsContainer selectedServer={selectedServer} />,
+  const setUp = (selectedServer: SelectedServer = null) => renderWithStore(
+    <ShlinkVersionsContainer />,
+    {
+      initialState: { selectedServer },
+    },
   );
 
   it.each([

test/common/ShlinkWebComponentContainer.test.tsx

@@ -1,9 +1,9 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { ShlinkWebComponentContainerFactory } from '../../src/common/ShlinkWebComponentContainer';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
-import { MemoryRouterWithParams } from '../__helpers__/MemoryRouterWithParams';
+import { renderWithStore } from '../__helpers__/setUpTest';
 
 vi.mock('@shlinkio/shlink-web-component', () => ({
   ShlinkSidebarVisibilityProvider: ({ children }: any) => children,
@@ -17,10 +17,11 @@ describe('<ShlinkWebComponentContainer />', () => {
     TagColorsStorage: fromPartial({}),
     ServerError: () => <>ServerError</>,
   }));
-  const setUp = (selectedServer: SelectedServer) => render(
-    <MemoryRouterWithParams params={{ serverId: 'abc123' }}>
-      <ShlinkWebComponentContainer selectServer={vi.fn()} selectedServer={selectedServer} settings={{}} />
-    </MemoryRouterWithParams>,
+  const setUp = (selectedServer: SelectedServer) => renderWithStore(
+    <ShlinkWebComponentContainer settings={{}} />,
+    {
+      initialState: { selectedServer },
+    },
   );
 
   it('passes a11y checks', () => checkAccessibility(setUp(fromPartial({ version: '3.0.0' }))));

test/servers/EditServer.test.tsx

@@ -5,7 +5,7 @@ import { Router } from 'react-router';
 import type { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { EditServerFactory } from '../../src/servers/EditServer';
 import { checkAccessibility } from '../__helpers__/accessibility';
-import { renderWithEvents } from '../__helpers__/setUpTest';
+import { renderWithStore } from '../__helpers__/setUpTest';
 
 describe('<EditServer />', () => {
   const ServerError = vi.fn();
@@ -21,10 +21,13 @@ describe('<EditServer />', () => {
     const history = createMemoryHistory({ initialEntries: ['/foo', '/bar'] });
     return {
       history,
-      ...renderWithEvents(
+      ...renderWithStore(
         <Router location={history.location} navigator={history}>
-          <EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={vi.fn()} />
+          <EditServer editServer={editServerMock} />
         </Router>,
+        {
+          initialState: { selectedServer },
+        },
       ),
     };
   };

test/servers/ServersDropdown.test.tsx

@@ -4,7 +4,7 @@ import { MemoryRouter } from 'react-router';
 import type { ServersMap } from '../../src/servers/data';
 import { ServersDropdown } from '../../src/servers/ServersDropdown';
 import { checkAccessibility } from '../__helpers__/accessibility';
-import { renderWithEvents } from '../__helpers__/setUpTest';
+import { renderWithStore } from '../__helpers__/setUpTest';
 
 describe('<ServersDropdown />', () => {
   const fallbackServers: ServersMap = {
@@ -12,12 +12,15 @@ describe('<ServersDropdown />', () => {
     '2b': fromPartial({ name: 'bar', id: '2b' }),
     '3c': fromPartial({ name: 'baz', id: '3c' }),
   };
-  const setUp = (servers: ServersMap = fallbackServers) => renderWithEvents(
+  const setUp = (servers: ServersMap = fallbackServers) => renderWithStore(
     <MemoryRouter>
       <ul role="menu">
-        <ServersDropdown servers={servers} selectedServer={null} />
+        <ServersDropdown servers={servers} />
       </ul>
     </MemoryRouter>,
+    {
+      initialState: { selectedServer: null },
+    },
   );
 
   it('passes a11y checks', async () => {

test/servers/helpers/ServerError.test.tsx

@@ -1,16 +1,20 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../../src/servers/data';
 import { ServerErrorFactory } from '../../../src/servers/helpers/ServerError';
 import { checkAccessibility } from '../../__helpers__/accessibility';
+import { renderWithStore } from '../../__helpers__/setUpTest';
 
 describe('<ServerError />', () => {
   const ServerError = ServerErrorFactory(fromPartial({ DeleteServerButton: () => null }));
-  const setUp = (selectedServer: SelectedServer) => render(
+  const setUp = (selectedServer: SelectedServer) => renderWithStore(
     <MemoryRouter>
-      <ServerError servers={{}} selectedServer={selectedServer} />
+      <ServerError servers={{}} />
     </MemoryRouter>,
+    {
+      initialState: { selectedServer },
+    },
   );
 
   it.each([