Added automatic refresh on mercure events

src/mercure/helpers/index.js

@@ -0,0 +1,25 @@
+import { EventSourcePolyfill as EventSource } from 'event-source-polyfill';
+
+export const bindToMercureTopic = (mercureInfo, topic, onMessage) => () => {
+  const { mercureHubUrl, token, loading, error } = mercureInfo;
+
+  if (loading || error) {
+    return undefined;
+  }
+
+  const hubUrl = new URL(mercureHubUrl);
+
+  hubUrl.searchParams.append('topic', topic);
+  const es = new EventSource(hubUrl, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  es.onmessage = ({ data }) => onMessage(JSON.parse(data));
+
+  // TODO Handle errors and get a new token
+  es.onerror = () => {};
+
+  return () => es.close();
+};

src/short-urls/ShortUrlsList.js

@@ -4,11 +4,11 @@ import { head, isEmpty, keys, values } from 'ramda';
 import React, { useState, useEffect } from 'react';
 import qs from 'qs';
 import PropTypes from 'prop-types';
-import { EventSourcePolyfill as EventSource } from 'event-source-polyfill';
 import { serverType } from '../servers/prop-types';
 import SortingDropdown from '../utils/SortingDropdown';
 import { determineOrderDir } from '../utils/utils';
 import { MercureInfoType } from '../mercure/reducers/mercureInfo';
+import { bindToMercureTopic } from '../mercure/helpers';
 import { shortUrlType } from './reducers/shortUrlsList';
 import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
 import './ShortUrlsList.scss';
@@ -114,27 +114,7 @@ const ShortUrlsList = (ShortUrlsRow) => {
 
       return resetShortUrlParams;
     }, []);
-    useEffect(() => {
-      const { mercureHubUrl, token, loading, error } = mercureInfo;
-
-      if (loading || error) {
-        return undefined;
-      }
-
-      const hubUrl = new URL(mercureHubUrl);
-
-      hubUrl.searchParams.append('topic', 'https://shlink.io/new-visit');
-      const es = new EventSource(hubUrl, {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
-
-      // es.onmessage = pipe(JSON.parse, createNewVisit);
-      es.onmessage = ({ data }) => createNewVisit(JSON.parse(data));
-
-      return () => es.close();
-    }, [ mercureInfo ]);
+    useEffect(bindToMercureTopic(mercureInfo, 'https://shlink.io/new-visit', createNewVisit), [ mercureInfo ]);
 
     return (
       <React.Fragment>

src/short-urls/helpers/ShortUrlVisitsCount.js

@@ -3,22 +3,28 @@ 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 classNames from 'classnames';
 import { serverType } from '../../servers/prop-types';
 import { shortUrlType } from '../reducers/shortUrlsList';
-import './ShortUrlVisitsCount.scss';
 import VisitStatsLink from './VisitStatsLink';
+import './ShortUrlVisitsCount.scss';
 
 const propTypes = {
   visitsCount: PropTypes.number.isRequired,
   shortUrl: shortUrlType,
   selectedServer: serverType,
+  active: PropTypes.bool,
 };
 
-const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer }) => {
+const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = false }) => {
   const maxVisits = shortUrl && shortUrl.meta && shortUrl.meta.maxVisits;
   const visitsLink = (
     <VisitStatsLink selectedServer={selectedServer} shortUrl={shortUrl}>
-      <strong>{visitsCount}</strong>
+      <strong
+        className={classNames('short-url-visits-count__amount', { 'short-url-visits-count__amount--big': active })}
+      >
+        {visitsCount}
+      </strong>
     </VisitStatsLink>
   );
 

src/short-urls/helpers/ShortUrlVisitsCount.scss

@@ -1,3 +1,12 @@
 .short-urls-visits-count__max-visits-control {
   cursor: help;
 }
+
+.short-url-visits-count__amount {
+  transition: transform .3s ease;
+  display: inline-block;
+}
+
+.short-url-visits-count__amount--big {
+  transform: scale(1.5);
+}

src/short-urls/helpers/ShortUrlsRow.js

@@ -1,5 +1,5 @@
 import { isEmpty } from 'ramda';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import Moment from 'react-moment';
 import PropTypes from 'prop-types';
 import { ExternalLink } from 'react-external-link';
@@ -26,7 +26,10 @@ const ShortUrlsRow = (
   useStateFlagTimeout
 ) => {
   const ShortUrlsRowComp = ({ shortUrl, selectedServer, refreshList, shortUrlsListParams }) => {
-    const [ copiedToClipboard, setCopiedToClipboard ] = useStateFlagTimeout(false);
+    const [ copiedToClipboard, setCopiedToClipboard ] = useStateFlagTimeout();
+    const [ active, setActive ] = useStateFlagTimeout(false, 500);
+    const isFirstRun = useRef(true);
+
     const renderTags = (tags) => {
       if (isEmpty(tags)) {
         return <i className="indivisible"><small>No tags</small></i>;
@@ -44,6 +47,14 @@ const ShortUrlsRow = (
       ));
     };
 
+    useEffect(() => {
+      if (isFirstRun.current) {
+        isFirstRun.current = false;
+      } else {
+        setActive(true);
+      }
+    }, [ shortUrl.visitsCount ]);
+
     return (
       <tr className="short-urls-row">
         <td className="indivisible short-urls-row__cell" data-th="Created at: ">
@@ -69,6 +80,7 @@ const ShortUrlsRow = (
             visitsCount={shortUrl.visitsCount}
             shortUrl={shortUrl}
             selectedServer={selectedServer}
+            active={active}
           />
         </td>
         <td className="short-urls-row__cell">

src/short-urls/helpers/ShortUrlsRow.scss

@@ -35,6 +35,7 @@
     }
   }
 }
+
 .short-urls-row__cell--break {
   word-break: break-all;
 }
@@ -43,6 +44,10 @@
   position: relative;
 }
 
+.short-urls-row__cell--big {
+  transform: scale(1.5);
+}
+
 .short-urls-row__copy-btn {
   cursor: pointer;
   font-size: 1.2rem;

src/short-urls/helpers/index.js

@@ -0,0 +1,9 @@
+import { isNil } from 'ramda';
+
+export const shortUrlMatches = (shortUrl, shortCode, domain) => {
+  if (isNil(domain)) {
+    return shortUrl.shortCode === shortCode && !shortUrl.domain;
+  }
+
+  return shortUrl.shortCode === shortCode && shortUrl.domain === domain;
+};

src/short-urls/reducers/shortUrlsList.js

@@ -1,7 +1,8 @@
 import { handleActions } from 'redux-actions';
-import { assoc, assocPath, isNil, reject } from 'ramda';
+import { assoc, assocPath, reject } from 'ramda';
 import PropTypes from 'prop-types';
 import { CREATE_SHORT_URL_VISIT } from '../../visits/reducers/shortUrlVisits';
+import { shortUrlMatches } from '../helpers';
 import { SHORT_URL_TAGS_EDITED } from './shortUrlTags';
 import { SHORT_URL_DELETED } from './shortUrlDeletion';
 import { SHORT_URL_META_EDITED, shortUrlMetaType } from './shortUrlMeta';
@@ -29,14 +30,6 @@ const initialState = {
   error: false,
 };
 
-const shortUrlMatches = (shortUrl, shortCode, domain) => {
-  if (isNil(domain)) {
-    return shortUrl.shortCode === shortCode && !shortUrl.domain;
-  }
-
-  return shortUrl.shortCode === shortCode && shortUrl.domain === domain;
-};
-
 const setPropFromActionOnMatchingShortUrl = (prop) => (state, { shortCode, domain, [prop]: propValue }) => assocPath(
   [ 'shortUrls', 'data' ],
   state.shortUrls.data.map(
@@ -59,7 +52,7 @@ export default handleActions({
   [SHORT_URL_EDITED]: setPropFromActionOnMatchingShortUrl('longUrl'),
   [CREATE_SHORT_URL_VISIT]: (state, { shortUrl: { shortCode, domain, visitsCount } }) => assocPath(
     [ 'shortUrls', 'data' ],
-    state.shortUrls.data.map(
+    state.shortUrls && state.shortUrls.data && state.shortUrls.data.map(
       (shortUrl) => shortUrlMatches(shortUrl, shortCode, domain)
         ? assoc('visitsCount', visitsCount, shortUrl)
         : shortUrl

src/utils/helpers/hooks.js

@@ -1,12 +1,18 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 
-const DEFAULT_TIMEOUT_DELAY = 2000;
+const DEFAULT_DELAY = 2000;
 
-export const useStateFlagTimeout = (setTimeout) => (initialValue = true, delay = DEFAULT_TIMEOUT_DELAY) => {
+export const useStateFlagTimeout = (setTimeout, clearTimeout) => (initialValue = false, delay = DEFAULT_DELAY) => {
   const [ flag, setFlag ] = useState(initialValue);
+  const timeout = useRef(undefined);
   const callback = () => {
     setFlag(!initialValue);
-    setTimeout(() => setFlag(initialValue), delay);
+
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+
+    timeout.current = setTimeout(() => setFlag(initialValue), delay);
   };
 
   return [ flag, callback ];

src/utils/services/provideServices.js

@@ -14,8 +14,9 @@ const provideServices = (bottle) => {
   bottle.serviceFactory('buildShlinkApiClient', buildShlinkApiClient, 'axios');
 
   bottle.constant('setTimeout', global.setTimeout);
+  bottle.constant('clearTimeout', global.clearTimeout);
   bottle.serviceFactory('stateFlagTimeout', stateFlagTimeout, 'setTimeout');
-  bottle.serviceFactory('useStateFlagTimeout', useStateFlagTimeout, 'setTimeout');
+  bottle.serviceFactory('useStateFlagTimeout', useStateFlagTimeout, 'setTimeout', 'clearTimeout');
 };
 
 export default provideServices;

src/visits/ShortUrlVisits.js

@@ -10,6 +10,8 @@ import DateRangeRow from '../utils/DateRangeRow';
 import Message from '../utils/Message';
 import { formatDate } from '../utils/helpers/date';
 import { useToggle } from '../utils/helpers/hooks';
+import { MercureInfoType } from '../mercure/reducers/mercureInfo';
+import { bindToMercureTopic } from '../mercure/helpers';
 import SortableBarGraph from './SortableBarGraph';
 import { shortUrlVisitsType } from './reducers/shortUrlVisits';
 import VisitsHeader from './VisitsHeader';
@@ -30,6 +32,8 @@ const propTypes = {
   shortUrlDetail: shortUrlDetailType,
   cancelGetShortUrlVisits: PropTypes.func,
   matchMedia: PropTypes.func,
+  createNewVisit: PropTypes.func,
+  mercureInfo: MercureInfoType,
 };
 
 const highlightedVisitsToStats = (highlightedVisits, prop) => highlightedVisits.reduce((acc, highlightedVisit) => {
@@ -54,6 +58,8 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
     getShortUrlDetail,
     cancelGetShortUrlVisits,
     matchMedia = window.matchMedia,
+    createNewVisit,
+    mercureInfo,
   }) => {
     const [ startDate, setStartDate ] = useState(undefined);
     const [ endDate, setEndDate ] = useState(undefined);
@@ -108,6 +114,10 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
     useEffect(() => {
       loadVisits();
     }, [ startDate, endDate ]);
+    useEffect(
+      bindToMercureTopic(mercureInfo, `https://shlink.io/new-visit/${shortCode}`, createNewVisit),
+      [ mercureInfo ],
+    );
 
     const renderVisitsContent = () => {
       if (loading) {

src/visits/reducers/shortUrlVisits.js

@@ -1,6 +1,7 @@
 import { createAction, handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
 import { flatten, prop, range, splitEvery } from 'ramda';
+import { shortUrlMatches } from '../../short-urls/helpers';
 
 /* eslint-disable padding-line-between-statements */
 export const GET_SHORT_URL_VISITS_START = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_START';
@@ -29,12 +30,16 @@ export const visitType = PropTypes.shape({
 
 export const shortUrlVisitsType = PropTypes.shape({
   visits: PropTypes.arrayOf(visitType),
+  shortCode: PropTypes.string,
+  domain: PropTypes.string,
   loading: PropTypes.bool,
   error: PropTypes.bool,
 });
 
 const initialState = {
   visits: [],
+  shortCode: '',
+  domain: undefined,
   loading: false,
   loadingLarge: false,
   error: false,
@@ -55,8 +60,10 @@ export default handleActions({
     error: true,
     cancelLoad: false,
   }),
-  [GET_SHORT_URL_VISITS]: (state, { visits }) => ({
+  [GET_SHORT_URL_VISITS]: (state, { visits, shortCode, domain }) => ({
     visits,
+    shortCode,
+    domain,
     loading: false,
     loadingLarge: false,
     error: false,
@@ -64,12 +71,18 @@ export default handleActions({
   }),
   [GET_SHORT_URL_VISITS_LARGE]: (state) => ({ ...state, loadingLarge: true }),
   [GET_SHORT_URL_VISITS_CANCEL]: (state) => ({ ...state, cancelLoad: true }),
+  [CREATE_SHORT_URL_VISIT]: (state, { shortUrl, visit }) => { // eslint-disable-line object-shorthand
+    const { shortCode, domain, visits } = state;
 
-  // TODO
-  [CREATE_SHORT_URL_VISIT]: (state) => state,
+    if (!shortUrlMatches(shortUrl, shortCode, domain)) {
+      return state;
+    }
+
+    return { ...state, visits: [ ...visits, visit ] };
+  },
 }, initialState);
 
-export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, query) => async (dispatch, getState) => {
+export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, query = {}) => async (dispatch, getState) => {
   dispatch({ type: GET_SHORT_URL_VISITS_START });
   const { getShortUrlVisits } = buildShlinkApiClient(getState);
   const itemsPerPage = 5000;
@@ -122,7 +135,7 @@ export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, query) =>
   try {
     const visits = await loadVisits();
 
-    dispatch({ visits, type: GET_SHORT_URL_VISITS });
+    dispatch({ visits, shortCode, domain: query.domain, type: GET_SHORT_URL_VISITS });
   } catch (e) {
     dispatch({ type: GET_SHORT_URL_VISITS_ERROR });
   }

src/visits/services/provideServices.js

@@ -11,8 +11,8 @@ const provideServices = (bottle, connect) => {
   bottle.serviceFactory('MapModal', () => MapModal);
   bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsParser', 'OpenMapModalBtn');
   bottle.decorator('ShortUrlVisits', connect(
-    [ 'shortUrlVisits', 'shortUrlDetail' ],
-    [ 'getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits' ]
+    [ 'shortUrlVisits', 'shortUrlDetail', 'mercureInfo' ],
+    [ 'getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits', 'createNewVisit' ]
   ));
 
   // Services

test/short-urls/helpers/ShortUrlVisitsCount.test.js

@@ -20,7 +20,9 @@ describe('<ShortUrlVisitsCount />', () => {
     const maxVisitsHelper = wrapper.find('.short-urls-visits-count__max-visits-control');
     const maxVisitsTooltip = wrapper.find(UncontrolledTooltip);
 
-    expect(wrapper.html()).toEqual(`<span><strong>${visitsCount}</strong></span>`);
+    expect(wrapper.html()).toEqual(
+      `<span><strong class="short-url-visits-count__amount">${visitsCount}</strong></span>`
+    );
     expect(maxVisitsHelper).toHaveLength(0);
     expect(maxVisitsTooltip).toHaveLength(0);
   });

test/visits/VisitsHeader.test.js

@@ -26,7 +26,9 @@ describe('<VisitsHeader />', () => {
   it('shows the amount of visits', () => {
     const visitsBadge = wrapper.find('.badge');
 
-    expect(visitsBadge.html()).toContain(`Visits: <span><strong>${shortUrlVisits.visits.length}</strong></span>`);
+    expect(visitsBadge.html()).toContain(
+      `Visits: <span><strong class="short-url-visits-count__amount">${shortUrlVisits.visits.length}</strong></span>`
+    );
   });
 
   it('shows when the URL was created', () => {

test/visits/reducers/shortUrlVisits.test.js

@@ -72,8 +72,13 @@ describe('shortUrlVisitsReducer', () => {
       expect(ShlinkApiClient.getShortUrlVisits).toHaveBeenCalledTimes(1);
     });
 
-    it('dispatches start and success when promise is resolved', async () => {
+    it.each([
+      [ undefined, undefined ],
+      [{}, undefined ],
+      [{ domain: 'foobar.com' }, 'foobar.com' ],
+    ])('dispatches start and success when promise is resolved', async (query, domain) => {
       const visits = [{}, {}];
+      const shortCode = 'abc123';
       const ShlinkApiClient = buildApiClientMock(Promise.resolve({
         data: visits,
         pagination: {
@@ -82,11 +87,11 @@ describe('shortUrlVisitsReducer', () => {
         },
       }));
 
-      await getShortUrlVisits(() => ShlinkApiClient)('abc123')(dispatchMock, getState);
+      await getShortUrlVisits(() => ShlinkApiClient)(shortCode, query)(dispatchMock, getState);
 
       expect(dispatchMock).toHaveBeenCalledTimes(2);
       expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_SHORT_URL_VISITS_START });
-      expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_SHORT_URL_VISITS, visits });
+      expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_SHORT_URL_VISITS, visits, shortCode, domain });
       expect(ShlinkApiClient.getShortUrlVisits).toHaveBeenCalledTimes(1);
     });