mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 17:40:23 +03:00
Refactored delete server components
This commit is contained in:
parent
ab7718e335
commit
b02dcf6c53
5 changed files with 46 additions and 25 deletions
|
@ -24,7 +24,7 @@ const propTypes = {
|
||||||
showOnMobile: PropTypes.bool,
|
showOnMobile: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
const AsideMenu = (DeleteServerButton) => {
|
const AsideMenu = (DeleteServerButton, ShlinkVersions) => {
|
||||||
const AsideMenu = ({ selectedServer, className, showOnMobile }) => {
|
const AsideMenu = ({ selectedServer, className, showOnMobile }) => {
|
||||||
const serverId = selectedServer ? selectedServer.id : '';
|
const serverId = selectedServer ? selectedServer.id : '';
|
||||||
const asideClass = classNames('aside-menu', className, {
|
const asideClass = classNames('aside-menu', className, {
|
||||||
|
@ -49,6 +49,7 @@ const AsideMenu = (DeleteServerButton) => {
|
||||||
<span className="aside-menu__item-text">Manage tags</span>
|
<span className="aside-menu__item-text">Manage tags</span>
|
||||||
</AsideMenuItem>
|
</AsideMenuItem>
|
||||||
|
|
||||||
|
<ShlinkVersions />
|
||||||
<DeleteServerButton className="aside-menu__item aside-menu__item--danger" server={selectedServer} />
|
<DeleteServerButton className="aside-menu__item aside-menu__item--danger" server={selectedServer} />
|
||||||
</nav>
|
</nav>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
16
src/common/ShlinkVersions.js
Normal file
16
src/common/ShlinkVersions.js
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { serverType } from '../servers/prop-types';
|
||||||
|
|
||||||
|
const propTypes = {
|
||||||
|
selectedServer: serverType,
|
||||||
|
};
|
||||||
|
|
||||||
|
const ShlinkVersions = ({ selectedServer }) => {
|
||||||
|
const { version } = selectedServer;
|
||||||
|
|
||||||
|
return <span>Server: v{version}</span>;
|
||||||
|
};
|
||||||
|
|
||||||
|
ShlinkVersions.propTypes = propTypes;
|
||||||
|
|
||||||
|
export default ShlinkVersions;
|
|
@ -4,6 +4,7 @@ import Home from '../Home';
|
||||||
import MenuLayout from '../MenuLayout';
|
import MenuLayout from '../MenuLayout';
|
||||||
import AsideMenu from '../AsideMenu';
|
import AsideMenu from '../AsideMenu';
|
||||||
import ErrorHandler from '../ErrorHandler';
|
import ErrorHandler from '../ErrorHandler';
|
||||||
|
import ShlinkVersions from '../ShlinkVersions';
|
||||||
|
|
||||||
const provideServices = (bottle, connect, withRouter) => {
|
const provideServices = (bottle, connect, withRouter) => {
|
||||||
bottle.constant('window', global.window);
|
bottle.constant('window', global.window);
|
||||||
|
@ -30,7 +31,10 @@ const provideServices = (bottle, connect, withRouter) => {
|
||||||
bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));
|
bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));
|
||||||
bottle.decorator('MenuLayout', withRouter);
|
bottle.decorator('MenuLayout', withRouter);
|
||||||
|
|
||||||
bottle.serviceFactory('AsideMenu', AsideMenu, 'DeleteServerButton');
|
bottle.serviceFactory('AsideMenu', AsideMenu, 'DeleteServerButton', 'ShlinkVersions');
|
||||||
|
|
||||||
|
bottle.serviceFactory('ShlinkVersions', () => ShlinkVersions);
|
||||||
|
bottle.decorator('ShlinkVersions', connect([ 'selectedServer' ]));
|
||||||
|
|
||||||
bottle.serviceFactory('ErrorHandler', ErrorHandler, 'window', 'console');
|
bottle.serviceFactory('ErrorHandler', ErrorHandler, 'window', 'console');
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,40 +1,38 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
|
import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import React from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { serverType } from './prop-types';
|
import { serverType } from './prop-types';
|
||||||
|
|
||||||
const DeleteServerButton = (DeleteServerModal) => class DeleteServerButton extends React.Component {
|
const propTypes = {
|
||||||
static propTypes = {
|
|
||||||
server: serverType,
|
server: serverType,
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = { isModalOpen: false };
|
const DeleteServerButton = (DeleteServerModal) => {
|
||||||
|
const DeleteServerButtonComp = ({ server, className }) => {
|
||||||
render() {
|
const [ isModalOpen, setModalOpen ] = useState(false);
|
||||||
const { server, className } = this.props;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<span
|
<span className={className} key="deleteServerBtn" onClick={() => setModalOpen(true)}>
|
||||||
className={className}
|
|
||||||
key="deleteServerBtn"
|
|
||||||
onClick={() => this.setState({ isModalOpen: true })}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={deleteIcon} />
|
<FontAwesomeIcon icon={deleteIcon} />
|
||||||
<span className="aside-menu__item-text">Delete this server</span>
|
<span className="aside-menu__item-text">Remove this server</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<DeleteServerModal
|
<DeleteServerModal
|
||||||
isOpen={this.state.isModalOpen}
|
isOpen={isModalOpen}
|
||||||
toggle={() => this.setState(({ isModalOpen }) => ({ isModalOpen: !isModalOpen }))}
|
toggle={() => setModalOpen(!isModalOpen)}
|
||||||
server={server}
|
server={server}
|
||||||
key="deleteServerModal"
|
key="deleteServerModal"
|
||||||
/>
|
/>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
|
DeleteServerButtonComp.propTypes = propTypes;
|
||||||
|
|
||||||
|
return DeleteServerButtonComp;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DeleteServerButton;
|
export default DeleteServerButton;
|
||||||
|
|
|
@ -22,12 +22,14 @@ const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }) =>
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal isOpen={isOpen} toggle={toggle} centered>
|
<Modal isOpen={isOpen} toggle={toggle} centered>
|
||||||
<ModalHeader toggle={toggle}><span className="text-danger">Delete server</span></ModalHeader>
|
<ModalHeader toggle={toggle}><span className="text-danger">Remove server</span></ModalHeader>
|
||||||
<ModalBody>
|
<ModalBody>
|
||||||
<p>Are you sure you want to delete server <b>{server ? server.name : ''}</b>?</p>
|
<p>Are you sure you want to remove <b>{server ? server.name : ''}</b>?</p>
|
||||||
<p>
|
<p>
|
||||||
No data will be deleted, only the access to that server will be removed from this host.
|
<i>
|
||||||
|
No data will be deleted, only the access to this server will be removed from this host.
|
||||||
You can create it again at any moment.
|
You can create it again at any moment.
|
||||||
|
</i>
|
||||||
</p>
|
</p>
|
||||||
</ModalBody>
|
</ModalBody>
|
||||||
<ModalFooter>
|
<ModalFooter>
|
||||||
|
|
Loading…
Reference in a new issue