Added preview modal component

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 PreviewModal from './helpers/PreviewModal';
 import QrCodeModal from './helpers/QrCodeModal';
 import { listShortUrls } from './reducers/shortUrlsList';
 import './ShortUrlsList.scss';
@@ -175,7 +176,7 @@ class Row extends React.Component {
 }
 
 class RowMenu extends React.Component {
-  state = { isOpen: false, isQrModalOpen: false };
+  state = { isOpen: false, isQrModalOpen: false, isPreviewOpen: false };
   toggle = () => this.setState({ isOpen: ! this.state.isOpen });
 
   render () {
@@ -183,6 +184,7 @@ class RowMenu extends React.Component {
     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 });
+    const togglePreview = () => this.setState({ isPreviewOpen: !this.state.isPreviewOpen });
 
     return (
       <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
@@ -193,10 +195,18 @@ class RowMenu extends React.Component {
           <DropdownItem>
             <FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit Stats
           </DropdownItem>
+
           <DropdownItem divider />
-          <DropdownItem>
+
+          <DropdownItem onClick={togglePreview}>
             <FontAwesomeIcon icon={pictureIcon} /> &nbsp;Preview
           </DropdownItem>
+          <PreviewModal
+            url={shortUrl}
+            isOpen={this.state.isPreviewOpen}
+            toggle={togglePreview}
+          />
+
           <DropdownItem onClick={toggleQrCode}>
             <FontAwesomeIcon icon={qrIcon} /> &nbsp;QR code
           </DropdownItem>
@@ -205,7 +215,9 @@ class RowMenu extends React.Component {
             isOpen={this.state.isQrModalOpen}
             toggle={toggleQrCode}
           />
+
           <DropdownItem divider />
+
           <CopyToClipboard text={shortUrl} onCopy={onCopyToClipboard}>
             <DropdownItem>
               <FontAwesomeIcon icon={copyIcon} /> &nbsp;Copy to clipboard

src/short-urls/helpers/PreviewModal.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+import './PreviewModal.scss';
+
+export default function PreviewModal ({ url, toggle, isOpen }) {
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} size="lg">
+      <ModalHeader toggle={toggle}>Preview for <a target="_blank" href={url}>{url}</a></ModalHeader>
+      <ModalBody>
+        <div className="text-center">
+          <p className="preview-modal__loader">Loading...</p>
+          <img src={`${url}/preview`} className="preview-modal__img" />
+        </div>
+      </ModalBody>
+    </Modal>
+  );
+}

src/short-urls/helpers/PreviewModal.scss

@@ -0,0 +1,13 @@
+@import "../../utils/mixins/horizontal-align";
+
+.preview-modal__img {
+  max-width: 100%;
+  position: relative;
+  z-index: 2;
+}
+
+.preview-modal__loader {
+  @include horizontal-align();
+  z-index: 1;
+  top: 1rem;
+}

src/utils/mixins/horizontal-align.scss

@@ -0,0 +1,5 @@
+@mixin horizontal-align {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}