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