From 131099b2a6c8ec04d6a6d9a99c3a316209379b51 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Fri, 27 Jul 2018 18:05:09 +0200
Subject: [PATCH] Added QrCode modal window to short URLs

---
 src/index.scss                          |  3 +++
 src/short-urls/ShortUrlsList.js         | 11 +++++++++--
 src/short-urls/helpers/QrCodeModal.js   | 16 ++++++++++++++++
 src/short-urls/helpers/QrCodeModal.scss |  3 +++
 4 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/short-urls/helpers/QrCodeModal.js
 create mode 100644 src/short-urls/helpers/QrCodeModal.scss

diff --git a/src/index.scss b/src/index.scss
index c8cafe51..fb19aa8f 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -8,6 +8,9 @@
   white-space: nowrap;
 }
 
+.dropdown-item {
+  cursor: pointer;
+}
 .dropdown-item.active {
   background-color: $mainColor !important;
 }
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 035808fc..96398251 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/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>
diff --git a/src/short-urls/helpers/QrCodeModal.js b/src/short-urls/helpers/QrCodeModal.js
new file mode 100644
index 00000000..01662c8f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/short-urls/helpers/QrCodeModal.scss b/src/short-urls/helpers/QrCodeModal.scss
new file mode 100644
index 00000000..40602269
--- /dev/null
+++ b/src/short-urls/helpers/QrCodeModal.scss
@@ -0,0 +1,3 @@
+.qr-code-modal__img {
+  max-width: 100%;
+}