Ensured a recconnection happens to selected server when its params are edited

src/common/MenuLayout.tsx

@@ -38,7 +38,6 @@ export const MenuLayout = (
   useEffect(() => hideSidebar(), [location]);
   useEffect(() => {
     showContent && sidebarPresent();
-
     return () => sidebarNotPresent();
   }, []);
 

src/servers/EditServer.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { Button } from 'reactstrap';
 import { NoMenuLayout } from '../common/NoMenuLayout';
-import { useGoBack } from '../utils/helpers/hooks';
+import { useGoBack, useParsedQuery } from '../utils/helpers/hooks';
 import { ServerForm } from './helpers/ServerForm';
 import { withSelectedServer } from './helpers/withSelectedServer';
 import { isServerWithId, ServerData } from './data';
@@ -10,8 +10,11 @@ interface EditServerProps {
   editServer: (serverId: string, serverData: ServerData) => void;
 }
 
-export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProps>(({ editServer, selectedServer }) => {
+export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProps>((
+  { editServer, selectedServer, selectServer },
+) => {
   const goBack = useGoBack();
+  const { reconnect } = useParsedQuery<{ reconnect?: 'true' }>();
 
   if (!isServerWithId(selectedServer)) {
     return null;
@@ -19,6 +22,7 @@ export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProp
 
   const handleSubmit = (serverData: ServerData) => {
     editServer(selectedServer.id, serverData);
+    reconnect === 'true' && selectServer(selectedServer.id);
     goBack();
   };
 

src/servers/helpers/ServerError.tsx

@@ -37,7 +37,7 @@ export const ServerError = (DeleteServerButton: FC<DeleteServerButtonProps>): FC
           <h5>
             Alternatively, if you think you may have miss-configured this server, you
             can <DeleteServerButton server={selectedServer} className="server-error__delete-btn">remove it</DeleteServerButton> or&nbsp;
-            <Link to={`/server/${selectedServer.id}/edit`}>edit it</Link>.
+            <Link to={`/server/${selectedServer.id}/edit?reconnect=true`}>edit it</Link>.
           </h5>
         </div>
       )}

src/servers/reducers/selectedServer.ts

@@ -1,7 +1,7 @@
 import { createAction, createListenerMiddleware, createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { identity, memoizeWith, pipe } from 'ramda';
+import { memoizeWith, pipe } from 'ramda';
 import { versionToPrintable, versionToSemVer as toSemVer } from '../../utils/helpers/version';
-import { isReachableServer, SelectedServer } from '../data';
+import { isReachableServer, SelectedServer, ServerWithId } from '../data';
 import { ShlinkHealth } from '../../api/types';
 import { createAsyncThunk } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
@@ -18,8 +18,8 @@ const versionToSemVer = pipe(
 );
 
 const getServerVersion = memoizeWith(
-  identity,
-  async (_serverId: string, health: () => Promise<ShlinkHealth>) => health().then(({ version }) => ({
+  (server: ServerWithId) => `${server.id}_${server.url}_${server.apiKey}`,
+  async (_server: ServerWithId, health: () => Promise<ShlinkHealth>) => health().then(({ version }) => ({
     version: versionToSemVer(version),
     printableVersion: versionToPrintable(version),
   })),
@@ -43,7 +43,7 @@ export const selectServer = (buildShlinkApiClient: ShlinkApiClientBuilder) => cr
 
     try {
       const { health } = buildShlinkApiClient(selectedServer);
-      const { version, printableVersion } = await getServerVersion(serverId, health);
+      const { version, printableVersion } = await getServerVersion(selectedServer, health);
 
       return {
         ...selectedServer,

src/utils/helpers/hooks.ts

@@ -1,6 +1,6 @@
 import { useState, useRef, EffectCallback, DependencyList, useEffect } from 'react';
 import { useSwipeable as useReactSwipeable } from 'react-swipeable';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { v4 as uuid } from 'uuid';
 import { parseQuery, stringifyQuery } from './query';
 
@@ -82,6 +82,11 @@ export const useGoBack = () => {
   return () => navigate(-1);
 };
 
+export const useParsedQuery = <T>(): T => {
+  const { search } = useLocation();
+  return parseQuery<T>(search);
+};
+
 export const useDomId = (): string => {
   const { current: id } = useRef(`dom-${uuid()}`);
   return id;

test/servers/EditServer.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
-import { useNavigate } from 'react-router-dom';
+import { MemoryRouter, useNavigate } from 'react-router-dom';
 import { EditServer as editServerConstruct } from '../../src/servers/EditServer';
 import { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { renderWithEvents } from '../__helpers__/setUpTest';
@@ -19,7 +19,9 @@ describe('<EditServer />', () => {
   });
   const EditServer = editServerConstruct(ServerError);
   const setUp = (selectedServer: SelectedServer = defaultSelectedServer) => renderWithEvents(
-    <EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={jest.fn()} />,
+    <MemoryRouter>
+      <EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={jest.fn()} />
+    </MemoryRouter>,
   );
 
   beforeEach(() => {

vite.config.ts

@@ -7,6 +7,7 @@ import pack from './package.json';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), VitePWA({
+    mode: process.env.NODE_ENV === 'development' ? 'development' : 'production',
     strategies: 'injectManifest',
     srcDir: './src',
     filename: 'service-worker.ts',