mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Refactored ServersDropdown into functional component

Browse source
This commit is contained in:
Alejandro Celaya 2020-04-27 12:30:17 +02:00
parent bcf5dcf180
commit bdd7932e07
1 changed files with 36 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/servers/ServersDropdown.js
View file

@ -4,46 +4,50 @@ import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from
import PropTypes from 'prop-types';
import { serverType } from './prop-types';
const ServersDropdown = (serversExporter) => class ServersDropdown extends React.Component {
static propTypes = {
servers: PropTypes.object,
selectedServer: serverType,
history: PropTypes.shape({
push: PropTypes.func,
}),
};
const propTypes = {
servers: PropTypes.object,
selectedServer: serverType,
history: PropTypes.shape({
push: PropTypes.func,
}),
};
renderServers = () => {
const { servers, selectedServer } = this.props;
const ServersDropdown = (serversExporter) => {
const ServersDropdownComp = ({ servers, selectedServer, history }) => {
const serversList = values(servers);
const { push } = this.props.history;
const loadServer = (id) => push(`/server/${id}/list-short-urls/1`);
const loadServer = (id) => history.push(`/server/${id}/list-short-urls/1`);
if (isEmpty(serversList)) {
return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>;
}
const renderServers = () => {
if (isEmpty(serversList)) {
return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>;
}
return (
<React.Fragment>
{serversList.map(({ name, id }) => (
<DropdownItem key={id} active={selectedServer && selectedServer.id === id} onClick={() => loadServer(id)}>
{name}
</DropdownItem>
))}
<DropdownItem divider />
<DropdownItem className="servers-dropdown__export-item" onClick={() => serversExporter.exportServers()}>
Export servers
</DropdownItem>
</React.Fragment>
);
};
return (
<React.Fragment>
{serversList.map(({ name, id }) => (
<DropdownItem key={id} active={selectedServer && selectedServer.id === id} onClick={() => loadServer(id)}>
{name}
</DropdownItem>
))}
<DropdownItem divider />
<DropdownItem className="servers-dropdown__export-item" onClick={() => serversExporter.exportServers()}>
Export servers
</DropdownItem>
</React.Fragment>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>Servers</DropdownToggle>
<DropdownMenu right>{renderServers()}</DropdownMenu>
</UncontrolledDropdown>
);
};
render = () => (
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>Servers</DropdownToggle>
<DropdownMenu right>{this.renderServers()}</DropdownMenu>
</UncontrolledDropdown>
);
ServersDropdownComp.propTypes = propTypes;
return ServersDropdownComp;
};
export default ServersDropdown;