From 52c56f7918ba2d21c641c571e18d87a3a684ab25 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 6 Jun 2020 09:29:43 +0200
Subject: [PATCH] Created custom react hook that binds to mercure topic

---
 src/mercure/helpers/index.js    | 5 +++++
 src/short-urls/ShortUrlsList.js | 7 ++-----
 src/tags/TagsList.js            | 7 ++-----
 src/visits/ShortUrlVisits.js    | 7 ++-----
 src/visits/TagVisits.js         | 9 +++------
 5 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/mercure/helpers/index.js b/src/mercure/helpers/index.js
index 0cdd367c..ac824cc5 100644
--- a/src/mercure/helpers/index.js
+++ b/src/mercure/helpers/index.js
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { EventSourcePolyfill as EventSource } from 'event-source-polyfill';
 
 export const bindToMercureTopic = (mercureInfo, topic, onMessage, onTokenExpired) => () => {
@@ -21,3 +22,7 @@ export const bindToMercureTopic = (mercureInfo, topic, onMessage, onTokenExpired
 
   return () => es.close();
 };
+
+export const useMercureTopicBinding = (mercureInfo, topic, onMessage, onTokenExpired) => {
+  useEffect(bindToMercureTopic(mercureInfo, topic, onMessage, onTokenExpired), [ mercureInfo ]);
+};
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 9df2250b..a7b275e9 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -8,7 +8,7 @@ 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 { useMercureTopicBinding } from '../mercure/helpers';
 import { shortUrlType } from './reducers/shortUrlsList';
 import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
 import './ShortUrlsList.scss';
@@ -116,10 +116,7 @@ const ShortUrlsList = (ShortUrlsRow) => {
 
       return resetShortUrlParams;
     }, []);
-    useEffect(
-      bindToMercureTopic(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo),
-      [ mercureInfo ]
-    );
+    useMercureTopicBinding(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo);
 
     return (
       <React.Fragment>
diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
index 4fc72741..9e6e9492 100644
--- a/src/tags/TagsList.js
+++ b/src/tags/TagsList.js
@@ -5,7 +5,7 @@ import Message from '../utils/Message';
 import SearchField from '../utils/SearchField';
 import { serverType } from '../servers/prop-types';
 import { MercureInfoType } from '../mercure/reducers/mercureInfo';
-import { bindToMercureTopic } from '../mercure/helpers';
+import { useMercureTopicBinding } from '../mercure/helpers';
 import { TagsListType } from './reducers/tagsList';
 
 const { ceil } = Math;
@@ -30,10 +30,7 @@ const TagsList = (TagCard) => {
     useEffect(() => {
       forceListTags();
     }, []);
-    useEffect(
-      bindToMercureTopic(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo),
-      [ mercureInfo ]
-    );
+    useMercureTopicBinding(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo);
 
     const renderContent = () => {
       if (tagsList.loading) {
diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js
index 131586fd..20e7aeea 100644
--- a/src/visits/ShortUrlVisits.js
+++ b/src/visits/ShortUrlVisits.js
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import qs from 'qs';
 import { MercureInfoType } from '../mercure/reducers/mercureInfo';
-import { bindToMercureTopic } from '../mercure/helpers';
+import { useMercureTopicBinding } from '../mercure/helpers';
 import { shortUrlVisitsType } from './reducers/shortUrlVisits';
 import ShortUrlVisitsHeader from './ShortUrlVisitsHeader';
 import { shortUrlDetailType } from './reducers/shortUrlDetail';
@@ -51,10 +51,7 @@ const ShortUrlVisits = (VisitsStats) => {
     useEffect(() => {
       getShortUrlDetail(shortCode, domain);
     }, []);
-    useEffect(
-      bindToMercureTopic(mercureInfo, `https://shlink.io/new-visit/${shortCode}`, createNewVisit, loadMercureInfo),
-      [ mercureInfo ],
-    );
+    useMercureTopicBinding(mercureInfo, `https://shlink.io/new-visit/${shortCode}`, createNewVisit, loadMercureInfo);
 
     return (
       <VisitsStats getVisits={loadVisits} cancelGetVisits={cancelGetShortUrlVisits} visitsInfo={shortUrlVisits}>
diff --git a/src/visits/TagVisits.js b/src/visits/TagVisits.js
index c570edf0..299e6e0c 100644
--- a/src/visits/TagVisits.js
+++ b/src/visits/TagVisits.js
@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { MercureInfoType } from '../mercure/reducers/mercureInfo';
-import { bindToMercureTopic } from '../mercure/helpers';
+import { useMercureTopicBinding } from '../mercure/helpers';
 import { TagVisitsType } from './reducers/tagVisits';
 import TagVisitsHeader from './TagVisitsHeader';
 
@@ -35,10 +35,7 @@ const TagVisits = (VisitsStats, colorGenerator) => {
     const { tag } = params;
     const loadVisits = (dates) => getTagVisits(tag, dates);
 
-    useEffect(
-      bindToMercureTopic(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo),
-      [ mercureInfo ],
-    );
+    useMercureTopicBinding(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo);
 
     return (
       <VisitsStats getVisits={loadVisits} cancelGetVisits={cancelGetTagVisits} visitsInfo={tagVisits}>