Created common component to handle tags and modal to edit tags

src/short-urls/helpers/EditTagsModal.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import TagsSelector from '../../utils/TagsSelector';
+
+export default class EditTagsModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { tags: props.shortUrl.tags };
+  }
+
+  render() {
+    const { isOpen, toggle, url } = this.props;
+    const changeTags = tags => this.setState({ tags });
+
+    return (
+      <Modal isOpen={isOpen} toggle={toggle} centered>
+        <ModalHeader toggle={toggle}>Edit tags for <a target="_blank" href={url}>{url}</a></ModalHeader>
+        <ModalBody>
+          <TagsSelector tags={this.state.tags} onChange={changeTags} />
+        </ModalBody>
+        <ModalFooter>
+          <button className="btn btn-outline-primary" type="button">Save</button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}

src/short-urls/helpers/QrCodeModal.js

@@ -4,7 +4,7 @@ import './QrCodeModal.scss';
 
 export default function QrCodeModal ({ url, toggle, isOpen }) {
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered={true}>
+    <Modal isOpen={isOpen} toggle={toggle} centered>
       <ModalHeader toggle={toggle}>QR code for <a target="_blank" href={url}>{url}</a></ModalHeader>
       <ModalBody>
         <div className="text-center">

src/short-urls/helpers/ShortUrlsRow.js

@@ -45,9 +45,9 @@ export class ShortUrlsRow extends React.Component {
             Copied short URL!
           </small>
           <ShortUrlsRowMenu
-            shortUrl={completeShortUrl}
+            completeShortUrl={completeShortUrl}
             selectedServer={selectedServer}
-            shortCode={shortUrl.shortCode}
+            shortUrl={shortUrl}
             onCopyToClipboard={() => {
               this.setState({ copiedToClipboard: true });
               setTimeout(() => this.setState({ copiedToClipboard: false }), 2000);

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -1,5 +1,6 @@
 import copyIcon from '@fortawesome/fontawesome-free-regular/faCopy';
 import pictureIcon from '@fortawesome/fontawesome-free-regular/faImage';
+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';
@@ -11,16 +12,23 @@ import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reac
 import PreviewModal from './PreviewModal';
 import QrCodeModal from './QrCodeModal';
 import './ShortUrlsRowMenu.scss';
+import EditTagsModal from './EditTagsModal';
 
 export class ShortUrlsRowMenu extends React.Component {
-  state = { isOpen: false, isQrModalOpen: false, isPreviewOpen: false };
+  state = {
+    isOpen: false,
+    isQrModalOpen: false,
+    isPreviewOpen: false,
+    isTagsModalOpen: false,
+  };
   toggle = () => this.setState({ isOpen: !this.state.isOpen });
 
   render() {
-    const { shortUrl, onCopyToClipboard, selectedServer, shortCode } = this.props;
+    const { completeShortUrl, onCopyToClipboard, selectedServer, shortUrl } = this.props;
     const serverId = selectedServer ? selectedServer.id : '';
     const toggleQrCode = () => this.setState({isQrModalOpen: !this.state.isQrModalOpen});
     const togglePreview = () => this.setState({isPreviewOpen: !this.state.isPreviewOpen});
+    const toggleTags = () => this.setState({isTagsModalOpen: !this.state.isTagsModalOpen});
 
     return (
       <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
@@ -28,9 +36,18 @@ export class ShortUrlsRowMenu extends React.Component {
           &nbsp;<FontAwesomeIcon icon={menuIcon}/>&nbsp;
         </DropdownToggle>
         <DropdownMenu>
-          <DropdownItem tag={Link} to={`/server/${serverId}/short-code/${shortCode}/visits`}>
+          <DropdownItem tag={Link} to={`/server/${serverId}/short-code/${shortUrl.shortCode}/visits`}>
             <FontAwesomeIcon icon={pieChartIcon}/> &nbsp;Visit Stats
           </DropdownItem>
+          <DropdownItem onClick={toggleTags}>
+            <FontAwesomeIcon icon={tagsIcon}/> &nbsp;Edit tags
+          </DropdownItem>
+          <EditTagsModal
+            url={completeShortUrl}
+            shortUrl={shortUrl}
+            isOpen={this.state.isTagsModalOpen}
+            toggle={toggleTags}
+          />
 
           <DropdownItem divider/>
 
@@ -38,7 +55,7 @@ export class ShortUrlsRowMenu extends React.Component {
             <FontAwesomeIcon icon={pictureIcon}/> &nbsp;Preview
           </DropdownItem>
           <PreviewModal
-            url={shortUrl}
+            url={completeShortUrl}
             isOpen={this.state.isPreviewOpen}
             toggle={togglePreview}
           />
@@ -47,14 +64,14 @@ export class ShortUrlsRowMenu extends React.Component {
             <FontAwesomeIcon icon={qrIcon}/> &nbsp;QR code
           </DropdownItem>
           <QrCodeModal
-            url={shortUrl}
+            url={completeShortUrl}
             isOpen={this.state.isQrModalOpen}
             toggle={toggleQrCode}
           />
 
           <DropdownItem divider/>
 
-          <CopyToClipboard text={shortUrl} onCopy={onCopyToClipboard}>
+          <CopyToClipboard text={completeShortUrl} onCopy={onCopyToClipboard}>
             <DropdownItem>
               <FontAwesomeIcon icon={copyIcon}/> &nbsp;Copy to clipboard
             </DropdownItem>