Add QRCode

client/components/Modal/Modal.js

@@ -44,9 +44,9 @@ const Modal = ({ children, handler, show, close }) =>
         {children}
         <ButtonsWrapper>
           <Button color="gray" onClick={close}>
-            No
+            {handler ? 'No' : 'Close'}
           </Button>
-          <Button onClick={handler}>Yes</Button>
+          {handler && <Button onClick={handler}>Yes</Button>}
         </ButtonsWrapper>
       </Content>
     </Wrapper>
@@ -55,12 +55,13 @@ const Modal = ({ children, handler, show, close }) =>
 Modal.propTypes = {
   children: PropTypes.node.isRequired,
   close: PropTypes.func.isRequired,
-  handler: PropTypes.func.isRequired,
+  handler: PropTypes.func,
   show: PropTypes.bool,
 };
 
 Modal.defaultProps = {
   show: false,
+  handler: null,
 };
 
 export default Modal;

client/components/Shortener/ShortenerResult.js

@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import QRCode from 'qrcode.react';
 import Button from '../Button';
 import Loading from '../PageLoading';
 import { fadeIn } from '../../helpers/animations';
+import TBodyButton from '../Table/TBody/TBodyButton';
+import Modal from '../Modal';
 
 const Wrapper = styled.div`
   position: relative;
@@ -43,20 +46,74 @@ const CopyMessage = styled.p`
   animation: ${fadeIn} 0.3s ease-out;
 `;
 
-const ShortenerResult = ({ copyHandler, isCopied, loading, url }) =>
-  loading ? (
-    <Loading />
-  ) : (
-    <Wrapper>
-      {isCopied && <CopyMessage>Copied to clipboard.</CopyMessage>}
-      <CopyToClipboard text={url.list[0].shortUrl} onCopy={copyHandler}>
-        <Url>{url.list[0].shortUrl.replace(/^https?:\/\//, '')}</Url>
-      </CopyToClipboard>
-      <CopyToClipboard text={url.list[0].shortUrl} onCopy={copyHandler}>
-        <Button icon="copy">Copy</Button>
-      </CopyToClipboard>
-    </Wrapper>
-  );
+const QRButton = styled(TBodyButton)`
+  width: 36px;
+  height: 36px;
+  margin-left: 12px !important;
+  box-shadow: 0 4px 10px rgba(100, 100, 100, 0.2);
+
+  :hover {
+    box-shadow: 0 4px 10px rgba(100, 100, 100, 0.3);
+  }
+
+  @media only screen and (max-width: 768px) {
+    height: 32px;
+    width: 32px;
+
+    img {
+      width: 14px;
+      height: 14px;
+    }
+  }
+`;
+
+const Icon = styled.img`
+  width: 16px;
+  height: 16px;
+`;
+
+class ShortenerResult extends Component {
+  constructor() {
+    super();
+    this.state = {
+      showQrCodeModal: false,
+    };
+    this.toggleQrCodeModal = this.toggleQrCodeModal.bind(this);
+  }
+
+  toggleQrCodeModal() {
+    this.setState(prevState => ({
+      showQrCodeModal: !prevState.showQrCodeModal,
+    }));
+  }
+
+  render() {
+    const { copyHandler, isCopied, loading, url } = this.props;
+    const showQrCode = window.innerWidth > 420;
+
+    if (loading) return <Loading />;
+
+    return (
+      <Wrapper>
+        {isCopied && <CopyMessage>Copied to clipboard.</CopyMessage>}
+        <CopyToClipboard text={url.list[0].shortUrl} onCopy={copyHandler}>
+          <Url>{url.list[0].shortUrl.replace(/^https?:\/\//, '')}</Url>
+        </CopyToClipboard>
+        <CopyToClipboard text={url.list[0].shortUrl} onCopy={copyHandler}>
+          <Button icon="copy">Copy</Button>
+        </CopyToClipboard>
+        {showQrCode && (
+          <QRButton onClick={this.toggleQrCodeModal}>
+            <Icon src="/images/qrcode.svg" />
+          </QRButton>
+        )}
+        <Modal show={this.state.showQrCodeModal} close={this.toggleQrCodeModal}>
+          <QRCode value={url.list[0].shortUrl} size={196} />
+        </Modal>
+      </Wrapper>
+    );
+  }
+}
 
 ShortenerResult.propTypes = {
   copyHandler: PropTypes.func.isRequired,

client/components/Table/TBody/TBodyCount.js

@@ -5,8 +5,10 @@ import PropTypes from 'prop-types';
 import Router from 'next/router';
 import styled from 'styled-components';
 import URL from 'url';
+import QRCode from 'qrcode.react';
 import TBodyButton from './TBodyButton';
 import { showPageLoading } from '../../../actions';
+import Modal from '../../Modal';
 
 const Wrapper = styled.div`
   display: flex;
@@ -33,7 +35,17 @@ const Icon = styled.img`
 class TBodyCount extends Component {
   constructor() {
     super();
+    this.state = {
+      showQrCodeModal: false,
+    };
     this.goTo = this.goTo.bind(this);
+    this.toggleQrCodeModal = this.toggleQrCodeModal.bind(this);
+  }
+
+  toggleQrCodeModal() {
+    this.setState(prevState => ({
+      showQrCodeModal: !prevState.showQrCodeModal,
+    }));
   }
 
   goTo(e) {
@@ -45,6 +57,8 @@ class TBodyCount extends Component {
 
   render() {
     const { showModal, url } = this.props;
+    const showQrCode = window.innerWidth > 640;
+
     return (
       <Wrapper>
         {url.count || 0}
@@ -56,6 +70,11 @@ class TBodyCount extends Component {
               Stats
             </TBodyButton>
           )}
+          {showQrCode && (
+            <TBodyButton onClick={this.toggleQrCodeModal}>
+              <Icon src="/images/qrcode.svg" />
+            </TBodyButton>
+          )}
           <TBodyButton
             data-id={url.id}
             data-host={URL.parse(url.shortUrl).hostname}
@@ -64,6 +83,9 @@ class TBodyCount extends Component {
             <Icon src="/images/trash.svg" />
           </TBodyButton>
         </Actions>
+        <Modal show={this.state.showQrCodeModal} close={this.toggleQrCodeModal}>
+          <QRCode value={url.shortUrl} size={196} />
+        </Modal>
       </Wrapper>
     );
   }

package.json

@@ -54,6 +54,7 @@
     "passport-local": "^1.0.0",
     "passport-localapikey-update": "^0.6.0",
     "prop-types": "^15.6.0",
+    "qrcode.react": "^0.8.0",
     "raven": "^2.4.0",
     "react": "^16.3.2",
     "react-copy-to-clipboard": "^5.0.1",