From b02dcf6c53d2ab858a0eae6f7b95e94bb4b7e397 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Thu, 5 Mar 2020 10:18:33 +0100
Subject: [PATCH] Refactored delete server components

---
 src/common/AsideMenu.js                |  3 ++-
 src/common/ShlinkVersions.js           | 16 ++++++++++++
 src/common/services/provideServices.js |  6 ++++-
 src/servers/DeleteServerButton.js      | 36 ++++++++++++--------------
 src/servers/DeleteServerModal.js       | 10 ++++---
 5 files changed, 46 insertions(+), 25 deletions(-)
 create mode 100644 src/common/ShlinkVersions.js

diff --git a/src/common/AsideMenu.js b/src/common/AsideMenu.js
index 56e7d10c..80f0cd2c 100644
--- a/src/common/AsideMenu.js
+++ b/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>
diff --git a/src/common/ShlinkVersions.js b/src/common/ShlinkVersions.js
new file mode 100644
index 00000000..37726936
--- /dev/null
+++ b/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;
diff --git a/src/common/services/provideServices.js b/src/common/services/provideServices.js
index f8f5c980..fdb25687 100644
--- a/src/common/services/provideServices.js
+++ b/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');
 };
diff --git a/src/servers/DeleteServerButton.js b/src/servers/DeleteServerButton.js
index f5dce2da..8d0caaff 100644
--- a/src/servers/DeleteServerButton.js
+++ b/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 = {
-    server: serverType,
-    className: PropTypes.string,
-  };
+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;
diff --git a/src/servers/DeleteServerModal.js b/src/servers/DeleteServerModal.js
index da056acf..756c9c8e 100644
--- a/src/servers/DeleteServerModal.js
+++ b/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.
-          You can create it again at any moment.
+          <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>