Added modal window for server deletion

src/servers/DeleteServerButton.js

@@ -0,0 +1,32 @@
+import deleteIcon from '@fortawesome/fontawesome-free-solid/faMinusCircle';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import React from 'react';
+import DeleteServerModal from './DeleteServerModal';
+
+export default class DeleteServerButton extends React.Component {
+  state = { isModalOpen: false };
+
+  render() {
+    const { history, server } = this.props;
+
+    return [
+      (
+        <span
+          className={this.props.className}
+          onClick={() => this.setState({ isModalOpen: true })}
+        >
+          <FontAwesomeIcon icon={deleteIcon} />
+          <span className="aside-menu__item-text">Delete this server</span>
+        </span>
+      ),
+      (
+        <DeleteServerModal
+          isOpen={this.state.isModalOpen}
+          toggle={() => this.setState({ isModalOpen: !this.state.isModalOpen })}
+          history={history}
+          server={server}
+        />
+      )
+    ];
+  }
+}

src/servers/DeleteServerModal.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { deleteServer } from './reducers/server';
+
+export const DeleteServerModal = ({ server, deleteServer, toggle, history, isOpen }) => {
+  const closeModal = () => {
+    deleteServer(server);
+    toggle();
+    history.push('/');
+  };
+
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} centered={true}>
+      <ModalHeader toggle={toggle}>Delete server</ModalHeader>
+      <ModalBody>Are you sure you want to delete server <b>{server ? server.name : ''}</b>.</ModalBody>
+      <ModalFooter>
+        <button className="btn btn-link" onClick={toggle}>Cancel</button>
+        <button className="btn btn-danger" onClick={() => closeModal()}>Delete</button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default connect(null, { deleteServer })(DeleteServerModal);

src/servers/reducers/server.js

@@ -2,10 +2,12 @@ import ServersService from '../services';
 
 const FETCH_SERVERS = 'shlink/servers/FETCH_SERVERS';
 const CREATE_SERVER = 'shlink/servers/CREATE_SERVER';
+const DELETE_SERVER = 'shlink/servers/DELETE_SERVER';
 
 export default function reducer(state = {}, action) {
   switch (action.type) {
     case FETCH_SERVERS:
+    case DELETE_SERVER:
       return action.servers;
     case CREATE_SERVER:
       const server = action.server;
@@ -26,3 +28,8 @@ export const createServer = server => {
   ServersService.createServer(server);
   return listServers();
 };
+
+export const deleteServer = server => {
+  ServersService.deleteServer(server);
+  return listServers();
+};

src/servers/services/index.js

@@ -1,4 +1,5 @@
 import Storage from '../../utils/Storage';
+import { dissoc } from 'ramda';
 
 const SERVERS_STORAGE_KEY = 'servers';
 
@@ -21,6 +22,11 @@ export class ServersService {
     servers[server.id] = server;
     this.storage.set(SERVERS_STORAGE_KEY, servers);
   };
+
+  deleteServer = server => {
+    const servers = dissoc(server.id, this.listServers());
+    this.storage.set(SERVERS_STORAGE_KEY, servers);
+  };
 }
 
 export default new ServersService(Storage);