mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-09 09:47:28 +03:00
Fixed timing issue when navigating to another server
This commit is contained in:
parent
a7613435ea
commit
9d2494834c
3 changed files with 23 additions and 15 deletions
|
@ -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>
|
||||
))}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue