Created ShortUrlVisits page

This commit is contained in:
Alejandro Celaya 2018-07-29 18:39:00 +02:00
parent 92f7fffcf3
commit c02b0e0591
4 changed files with 25 additions and 4 deletions

View file

@ -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>

View file

@ -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);

View file

@ -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);

View file

@ -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>