Created ShortUrlVisits page

src/common/MenuLayout.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { selectServer } from '../servers/reducers/selectedServer';
 import CreateShortUrl from '../short-urls/CreateShortUrl';
 import ShortUrls from '../short-urls/ShortUrls';
+import ShortUrlsVisits from '../short-urls/ShortUrlVisits';
 import AsideMenu from './AsideMenu';
 import { pick } from 'ramda';
 
@@ -29,6 +30,11 @@ export class MenuLayout extends React.Component {
               path="/server/:serverId/create-short-url"
               component={CreateShortUrl}
             />
+            <Route
+              exact
+              path="/server/:serverId/short-code/:shortCode/visits"
+              component={ShortUrlsVisits}
+            />
           </Switch>
         </div>
       </div>

src/short-urls/ShortUrlVisits.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+export class ShortUrlsVisits extends React.Component {
+  render() {
+    const { match: { params } } = this.props;
+    return <div>Visits for <b>{params.shortCode}</b></div>;
+  }
+}
+
+export default connect()(ShortUrlsVisits);

src/short-urls/helpers/ShortUrlsRow.js

@@ -5,10 +5,10 @@ import { ShortUrlsRowMenu } from './ShortUrlsRowMenu';
 import './ShortUrlsRow.scss'
 
 export class ShortUrlsRow extends React.Component {
-  state = {displayMenu: false, copiedToClipboard: false};
+  state = { displayMenu: false, copiedToClipboard: false };
 
   render() {
-    const {shortUrl, selectedServer} = this.props;
+    const { shortUrl, selectedServer } = this.props;
     const completeShortUrl = !selectedServer ? shortUrl.shortCode : `${selectedServer.url}/${shortUrl.shortCode}`;
 
     return (
@@ -37,6 +37,8 @@ export class ShortUrlsRow extends React.Component {
           <ShortUrlsRowMenu
             display={this.state.displayMenu}
             shortUrl={completeShortUrl}
+            selectedServer={selectedServer}
+            shortCode={shortUrl.shortCode}
             onCopyToClipboard={() => {
               this.setState({ copiedToClipboard: true });
               setTimeout(() => this.setState({ copiedToClipboard: false }), 2000);

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -6,6 +6,7 @@ import qrIcon from '@fortawesome/fontawesome-free-solid/faQrcode';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Link } from 'react-router-dom';
 import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
 import PreviewModal from './PreviewModal';
 import QrCodeModal from './QrCodeModal';
@@ -16,7 +17,8 @@ export class ShortUrlsRowMenu extends React.Component {
   toggle = () => this.setState({ isOpen: !this.state.isOpen });
 
   render() {
-    const {display, shortUrl, onCopyToClipboard} = this.props;
+    const { display, shortUrl, onCopyToClipboard, selectedServer, shortCode } = this.props;
+    const serverId = selectedServer ? selectedServer.id : '';
     const baseClass = 'short-urls-row-menu__dropdown-toggle';
     const toggleClass = !display ? `${baseClass} short-urls-row-menu__dropdown-toggle--hidden` : baseClass;
     const toggleQrCode = () => this.setState({isQrModalOpen: !this.state.isQrModalOpen});
@@ -28,7 +30,7 @@ export class ShortUrlsRowMenu extends React.Component {
           &nbsp;<FontAwesomeIcon icon={menuIcon}/>&nbsp;
         </DropdownToggle>
         <DropdownMenu>
-          <DropdownItem>
+          <DropdownItem tag={Link} to={`/server/${serverId}/short-code/${shortCode}/visits`}>
             <FontAwesomeIcon icon={pieChartIcon}/> &nbsp;Visit Stats
           </DropdownItem>