Fixed timing issue when navigating to another server

This commit is contained in:
Alejandro Celaya 2019-10-05 19:51:50 +02:00
parent a7613435ea
commit 9d2494834c
3 changed files with 23 additions and 15 deletions

View file

@ -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
key={id}
tag={Link}
to={`/server/${id}/list-short-urls/1`}
active={selectedServer && selectedServer.id === id}
// FIXME This should be implicit
onClick={() => selectServer(id)}
>
<DropdownItem key={id} active={selectedServer && selectedServer.id === id} onClick={() => loadServer(id)}>
{name}
</DropdownItem>
))}

View file

@ -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);

View file

@ -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', () =>
expect(wrapped.find(DropdownItem).filter('[to]')).toHaveLength(values(servers.list).length));
it('contains the list of servers, the divider and the export button', () =>
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);