From 91f4d096087d15d9e197aa255c1086ced1980573 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 31 Dec 2022 16:42:04 +0100 Subject: [PATCH] Ensured a recconnection happens to selected server when its params are edited --- src/common/MenuLayout.tsx | 1 - src/servers/EditServer.tsx | 8 ++++++-- src/servers/helpers/ServerError.tsx | 2 +- src/servers/reducers/selectedServer.ts | 10 +++++----- src/utils/helpers/hooks.ts | 7 ++++++- test/servers/EditServer.test.tsx | 6 ++++-- vite.config.ts | 1 + 7 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/common/MenuLayout.tsx b/src/common/MenuLayout.tsx index 0fc05448..58f7da2d 100644 --- a/src/common/MenuLayout.tsx +++ b/src/common/MenuLayout.tsx @@ -38,7 +38,6 @@ export const MenuLayout = ( useEffect(() => hideSidebar(), [location]); useEffect(() => { showContent && sidebarPresent(); - return () => sidebarNotPresent(); }, []); diff --git a/src/servers/EditServer.tsx b/src/servers/EditServer.tsx index c89b4468..e95b4daa 100644 --- a/src/servers/EditServer.tsx +++ b/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(({ editServer, selectedServer }) => { +export const EditServer = (ServerError: FC) => withSelectedServer(( + { 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 { editServer(selectedServer.id, serverData); + reconnect === 'true' && selectServer(selectedServer.id); goBack(); }; diff --git a/src/servers/helpers/ServerError.tsx b/src/servers/helpers/ServerError.tsx index 6f605969..f133d494 100644 --- a/src/servers/helpers/ServerError.tsx +++ b/src/servers/helpers/ServerError.tsx @@ -37,7 +37,7 @@ export const ServerError = (DeleteServerButton: FC): FC
Alternatively, if you think you may have miss-configured this server, you can remove it or  - edit it. + edit it.
)} diff --git a/src/servers/reducers/selectedServer.ts b/src/servers/reducers/selectedServer.ts index 3415a15c..b69647f0 100644 --- a/src/servers/reducers/selectedServer.ts +++ b/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) => health().then(({ version }) => ({ + (server: ServerWithId) => `${server.id}_${server.url}_${server.apiKey}`, + async (_server: ServerWithId, health: () => Promise) => 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, diff --git a/src/utils/helpers/hooks.ts b/src/utils/helpers/hooks.ts index 2e033cd8..56406afa 100644 --- a/src/utils/helpers/hooks.ts +++ b/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 => { + const { search } = useLocation(); + return parseQuery(search); +}; + export const useDomId = (): string => { const { current: id } = useRef(`dom-${uuid()}`); return id; diff --git a/test/servers/EditServer.test.tsx b/test/servers/EditServer.test.tsx index 771a6210..c5181bc0 100644 --- a/test/servers/EditServer.test.tsx +++ b/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('', () => { }); const EditServer = editServerConstruct(ServerError); const setUp = (selectedServer: SelectedServer = defaultSelectedServer) => renderWithEvents( - , + + + , ); beforeEach(() => { diff --git a/vite.config.ts b/vite.config.ts index b74d3435..2b0cf261 100644 --- a/vite.config.ts +++ b/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',