From a485d0b507529b0fe485a3fab0361cf80d249765 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 18 Apr 2020 12:25:47 +0200
Subject: [PATCH] Added token expired handling to mercure binding

---
 src/mercure/helpers/index.js               | 6 ++----
 src/short-urls/ShortUrlsList.js            | 7 ++++++-
 src/short-urls/services/provideServices.js | 2 +-
 src/visits/ShortUrlVisits.js               | 4 +++-
 src/visits/services/provideServices.js     | 2 +-
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/mercure/helpers/index.js b/src/mercure/helpers/index.js
index 15e20a72..0cdd367c 100644
--- a/src/mercure/helpers/index.js
+++ b/src/mercure/helpers/index.js
@@ -1,6 +1,6 @@
 import { EventSourcePolyfill as EventSource } from 'event-source-polyfill';
 
-export const bindToMercureTopic = (mercureInfo, topic, onMessage) => () => {
+export const bindToMercureTopic = (mercureInfo, topic, onMessage, onTokenExpired) => () => {
   const { mercureHubUrl, token, loading, error } = mercureInfo;
 
   if (loading || error) {
@@ -17,9 +17,7 @@ export const bindToMercureTopic = (mercureInfo, topic, onMessage) => () => {
   });
 
   es.onmessage = ({ data }) => onMessage(JSON.parse(data));
-
-  // TODO Handle errors and get a new token
-  es.onerror = () => {};
+  es.onerror = ({ status }) => status === 401 && onTokenExpired();
 
   return () => es.close();
 };
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 956dcdf2..9df2250b 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -31,6 +31,7 @@ const propTypes = {
   shortUrlsList: PropTypes.arrayOf(shortUrlType),
   selectedServer: serverType,
   createNewVisit: PropTypes.func,
+  loadMercureInfo: PropTypes.func,
   mercureInfo: MercureInfoType,
 };
 
@@ -47,6 +48,7 @@ const ShortUrlsList = (ShortUrlsRow) => {
     shortUrlsList,
     selectedServer,
     createNewVisit,
+    loadMercureInfo,
     mercureInfo,
   }) => {
     const { orderBy } = shortUrlsListParams;
@@ -114,7 +116,10 @@ const ShortUrlsList = (ShortUrlsRow) => {
 
       return resetShortUrlParams;
     }, []);
-    useEffect(bindToMercureTopic(mercureInfo, 'https://shlink.io/new-visit', createNewVisit), [ mercureInfo ]);
+    useEffect(
+      bindToMercureTopic(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo),
+      [ mercureInfo ]
+    );
 
     return (
       <React.Fragment>
diff --git a/src/short-urls/services/provideServices.js b/src/short-urls/services/provideServices.js
index 49cb9143..385b0a1c 100644
--- a/src/short-urls/services/provideServices.js
+++ b/src/short-urls/services/provideServices.js
@@ -32,7 +32,7 @@ const provideServices = (bottle, connect) => {
   bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsRow');
   bottle.decorator('ShortUrlsList', connect(
     [ 'selectedServer', 'shortUrlsListParams', 'mercureInfo' ],
-    [ 'listShortUrls', 'resetShortUrlParams', 'createNewVisit' ]
+    [ 'listShortUrls', 'resetShortUrlParams', 'createNewVisit', 'loadMercureInfo' ]
   ));
 
   bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'useStateFlagTimeout');
diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js
index e8e27693..d253b486 100644
--- a/src/visits/ShortUrlVisits.js
+++ b/src/visits/ShortUrlVisits.js
@@ -33,6 +33,7 @@ const propTypes = {
   cancelGetShortUrlVisits: PropTypes.func,
   matchMedia: PropTypes.func,
   createNewVisit: PropTypes.func,
+  loadMercureInfo: PropTypes.func,
   mercureInfo: MercureInfoType,
 };
 
@@ -59,6 +60,7 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
     cancelGetShortUrlVisits,
     matchMedia = window.matchMedia,
     createNewVisit,
+    loadMercureInfo,
     mercureInfo,
   }) => {
     const [ startDate, setStartDate ] = useState(undefined);
@@ -115,7 +117,7 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
       loadVisits();
     }, [ startDate, endDate ]);
     useEffect(
-      bindToMercureTopic(mercureInfo, `https://shlink.io/new-visit/${shortCode}`, createNewVisit),
+      bindToMercureTopic(mercureInfo, `https://shlink.io/new-visit/${shortCode}`, createNewVisit, loadMercureInfo),
       [ mercureInfo ],
     );
 
diff --git a/src/visits/services/provideServices.js b/src/visits/services/provideServices.js
index e18c981b..f2363f67 100644
--- a/src/visits/services/provideServices.js
+++ b/src/visits/services/provideServices.js
@@ -12,7 +12,7 @@ const provideServices = (bottle, connect) => {
   bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsParser', 'OpenMapModalBtn');
   bottle.decorator('ShortUrlVisits', connect(
     [ 'shortUrlVisits', 'shortUrlDetail', 'mercureInfo' ],
-    [ 'getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits', 'createNewVisit' ]
+    [ 'getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits', 'createNewVisit', 'loadMercureInfo' ]
   ));
 
   // Services