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

Extracted ManageServersRowDropdown to its own component

Browse source
This commit is contained in:
Alejandro Celaya 2021-10-22 20:26:11 +02:00
parent 7637ce3107
commit ec9fd67b8a
3 changed files with 84 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/servers/ManageServersRow.tsx
View file

@ -1,19 +1,10 @@
import { FC } from 'react'; import { FC } from 'react';
import { DropdownItem, UncontrolledTooltip } from 'reactstrap'; import { UncontrolledTooltip } from 'reactstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { import { faCheck as checkIcon } from '@fortawesome/free-solid-svg-icons';
faCheck as checkIcon,
faEdit as editIcon,
faMinusCircle as deleteIcon,
faPlug as connectIcon,
faBan as toggleOffIcon,
} from '@fortawesome/free-solid-svg-icons';
import { faCircle as toggleOnIcon } from '@fortawesome/free-regular-svg-icons';
import { DropdownBtnMenu } from '../utils/DropdownBtnMenu';
import { useToggle } from '../utils/helpers/hooks';
import { ServerWithId } from './data'; import { ServerWithId } from './data';
import { DeleteServerModalProps } from './DeleteServerModal'; import { ManageServersRowDropdownProps } from './ManageServersRowDropdown';
export interface ManageServersRowProps { export interface ManageServersRowProps {
server: ServerWithId; server: ServerWithId;
@ -25,50 +16,27 @@ interface ManageServersRowPropsConnectProps extends ManageServersRowProps {
} }
export const ManageServersRow = ( export const ManageServersRow = (
DeleteServerModal: FC<DeleteServerModalProps>, ManageServersRowDropdown: FC<ManageServersRowDropdownProps>,
): FC<ManageServersRowPropsConnectProps> => ({ server, hasAutoConnect, setAutoConnect }) => { ): FC<ManageServersRowPropsConnectProps> => ({ server, hasAutoConnect }) => (
const [ isMenuOpen, toggleMenu ] = useToggle(); <tr className="responsive-table__row">
const [ isModalOpen,, showModal, hideModal ] = useToggle(); {hasAutoConnect && (
const serverUrl = `/server/${server.id}`; <td className="responsive-table__cell" data-th="Auto-connect">
const { autoConnect: isAutoConnect } = server; {server.autoConnect && (
const autoConnectIcon = isAutoConnect ? toggleOffIcon : toggleOnIcon; <>
<FontAwesomeIcon icon={checkIcon} className="text-primary" id="autoConnectIcon" />
return ( <UncontrolledTooltip target="autoConnectIcon" placement="right">
<tr className="responsive-table__row"> Auto-connect to this server
{hasAutoConnect && ( </UncontrolledTooltip>
<td className="responsive-table__cell" data-th="Auto-connect"> </>
{isAutoConnect && ( )}
<>
<FontAwesomeIcon icon={checkIcon} className="text-primary" id="autoConnectIcon" />
<UncontrolledTooltip target="autoConnectIcon" placement="right">
Auto-connect to this server
</UncontrolledTooltip>
</>
)}
</td>
)}
<th className="responsive-table__cell" data-th="Name">
<Link to={serverUrl}>{server.name}</Link>
</th>
<td className="responsive-table__cell" data-th="Base URL">{server.url}</td>
<td className="responsive-table__cell text-right">
<DropdownBtnMenu isOpen={isMenuOpen} toggle={toggleMenu}>
<DropdownItem tag={Link} to={serverUrl}>
<FontAwesomeIcon icon={connectIcon} fixedWidth /> Connect
</DropdownItem>
<DropdownItem tag={Link} to={`${serverUrl}/edit`}>
<FontAwesomeIcon icon={editIcon} fixedWidth /> Edit server
</DropdownItem>
<DropdownItem onClick={() => setAutoConnect(server, !server.autoConnect)}>
<FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
</DropdownItem>
<DropdownItem divider />
<DropdownItem className="dropdown-item--danger" onClick={showModal}>
<FontAwesomeIcon icon={deleteIcon} fixedWidth /> Remove server
</DropdownItem>
<DeleteServerModal redirectHome={false} server={server} isOpen={isModalOpen} toggle={hideModal} />
</DropdownBtnMenu>
</td> </td>
</tr> )}
); <th className="responsive-table__cell" data-th="Name">
}; <Link to={`/server/${server.id}`}>{server.name}</Link>
</th>
<td className="responsive-table__cell" data-th="Base URL">{server.url}</td>
<td className="responsive-table__cell text-right">
<ManageServersRowDropdown server={server} />
</td>
</tr>
);

53
src/servers/ManageServersRowDropdown.tsx Normal file
View file

@ -0,0 +1,53 @@
import { FC } from 'react';
import { DropdownItem } from 'reactstrap';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faBan as toggleOffIcon,
faEdit as editIcon,
faMinusCircle as deleteIcon,
faPlug as connectIcon,
} from '@fortawesome/free-solid-svg-icons';
import { faCircle as toggleOnIcon } from '@fortawesome/free-regular-svg-icons';
import { DropdownBtnMenu } from '../utils/DropdownBtnMenu';
import { useToggle } from '../utils/helpers/hooks';
import { DeleteServerModalProps } from './DeleteServerModal';
import { ServerWithId } from './data';
export interface ManageServersRowDropdownProps {
server: ServerWithId;
}
interface ManageServersRowDropdownConnectProps extends ManageServersRowDropdownProps {
setAutoConnect: (server: ServerWithId, autoConnect: boolean) => void;
}
export const ManageServersRowDropdown = (
DeleteServerModal: FC<DeleteServerModalProps>,
): FC<ManageServersRowDropdownConnectProps> => ({ server, setAutoConnect }) => {
const [ isMenuOpen, toggleMenu ] = useToggle();
const [ isModalOpen,, showModal, hideModal ] = useToggle();
const serverUrl = `/server/${server.id}`;
const { autoConnect: isAutoConnect } = server;
const autoConnectIcon = isAutoConnect ? toggleOffIcon : toggleOnIcon;
return (
<DropdownBtnMenu isOpen={isMenuOpen} toggle={toggleMenu}>
<DropdownItem tag={Link} to={serverUrl}>
<FontAwesomeIcon icon={connectIcon} fixedWidth /> Connect
</DropdownItem>
<DropdownItem tag={Link} to={`${serverUrl}/edit`}>
<FontAwesomeIcon icon={editIcon} fixedWidth /> Edit server
</DropdownItem>
<DropdownItem onClick={() => setAutoConnect(server, !server.autoConnect)}>
<FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
</DropdownItem>
<DropdownItem divider />
<DropdownItem className="dropdown-item--danger" onClick={showModal}>
<FontAwesomeIcon icon={deleteIcon} fixedWidth /> Remove server
</DropdownItem>
<DeleteServerModal redirectHome={false} server={server} isOpen={isModalOpen} toggle={hideModal} />
</DropdownBtnMenu>
);
};

7
src/servers/services/provideServices.ts
View file

@ -16,6 +16,7 @@ import { withoutSelectedServer } from '../helpers/withoutSelectedServer';
import { Overview } from '../Overview'; import { Overview } from '../Overview';
import { ManageServers } from '../ManageServers'; import { ManageServers } from '../ManageServers';
import { ManageServersRow } from '../ManageServersRow'; import { ManageServersRow } from '../ManageServersRow';
import { ManageServersRowDropdown } from '../ManageServersRowDropdown';
import ServersImporter from './ServersImporter'; import ServersImporter from './ServersImporter';
import ServersExporter from './ServersExporter'; import ServersExporter from './ServersExporter';
@ -31,8 +32,10 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
); );
bottle.decorator('ManageServers', connect([ 'servers' ])); bottle.decorator('ManageServers', connect([ 'servers' ]));
bottle.serviceFactory('ManageServersRow', ManageServersRow, 'DeleteServerModal'); bottle.serviceFactory('ManageServersRow', ManageServersRow, 'ManageServersRowDropdown');
bottle.decorator('ManageServersRow', connect(null, [ 'setAutoConnect' ]));
bottle.serviceFactory('ManageServersRowDropdown', ManageServersRowDropdown, 'DeleteServerModal');
bottle.decorator('ManageServersRowDropdown', connect(null, [ 'setAutoConnect' ]));
bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'useStateFlagTimeout'); bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'useStateFlagTimeout');
bottle.decorator('CreateServer', withoutSelectedServer); bottle.decorator('CreateServer', withoutSelectedServer);