Ensured domain is passed when loading visits for a short URL on a specific domain

src/short-urls/helpers/ShortUrlVisitsCount.js

@@ -3,25 +3,33 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { UncontrolledTooltip } from 'reactstrap';
-import { shortUrlMetaType } from '../reducers/shortUrlMeta';
+import { serverType } from '../../servers/prop-types';
+import { shortUrlType } from '../reducers/shortUrlsList';
 import './ShortUrlVisitsCount.scss';
+import VisitStatsLink from './VisitStatsLink';
 
 const propTypes = {
   visitsCount: PropTypes.number.isRequired,
-  meta: shortUrlMetaType,
+  shortUrl: shortUrlType,
+  selectedServer: serverType,
 };
 
-const ShortUrlVisitsCount = ({ visitsCount, meta }) => {
-  const maxVisits = meta && meta.maxVisits;
+const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer }) => {
+  const maxVisits = shortUrl && shortUrl.meta && shortUrl.meta.maxVisits;
+  const visitsLink = (
+    <VisitStatsLink selectedServer={selectedServer} shortUrl={shortUrl}>
+      <strong>{visitsCount}</strong>
+    </VisitStatsLink>
+  );
 
   if (!maxVisits) {
-    return <span>{visitsCount}</span>;
+    return visitsLink;
   }
 
   return (
     <React.Fragment>
       <span className="indivisible">
-        {visitsCount}
+        {visitsLink}
         <small id="maxVisitsControl" className="short-urls-visits-count__max-visits-control">
           {' '}/ {maxVisits}{' '}
           <sup>

src/short-urls/helpers/ShortUrlsRow.js

@@ -58,7 +58,11 @@ const ShortUrlsRow = (
         </td>
         <td className="short-urls-row__cell" data-th="Tags: ">{this.renderTags(shortUrl.tags)}</td>
         <td className="short-urls-row__cell text-md-right" data-th="Visits: ">
-          <ShortUrlVisitsCount visitsCount={shortUrl.visitsCount} meta={shortUrl.meta} />
+          <ShortUrlVisitsCount
+            visitsCount={shortUrl.visitsCount}
+            shortUrl={shortUrl}
+            selectedServer={selectedServer}
+          />
         </td>
         <td className="short-urls-row__cell short-urls-row__cell--relative">
           <small

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -10,13 +10,13 @@ import {
 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 PropTypes from 'prop-types';
 import { serverType } from '../../servers/prop-types';
 import { shortUrlType } from '../reducers/shortUrlsList';
 import PreviewModal from './PreviewModal';
 import QrCodeModal from './QrCodeModal';
+import VisitStatsLink from './VisitStatsLink';
 import './ShortUrlsRowMenu.scss';
 
 const ShortUrlsRowMenu = (
@@ -57,7 +57,7 @@ const ShortUrlsRowMenu = (
           &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
         </DropdownToggle>
         <DropdownMenu right>
-          <DropdownItem tag={Link} to={`/server/${selectedServer ? selectedServer.id : ''}/short-code/${shortUrl.shortCode}/visits`}>
+          <DropdownItem tag={VisitStatsLink} selectedServer={selectedServer} shortUrl={shortUrl}>
             <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
           </DropdownItem>
 

src/short-urls/helpers/VisitStatsLink.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { serverType } from '../../servers/prop-types';
+import { shortUrlType } from '../reducers/shortUrlsList';
+
+const propTypes = {
+  shortUrl: shortUrlType,
+  selectedServer: serverType,
+  children: PropTypes.node.isRequired,
+};
+
+const buildVisitsUrl = ({ id }, { shortCode, domain }) => {
+  const query = domain ? `?domain=${domain}` : '';
+
+  return `/server/${id}/short-code/${shortCode}/visits${query}`;
+};
+
+const VisitStatsLink = ({ selectedServer, shortUrl, children, ...rest }) => {
+  if (!selectedServer || !shortUrl) {
+    return <span {...rest}>{children}</span>;
+  }
+
+  return <Link to={buildVisitsUrl(selectedServer, shortUrl)} {...rest}>{children}</Link>;
+};
+
+VisitStatsLink.propTypes = propTypes;
+
+export default VisitStatsLink;

src/short-urls/reducers/shortUrlsList.js

@@ -18,6 +18,7 @@ export const shortUrlType = PropTypes.shape({
   visitsCount: PropTypes.number,
   meta: shortUrlMetaType,
   tags: PropTypes.arrayOf(PropTypes.string),
+  domain: PropTypes.string,
 });
 
 const initialState = {

src/utils/services/ShlinkApiClient.js

@@ -12,6 +12,7 @@ export const apiErrorType = PropTypes.shape({
 });
 
 const buildShlinkBaseUrl = (url, apiVersion) => url ? `${url}/rest/v${apiVersion}` : '';
+const rejectNilProps = (options = {}) => reject(isNil, options);
 
 export default class ShlinkApiClient {
   constructor(axios, baseUrl, apiKey) {
@@ -22,7 +23,7 @@ export default class ShlinkApiClient {
   }
 
   listShortUrls = pipe(
-    (options = {}) => reject(isNil, options),
+    rejectNilProps,
     (options) => this._performRequest('/short-urls', 'GET', options).then((resp) => resp.data.shortUrls)
   );
 
@@ -37,20 +38,20 @@ export default class ShlinkApiClient {
     this._performRequest(`/short-urls/${shortCode}/visits`, 'GET', query)
       .then((resp) => resp.data.visits);
 
-  getShortUrl = (shortCode) =>
-    this._performRequest(`/short-urls/${shortCode}`, 'GET')
+  getShortUrl = (shortCode, domain) =>
+    this._performRequest(`/short-urls/${shortCode}`, 'GET', { domain })
       .then((resp) => resp.data);
 
-  deleteShortUrl = (shortCode) =>
-    this._performRequest(`/short-urls/${shortCode}`, 'DELETE')
+  deleteShortUrl = (shortCode, domain) =>
+    this._performRequest(`/short-urls/${shortCode}`, 'DELETE', { domain })
       .then(() => ({}));
 
-  updateShortUrlTags = (shortCode, tags) =>
-    this._performRequest(`/short-urls/${shortCode}/tags`, 'PUT', {}, { tags })
+  updateShortUrlTags = (shortCode, domain, tags) =>
+    this._performRequest(`/short-urls/${shortCode}/tags`, 'PUT', { domain }, { tags })
       .then((resp) => resp.data.tags);
 
-  updateShortUrlMeta = (shortCode, meta) =>
-    this._performRequest(`/short-urls/${shortCode}`, 'PATCH', {}, meta)
+  updateShortUrlMeta = (shortCode, domain, meta) =>
+    this._performRequest(`/short-urls/${shortCode}`, 'PATCH', { domain }, meta)
       .then(() => meta);
 
   listTags = () =>
@@ -73,7 +74,7 @@ export default class ShlinkApiClient {
         method,
         url: `${buildShlinkBaseUrl(this._baseUrl, this._apiVersion)}${url}`,
         headers: { 'X-Api-Key': this._apiKey },
-        params: query,
+        params: rejectNilProps(query),
         data: body,
         paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'brackets' }),
       });

src/visits/ShortUrlVisits.js

@@ -4,6 +4,7 @@ import { isEmpty, mapObjIndexed, values } from 'ramda';
 import React from 'react';
 import { Card } from 'reactstrap';
 import PropTypes from 'prop-types';
+import qs from 'qs';
 import DateRangeRow from '../utils/DateRangeRow';
 import MutedMessage from '../utils/MuttedMessage';
 import { formatDate } from '../utils/utils';
@@ -21,6 +22,9 @@ const ShortUrlVisits = (
     match: PropTypes.shape({
       params: PropTypes.object,
     }),
+    location: PropTypes.shape({
+      search: PropTypes.string,
+    }),
     getShortUrlVisits: PropTypes.func,
     shortUrlVisits: shortUrlVisitsType,
     getShortUrlDetail: PropTypes.func,
@@ -30,14 +34,16 @@ const ShortUrlVisits = (
 
   state = { startDate: undefined, endDate: undefined };
   loadVisits = () => {
-    const { match: { params }, getShortUrlVisits } = this.props;
+    const { match: { params }, location: { search }, getShortUrlVisits } = this.props;
     const { shortCode } = params;
     const dates = mapObjIndexed(formatDate(), this.state);
     const { startDate, endDate } = dates;
+    const queryParams = qs.parse(search, { ignoreQueryPrefix: true });
+    const { domain } = queryParams;
 
-    // While the "page" is loaded, use the timestamp + filtering dates as memoization IDs for stats calcs
+    // While the "page" is loaded, use the timestamp + filtering dates as memoization IDs for stats calculations
     this.memoizationId = `${this.timeWhenMounted}_${shortCode}_${startDate}_${endDate}`;
-    getShortUrlVisits(shortCode, dates);
+    getShortUrlVisits(shortCode, { startDate, endDate, domain });
   };
 
   componentDidMount() {

src/visits/VisitsHeader.js

@@ -33,7 +33,7 @@ export default function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
         <h2>
           <span className="badge badge-main float-right">
             Visits:{' '}
-            <ShortUrlVisitsCount visitsCount={visits.length} meta={shortUrl.meta} />
+            <ShortUrlVisitsCount visitsCount={visits.length} shortUrl={shortUrl} />
           </span>
           Visit stats for <ExternalLink href={shortLink} />
         </h2>

src/visits/reducers/shortUrlVisits.js

@@ -49,7 +49,7 @@ export default handleActions({
   [GET_SHORT_URL_VISITS_CANCEL]: (state) => ({ ...state, cancelLoad: true }),
 }, initialState);
 
-export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, dates) => async (dispatch, getState) => {
+export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, query) => async (dispatch, getState) => {
   dispatch({ type: GET_SHORT_URL_VISITS_START });
 
   const { getShortUrlVisits } = await buildShlinkApiClient(getState);
@@ -57,7 +57,7 @@ export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, dates) =>
   const isLastPage = ({ currentPage, pagesCount }) => currentPage >= pagesCount;
 
   const loadVisits = async (page = 1) => {
-    const { pagination, data } = await getShortUrlVisits(shortCode, { ...dates, page, itemsPerPage });
+    const { pagination, data } = await getShortUrlVisits(shortCode, { ...query, page, itemsPerPage });
 
     // If pagination was not returned, then this is an older shlink version. Just return data
     if (!pagination || isLastPage(pagination)) {
@@ -96,7 +96,7 @@ export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, dates) =>
   const loadVisitsInParallel = (pages) =>
     Promise.all(pages.map(
       (page) =>
-        getShortUrlVisits(shortCode, { ...dates, page, itemsPerPage })
+        getShortUrlVisits(shortCode, { ...query, page, itemsPerPage })
           .then(prop('data'))
     )).then(flatten);