Refactored delete server components

src/common/AsideMenu.js

@@ -24,7 +24,7 @@ const propTypes = {
   showOnMobile: PropTypes.bool,
 };
 
-const AsideMenu = (DeleteServerButton) => {
+const AsideMenu = (DeleteServerButton, ShlinkVersions) => {
   const AsideMenu = ({ selectedServer, className, showOnMobile }) => {
     const serverId = selectedServer ? selectedServer.id : '';
     const asideClass = classNames('aside-menu', className, {
@@ -49,6 +49,7 @@ const AsideMenu = (DeleteServerButton) => {
             <span className="aside-menu__item-text">Manage tags</span>
           </AsideMenuItem>
 
+          <ShlinkVersions />
           <DeleteServerButton className="aside-menu__item aside-menu__item--danger" server={selectedServer} />
         </nav>
       </aside>

src/common/ShlinkVersions.js

@@ -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;

src/common/services/provideServices.js

@@ -4,6 +4,7 @@ import Home from '../Home';
 import MenuLayout from '../MenuLayout';
 import AsideMenu from '../AsideMenu';
 import ErrorHandler from '../ErrorHandler';
+import ShlinkVersions from '../ShlinkVersions';
 
 const provideServices = (bottle, connect, withRouter) => {
   bottle.constant('window', global.window);
@@ -30,7 +31,10 @@ const provideServices = (bottle, connect, withRouter) => {
   bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));
   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');
 };

src/servers/DeleteServerButton.js

@@ -1,40 +1,38 @@
+import React, { useState } from 'react';
 import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
 import PropTypes from 'prop-types';
 import { serverType } from './prop-types';
 
-const DeleteServerButton = (DeleteServerModal) => class DeleteServerButton extends React.Component {
-  static propTypes = {
+const propTypes = {
   server: serverType,
   className: PropTypes.string,
 };
 
-  state = { isModalOpen: false };
-
-  render() {
-    const { server, className } = this.props;
+const DeleteServerButton = (DeleteServerModal) => {
+  const DeleteServerButtonComp = ({ server, className }) => {
+    const [ isModalOpen, setModalOpen ] = useState(false);
 
     return (
       <React.Fragment>
-        <span
-          className={className}
-          key="deleteServerBtn"
-          onClick={() => this.setState({ isModalOpen: true })}
-        >
+        <span className={className} key="deleteServerBtn" onClick={() => setModalOpen(true)}>
           <FontAwesomeIcon icon={deleteIcon} />
-          <span className="aside-menu__item-text">Delete this server</span>
+          <span className="aside-menu__item-text">Remove this server</span>
         </span>
 
         <DeleteServerModal
-          isOpen={this.state.isModalOpen}
-          toggle={() => this.setState(({ isModalOpen }) => ({ isModalOpen: !isModalOpen }))}
+          isOpen={isModalOpen}
+          toggle={() => setModalOpen(!isModalOpen)}
           server={server}
           key="deleteServerModal"
         />
       </React.Fragment>
     );
-  }
+  };
+
+  DeleteServerButtonComp.propTypes = propTypes;
+
+  return DeleteServerButtonComp;
 };
 
 export default DeleteServerButton;

src/servers/DeleteServerModal.js

@@ -22,12 +22,14 @@ const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }) =>
 
   return (
     <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>
-        <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>
-          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.
+          </i>
         </p>
       </ModalBody>
       <ModalFooter>