diff --git a/src/utils/ExternalLink.js b/src/utils/ExternalLink.js
index f926db7e..916809cd 100644
--- a/src/utils/ExternalLink.js
+++ b/src/utils/ExternalLink.js
@@ -11,7 +11,7 @@ export default function ExternalLink(props) {
return (
- {children}
+ {children || href}
);
}
diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js
index cf0c09f9..eea3edf7 100644
--- a/src/visits/ShortUrlVisits.js
+++ b/src/visits/ShortUrlVisits.js
@@ -7,7 +7,6 @@ import { Card } from 'reactstrap';
import PropTypes from 'prop-types';
import DateInput from '../common/DateInput';
import MutedMessage from '../utils/MuttedMessage';
-import { serverType } from '../servers/prop-types/index';
import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits';
import {
processBrowserStats,
@@ -27,7 +26,6 @@ export class ShortUrlsVisitsComponent extends React.Component {
processCountriesStats: PropTypes.func,
processReferrersStats: PropTypes.func,
match: PropTypes.object,
- selectedServer: serverType,
getShortUrlVisits: PropTypes.func,
shortUrlVisits: shortUrlVisitsType,
getShortUrlDetail: PropTypes.func,
@@ -59,8 +57,6 @@ export class ShortUrlsVisitsComponent extends React.Component {
render() {
const {
- match: { params },
- selectedServer,
processOsStats,
processBrowserStats,
processCountriesStats,
@@ -68,8 +64,6 @@ export class ShortUrlsVisitsComponent extends React.Component {
shortUrlVisits,
shortUrlDetail,
} = this.props;
- const serverUrl = selectedServer ? selectedServer.url : '';
- const shortLink = `${serverUrl}/${params.shortCode}`;
const renderVisitsContent = () => {
const { visits, loading, error } = shortUrlVisits;
@@ -110,7 +104,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
return (
-
+
@@ -145,7 +139,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
}
const ShortUrlsVisits = connect(
- pick([ 'selectedServer', 'shortUrlVisits', 'shortUrlDetail' ]),
+ pick([ 'shortUrlVisits', 'shortUrlDetail' ]),
{ getShortUrlVisits, getShortUrlDetail }
)(ShortUrlsVisitsComponent);
diff --git a/src/visits/VisitsHeader.js b/src/visits/VisitsHeader.js
index db0d3e5e..6213ced2 100644
--- a/src/visits/VisitsHeader.js
+++ b/src/visits/VisitsHeader.js
@@ -1,7 +1,6 @@
import { Card, UncontrolledTooltip } from 'reactstrap';
import Moment from 'react-moment';
import React from 'react';
-import PropTypes from 'prop-types';
import ExternalLink from '../utils/ExternalLink';
import './VisitsHeader.scss';
import { shortUrlDetailType } from './reducers/shortUrlDetail';
@@ -10,12 +9,14 @@ import { shortUrlVisitsType } from './reducers/shortUrlVisits';
const propTypes = {
shortUrlDetail: shortUrlDetailType.isRequired,
shortUrlVisits: shortUrlVisitsType.isRequired,
- shortLink: PropTypes.string,
};
-export function VisitsHeader({ shortUrlDetail, shortUrlVisits, shortLink }) {
+export function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
const { shortUrl, loading } = shortUrlDetail;
const { visits } = shortUrlVisits;
+ const shortLink = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
+ const longLink = shortUrl && shortUrl.longUrl ? shortUrl.longUrl : '';
+
const renderDate = () => (
{shortUrl.dateCreated}
@@ -30,7 +31,7 @@ export function VisitsHeader({ shortUrlDetail, shortUrlVisits, shortLink }) {
Visits: {visits.length}
- Visit stats for {shortLink}
+ Visit stats for
{shortUrl.dateCreated && (
@@ -44,7 +45,7 @@ export function VisitsHeader({ shortUrlDetail, shortUrlVisits, shortLink }) {
Long URL:
{loading && Loading...}
- {!loading && {shortUrl.longUrl}}
+ {!loading && }
diff --git a/test/visits/VisitsHeader.test.js b/test/visits/VisitsHeader.test.js
new file mode 100644
index 00000000..5416d3cb
--- /dev/null
+++ b/test/visits/VisitsHeader.test.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Moment from 'react-moment';
+import { VisitsHeader } from '../../src/visits/VisitsHeader';
+import ExternalLink from '../../src/utils/ExternalLink';
+
+describe('', () => {
+ let wrapper;
+ const shortUrlDetail = {
+ shortUrl: {
+ longUrl: 'https://foo.bar/bar/foo',
+ dateCreated: '2018-01-01T10:00:00+01:00',
+ },
+ loading: false,
+ };
+ const shortUrlVisits = {
+ visits: [{}, {}, {}],
+ };
+
+ beforeEach(() => {
+ wrapper = shallow(
+
+ );
+ });
+ afterEach(() => wrapper.unmount());
+
+ it('shows the amount of visits', () => {
+ const visitsBadge = wrapper.find('.badge');
+
+ expect(visitsBadge.text()).toEqual(`Visits: ${shortUrlVisits.visits.length}`);
+ });
+
+ it('shows when the URL was created', () => {
+ const moment = wrapper.find(Moment).first();
+
+ expect(moment.prop('children')).toEqual(shortUrlDetail.shortUrl.dateCreated);
+ });
+
+ it('shows the long URL', () => {
+ const longUrlLink = wrapper.find(ExternalLink).last();
+
+ expect(longUrlLink.prop('href')).toEqual(shortUrlDetail.shortUrl.longUrl);
+ });
+});