Created delete short URLs modal

src/index.scss

@@ -24,7 +24,8 @@ body,
 
 .dropdown-item.active,
 .dropdown-item:active {
-  @extend .bg-main;
+  background-color: $lightGrey !important;
+  color: inherit !important;
 }
 
 .shlink-container {

src/short-urls/helpers/DeleteShortUrlModal.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import PropTypes from 'prop-types';
+import { shortUrlType } from '../reducers/shortUrlsList';
+import './QrCodeModal.scss';
+
+export default class DeleteShortUrlModal extends Component {
+  static propTypes = {
+    shortUrl: shortUrlType,
+    toggle: PropTypes.func,
+    isOpen: PropTypes.bool,
+  };
+
+  state = { inputValue: '' };
+
+  render() {
+    const { shortUrl, toggle, isOpen } = this.props;
+
+    return (
+      <Modal isOpen={isOpen} toggle={toggle} centered>
+        <form onSubmit={(e) => e.preventDefault()}>
+          <ModalHeader toggle={toggle}>
+            <span className="text-danger">Delete short URL</span>
+          </ModalHeader>
+          <ModalBody>
+            <p><b className="text-danger">Caution!</b> You are about to delete a short URL.</p>
+            <p>This action cannot be undone. Once you have deleted it, all the visits stats will be lost.</p>
+
+            <input
+              type="text"
+              className="form-control"
+              placeholder="Insert the short code of the URL"
+              value={this.state.inputValue}
+              onChange={(e) => this.setState({ inputValue: e.target.value })}
+            />
+          </ModalBody>
+          <ModalFooter>
+            <button type="button" className="btn btn-link" onClick={toggle}>Cancel</button>
+            <button
+              type="submit"
+              className="btn btn-danger"
+              disabled={this.state.inputValue !== shortUrl.shortCode}
+              onClick={toggle}
+            >
+              Delete
+            </button>
+          </ModalFooter>
+        </form>
+      </Modal>
+    );
+  }
+}

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -4,6 +4,7 @@ import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
 import pieChartIcon from '@fortawesome/fontawesome-free-solid/faChartPie';
 import menuIcon from '@fortawesome/fontawesome-free-solid/faEllipsisV';
 import qrIcon from '@fortawesome/fontawesome-free-solid/faQrcode';
+import deleteIcon from '@fortawesome/fontawesome-free-solid/faMinusCircle';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
@@ -16,6 +17,7 @@ import PreviewModal from './PreviewModal';
 import QrCodeModal from './QrCodeModal';
 import './ShortUrlsRowMenu.scss';
 import EditTagsModal from './EditTagsModal';
+import DeleteShortUrlModal from './DeleteShortUrlModal';
 
 export class ShortUrlsRowMenu extends React.Component {
   static propTypes = {
@@ -30,15 +32,18 @@ export class ShortUrlsRowMenu extends React.Component {
     isQrModalOpen: false,
     isPreviewOpen: false,
     isTagsModalOpen: false,
+    isDeleteModalOpen: false,
   };
   toggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
 
   render() {
     const { completeShortUrl, onCopyToClipboard, selectedServer, shortUrl } = this.props;
     const serverId = selectedServer ? selectedServer.id : '';
-    const toggleQrCode = () => this.setState(({ isQrModalOpen }) => ({ isQrModalOpen: !isQrModalOpen }));
+    const toggleModal = (prop) => () => this.setState((prevState) => ({ [prop]: !prevState[prop] }));
-    const togglePreview = () => this.setState(({ isPreviewOpen }) => ({ isPreviewOpen: !isPreviewOpen }));
+    const toggleQrCode = toggleModal('isQrModalOpen');
-    const toggleTags = () => this.setState(({ isTagsModalOpen }) => ({ isTagsModalOpen: !isTagsModalOpen }));
+    const togglePreview = toggleModal('isPreviewOpen');
+    const toggleTags = toggleModal('isTagsModalOpen');
+    const toggleDelete = toggleModal('isDeleteModalOpen');
 
     return (
       <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
@@ -47,8 +52,9 @@ export class ShortUrlsRowMenu extends React.Component {
         </DropdownToggle>
         <DropdownMenu>
           <DropdownItem tag={Link} to={`/server/${serverId}/short-code/${shortUrl.shortCode}/visits`}>
-            <FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit Stats
+            <FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit stats
           </DropdownItem>
+
           <DropdownItem onClick={toggleTags}>
             <FontAwesomeIcon icon={tagsIcon} /> &nbsp;Edit tags
           </DropdownItem>
@@ -59,6 +65,15 @@ export class ShortUrlsRowMenu extends React.Component {
             toggle={toggleTags}
           />
 
+          <DropdownItem className="short-urls-row-menu__dropdown-item--danger" onClick={toggleDelete}>
+            <FontAwesomeIcon icon={deleteIcon} /> &nbsp;Delete short URL
+          </DropdownItem>
+          <DeleteShortUrlModal
+            shortUrl={shortUrl}
+            isOpen={this.state.isDeleteModalOpen}
+            toggle={toggleDelete}
+          />
+
           <DropdownItem divider />
 
           <DropdownItem onClick={togglePreview}>

src/short-urls/helpers/ShortUrlsRowMenu.scss

@@ -1,6 +1,19 @@
+@import '../../utils/base';
+
 .short-urls-row-menu__dropdown-toggle:before {
   display: none !important;
 }
+
 .short-urls-row-menu__dropdown-toggle--hidden {
   visibility: hidden;
 }
+
+.short-urls-row-menu__dropdown-item--danger.short-urls-row-menu__dropdown-item--danger {
+  color: $dangerColor;
+
+  &:hover,
+  &:active,
+  &.active {
+    color: $dangerColor !important;
+  }
+}