Added token expired handling to mercure binding

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();
 };

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>

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');

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 ],
     );
 

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