Added EventSource connection to mercure hub possible

src/short-urls/ShortUrlsList.js

@@ -4,9 +4,11 @@ import { head, isEmpty, keys, values } from 'ramda';
 import React 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 { shortUrlType } from './reducers/shortUrlsList';
 import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
 import './ShortUrlsList.scss';
@@ -30,6 +32,8 @@ const ShortUrlsList = (ShortUrlsRow) => class ShortUrlsList extends React.Compon
     error: PropTypes.bool,
     shortUrlsList: PropTypes.arrayOf(shortUrlType),
     selectedServer: serverType,
+    createNewVisit: PropTypes.func,
+    mercureInfo: MercureInfoType,
   };
 
   refreshList = (extraParams) => {
@@ -85,12 +89,40 @@ const ShortUrlsList = (ShortUrlsRow) => class ShortUrlsList extends React.Compon
     this.refreshList({ page: params.page, tags });
   }
 
+  componentDidUpdate() {
+    const { mercureHubUrl, token, loading, error } = this.props.mercureInfo;
+
+    if (loading || error) {
+      return;
+    }
+
+    const hubUrl = new URL(mercureHubUrl);
+
+    hubUrl.searchParams.append('topic', 'https://shlink.io/new-visit');
+    this.closeEventSource();
+    this.es = new EventSource(hubUrl, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    this.es.onmessage = ({ data }) => this.props.createNewVisit(JSON.parse(data));
+  }
+
   componentWillUnmount() {
     const { resetShortUrlParams } = this.props;
 
+    this.closeEventSource();
     resetShortUrlParams();
   }
 
+  closeEventSource = () => {
+    if (this.es) {
+      this.es.close();
+      this.es = undefined;
+    }
+  }
+
   renderShortUrls() {
     const { shortUrlsList, selectedServer, loading, error, shortUrlsListParams } = this.props;
 

src/short-urls/reducers/shortUrlsList.js

@@ -1,6 +1,7 @@
 import { handleActions } from 'redux-actions';
 import { assoc, assocPath, isNil, reject } from 'ramda';
 import PropTypes from 'prop-types';
+import { CREATE_SHORT_URL_VISIT } from '../../visits/reducers/shortUrlVisits';
 import { SHORT_URL_TAGS_EDITED } from './shortUrlTags';
 import { SHORT_URL_DELETED } from './shortUrlDeletion';
 import { SHORT_URL_META_EDITED, shortUrlMetaType } from './shortUrlMeta';
@@ -56,6 +57,15 @@ export default handleActions({
   [SHORT_URL_TAGS_EDITED]: setPropFromActionOnMatchingShortUrl('tags'),
   [SHORT_URL_META_EDITED]: setPropFromActionOnMatchingShortUrl('meta'),
   [SHORT_URL_EDITED]: setPropFromActionOnMatchingShortUrl('longUrl'),
+  [CREATE_SHORT_URL_VISIT]: (state, { shortUrl: { shortCode, domain, visitsCount } }) => assocPath(
+    [ 'shortUrls', 'data' ],
+    state.shortUrls.data.map(
+      (shortUrl) => shortUrlMatches(shortUrl, shortCode, domain)
+        ? assoc('visitsCount', visitsCount, shortUrl)
+        : shortUrl
+    ),
+    state
+  ),
 }, initialState);
 
 export const listShortUrls = (buildShlinkApiClient) => (params = {}) => async (dispatch, getState) => {

src/short-urls/services/provideServices.js

@@ -31,8 +31,8 @@ const provideServices = (bottle, connect) => {
 
   bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsRow');
   bottle.decorator('ShortUrlsList', connect(
-    [ 'selectedServer', 'shortUrlsListParams' ],
-    [ 'listShortUrls', 'resetShortUrlParams' ]
+    [ 'selectedServer', 'shortUrlsListParams', 'mercureInfo' ],
+    [ 'listShortUrls', 'resetShortUrlParams', 'createNewVisit' ]
   ));
 
   bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'useStateFlagTimeout');