Fixed timing issue when navigating to another server

src/servers/ServersDropdown.js

@@ -1,6 +1,5 @@
 import { isEmpty, values } from 'ramda';
 import React from 'react';
-import { Link } from 'react-router-dom';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { serverType } from './prop-types';
@@ -11,11 +10,20 @@ const ServersDropdown = (serversExporter) => class ServersDropdown extends React
     selectedServer: serverType,
     selectServer: PropTypes.func,
     listServers: PropTypes.func,
+    history: PropTypes.shape({
+      push: PropTypes.func,
+    }),
   };
 
   renderServers = () => {
     const { servers: { list, loading }, selectedServer, selectServer } = this.props;
     const servers = values(list);
+    const { push } = this.props.history;
+    const loadServer = (id) => {
+      selectServer(id)
+        .then(() => push(`/server/${id}/list-short-urls/1`))
+        .catch(() => {});
+    };
 
     if (loading) {
       return <DropdownItem disabled><i>Trying to load servers...</i></DropdownItem>;
@@ -28,15 +36,7 @@ const ServersDropdown = (serversExporter) => class ServersDropdown extends React
     return (
       <React.Fragment>
         {servers.map(({ name, id }) => (
-          <DropdownItem
+          <DropdownItem key={id} active={selectedServer && selectedServer.id === id} onClick={() => loadServer(id)}>
-            key={id}
-            tag={Link}
-            to={`/server/${id}/list-short-urls/1`}
-            active={selectedServer && selectedServer.id === id}
-
-            // FIXME This should be implicit
-            onClick={() => selectServer(id)}
-          >
             {name}
           </DropdownItem>
         ))}

src/servers/services/provideServices.js

@@ -16,6 +16,7 @@ const provideServices = (bottle, connect, withRouter) => {
   bottle.decorator('CreateServer', connect([ 'selectedServer' ], [ 'createServer', 'resetSelectedServer' ]));
 
   bottle.serviceFactory('ServersDropdown', ServersDropdown, 'ServersExporter');
+  bottle.decorator('ServersDropdown', withRouter);
   bottle.decorator('ServersDropdown', connect([ 'servers', 'selectedServer' ], [ 'listServers', 'selectServer' ]));
 
   bottle.serviceFactory('DeleteServerModal', () => DeleteServerModal);

test/servers/ServersDropdown.test.js

@@ -15,15 +15,18 @@ describe('<ServersDropdown />', () => {
     },
     loading: false,
   };
+  const history = {
+    push: jest.fn(),
+  };
 
   beforeEach(() => {
     ServersDropdown = serversDropdownCreator({});
-    wrapped = shallow(<ServersDropdown servers={servers} listServers={identity} />);
+    wrapped = shallow(<ServersDropdown servers={servers} listServers={identity} history={history} />);
   });
   afterEach(() => wrapped.unmount());
 
-  it('contains the list of servers', () =>
+  it('contains the list of servers, the divider and the export button', () =>
-    expect(wrapped.find(DropdownItem).filter('[to]')).toHaveLength(values(servers.list).length));
+    expect(wrapped.find(DropdownItem)).toHaveLength(values(servers.list).length + 2));
 
   it('contains a toggle with proper title', () =>
     expect(wrapped.find(DropdownToggle)).toHaveLength(1));
@@ -36,7 +39,9 @@ describe('<ServersDropdown />', () => {
   });
 
   it('shows a message when no servers exist yet', () => {
-    wrapped = shallow(<ServersDropdown servers={{ loading: false, list: {} }} listServers={identity} />);
+    wrapped = shallow(
+      <ServersDropdown servers={{ loading: false, list: {} }} listServers={identity} history={history} />
+    );
     const item = wrapped.find(DropdownItem);
 
     expect(item).toHaveLength(1);
@@ -45,7 +50,9 @@ describe('<ServersDropdown />', () => {
   });
 
   it('shows a message when loading', () => {
-    wrapped = shallow(<ServersDropdown servers={{ loading: true, list: {} }} listServers={identity} />);
+    wrapped = shallow(
+      <ServersDropdown servers={{ loading: true, list: {} }} listServers={identity} history={history} />
+    );
     const item = wrapped.find(DropdownItem);
 
     expect(item).toHaveLength(1);