Created component decorator that resets selected server and used it on Settings

src/common/Home.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { isEmpty, values } from 'ramda';
 import { Link } from 'react-router-dom';
 import ServersListGroup from '../servers/ServersListGroup';
@@ -6,18 +6,13 @@ import './Home.scss';
 import { ServersMap } from '../servers/data';
 
 export interface HomeProps {
-  resetSelectedServer: Function;
   servers: ServersMap;
 }
 
-const Home = ({ resetSelectedServer, servers }: HomeProps) => {
+const Home = ({ servers }: HomeProps) => {
   const serversList = values(servers);
   const hasServers = !isEmpty(serversList);
 
-  useEffect(() => {
-    resetSelectedServer();
-  }, []);
-
   return (
     <div className="home">
       <h1 className="home__title">Welcome to Shlink</h1>

src/common/services/provideServices.ts

@@ -7,6 +7,7 @@ import AsideMenu from '../AsideMenu';
 import ErrorHandler from '../ErrorHandler';
 import ShlinkVersions from '../ShlinkVersions';
 import { ConnectDecorator } from '../../container/types';
+import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
   bottle.constant('window', (global as any).window);
@@ -19,6 +20,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
   bottle.decorator('MainHeader', withRouter);
 
   bottle.serviceFactory('Home', () => Home);
+  bottle.decorator('Home', withoutSelectedServer);
   bottle.decorator('Home', connect([ 'servers' ], [ 'resetSelectedServer' ]));
 
   bottle.serviceFactory(

src/servers/CreateServer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
 import { v4 as uuid } from 'uuid';
 import { RouterProps } from 'react-router';
 import classNames from 'classnames';
@@ -13,7 +13,6 @@ const SHOW_IMPORT_MSG_TIME = 4000;
 
 interface CreateServerProps extends RouterProps {
   createServer: (server: ServerWithId) => void;
-  resetSelectedServer: Function;
 }
 
 const Result: FC<{ type: 'success' | 'error' }> = ({ children, type }) => (
@@ -32,7 +31,7 @@ const Result: FC<{ type: 'success' | 'error' }> = ({ children, type }) => (
 );
 
 const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagTimeout: StateFlagTimeout) => (
-  { createServer, history: { push }, resetSelectedServer }: CreateServerProps,
+  { createServer, history: { push } }: CreateServerProps,
 ) => {
   const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
   const [ errorImporting, setErrorImporting ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
@@ -43,10 +42,6 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
     push(`/server/${id}/list-short-urls/1`);
   };
 
-  useEffect(() => {
-    resetSelectedServer();
-  }, []);
-
   return (
     <NoMenuLayout>
       <ServerForm onSubmit={handleSubmit}>

src/servers/helpers/withoutSelectedServer.tsx

@@ -0,0 +1,15 @@
+import React, { FC, useEffect } from 'react';
+
+interface WithoutSelectedServerProps {
+  resetSelectedServer: Function;
+}
+
+export function withoutSelectedServer<T = {}>(WrappedComponent: FC<WithoutSelectedServerProps & T>) {
+  return (props: WithoutSelectedServerProps & T) => {
+    useEffect(() => {
+      props.resetSelectedServer();
+    }, []);
+
+    return <WrappedComponent {...props} />;
+  };
+}

src/servers/services/provideServices.ts

@@ -12,12 +12,14 @@ import { fetchServers } from '../reducers/remoteServers';
 import ForServerVersion from '../helpers/ForServerVersion';
 import { ServerError } from '../helpers/ServerError';
 import { ConnectDecorator } from '../../container/types';
+import { withoutSelectedServer } from '../helpers/withoutSelectedServer';
 import ServersImporter from './ServersImporter';
 import ServersExporter from './ServersExporter';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
   // Components
   bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'useStateFlagTimeout');
+  bottle.decorator('CreateServer', withoutSelectedServer);
   bottle.decorator('CreateServer', connect([ 'selectedServer' ], [ 'createServer', 'resetSelectedServer' ]));
 
   bottle.serviceFactory('EditServer', EditServer, 'ServerError');

src/settings/services/provideServices.ts

@@ -3,10 +3,13 @@ import RealTimeUpdates from '../RealTimeUpdates';
 import Settings from '../Settings';
 import { setRealTimeUpdates } from '../reducers/settings';
 import { ConnectDecorator } from '../../container/types';
+import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
   bottle.serviceFactory('Settings', Settings, 'RealTimeUpdates');
+  bottle.decorator('Settings', withoutSelectedServer);
+  bottle.decorator('Settings', connect(null, [ 'resetSelectedServer' ]));
 
   // Services
   bottle.serviceFactory('RealTimeUpdates', () => RealTimeUpdates);