Added QrCode modal window to short URLs

src/index.scss

@@ -8,6 +8,9 @@
   white-space: nowrap;
 }
 
+.dropdown-item {
+  cursor: pointer;
+}
 .dropdown-item.active {
   background-color: $mainColor !important;
 }

src/short-urls/ShortUrlsList.js

@@ -13,6 +13,7 @@ import copyIcon from '@fortawesome/fontawesome-free-regular/faCopy';
 import menuIcon from '@fortawesome/fontawesome-free-solid/faEllipsisV';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import Tag from '../utils/Tag';
+import QrCodeModal from './helpers/QrCodeModal';
 import { listShortUrls } from './reducers/shortUrlsList';
 import './ShortUrlsList.scss';
 
@@ -174,13 +175,14 @@ class Row extends React.Component {
 }
 
 class RowMenu extends React.Component {
-  state = { isOpen: false };
+  state = { isOpen: false, isQrModalOpen: false };
   toggle = () => this.setState({ isOpen: ! this.state.isOpen });
 
   render () {
     const { display, shortUrl, onCopyToClipboard } = this.props;
     const baseClass = 'short-urls-list__dropdown-toggle';
     const toggleClass = ! display ? `${baseClass} short-urls-list__dropdown-toggle--hidden` : baseClass;
+    const toggleQrCode = () => this.setState({ isQrModalOpen: !this.state.isQrModalOpen });
 
     return (
       <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
@@ -195,9 +197,14 @@ class RowMenu extends React.Component {
           <DropdownItem>
             <FontAwesomeIcon icon={pictureIcon} /> &nbsp;Preview
           </DropdownItem>
-          <DropdownItem>
+          <DropdownItem onClick={toggleQrCode}>
             <FontAwesomeIcon icon={qrIcon} /> &nbsp;QR code
           </DropdownItem>
+          <QrCodeModal
+            url={shortUrl}
+            isOpen={this.state.isQrModalOpen}
+            toggle={toggleQrCode}
+          />
           <DropdownItem divider />
           <CopyToClipboard text={shortUrl} onCopy={onCopyToClipboard}>
             <DropdownItem>

src/short-urls/helpers/QrCodeModal.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+import './QrCodeModal.scss';
+
+export default function QrCodeModal ({ url, toggle, isOpen }) {
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} centered={true}>
+      <ModalHeader toggle={toggle}>QR code for <a target="_blank" href={url}>{url}</a></ModalHeader>
+      <ModalBody>
+        <div className="text-center">
+          <img src={`${url}/qr-code`} className="qr-code-modal__img" />
+        </div>
+      </ModalBody>
+    </Modal>
+  );
+}

src/short-urls/helpers/QrCodeModal.scss

@@ -0,0 +1,3 @@
+.qr-code-modal__img {
+  max-width: 100%;
+}