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 ( 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