diff --git a/src/mercure/helpers/index.js b/src/mercure/helpers/index.js index 0cdd367c..fd69ce08 100644 --- a/src/mercure/helpers/index.js +++ b/src/mercure/helpers/index.js @@ -1,9 +1,10 @@ import { EventSourcePolyfill as EventSource } from 'event-source-polyfill'; -export const bindToMercureTopic = (mercureInfo, topic, onMessage, onTokenExpired) => () => { +export const bindToMercureTopic = (mercureInfo, realTimeUpdates, topic, onMessage, onTokenExpired) => () => { + const { enabled } = realTimeUpdates; const { mercureHubUrl, token, loading, error } = mercureInfo; - if (loading || error) { + if (!enabled || loading || error) { return undefined; } diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js index 9df2250b..3b36d459 100644 --- a/src/short-urls/ShortUrlsList.js +++ b/src/short-urls/ShortUrlsList.js @@ -9,6 +9,7 @@ import SortingDropdown from '../utils/SortingDropdown'; import { determineOrderDir } from '../utils/utils'; import { MercureInfoType } from '../mercure/reducers/mercureInfo'; import { bindToMercureTopic } from '../mercure/helpers'; +import { RealTimeUpdatesType } from '../settings/reducers/realTimeUpdates'; import { shortUrlType } from './reducers/shortUrlsList'; import { shortUrlsListParamsType } from './reducers/shortUrlsListParams'; import './ShortUrlsList.scss'; @@ -33,6 +34,7 @@ const propTypes = { createNewVisit: PropTypes.func, loadMercureInfo: PropTypes.func, mercureInfo: MercureInfoType, + realTimeUpdates: RealTimeUpdatesType, }; // FIXME Replace with typescript: (ShortUrlsRow component) @@ -50,6 +52,7 @@ const ShortUrlsList = (ShortUrlsRow) => { createNewVisit, loadMercureInfo, mercureInfo, + realTimeUpdates, }) => { const { orderBy } = shortUrlsListParams; const [ order, setOrder ] = useState({ @@ -117,7 +120,7 @@ const ShortUrlsList = (ShortUrlsRow) => { return resetShortUrlParams; }, []); useEffect( - bindToMercureTopic(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo), + bindToMercureTopic(mercureInfo, realTimeUpdates, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo), [ mercureInfo ] ); diff --git a/src/short-urls/services/provideServices.js b/src/short-urls/services/provideServices.js index 385b0a1c..6a35ac3d 100644 --- a/src/short-urls/services/provideServices.js +++ b/src/short-urls/services/provideServices.js @@ -31,7 +31,7 @@ const provideServices = (bottle, connect) => { bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsRow'); bottle.decorator('ShortUrlsList', connect( - [ 'selectedServer', 'shortUrlsListParams', 'mercureInfo' ], + [ 'selectedServer', 'shortUrlsListParams', 'mercureInfo', 'realTimeUpdates' ], [ 'listShortUrls', 'resetShortUrlParams', 'createNewVisit', 'loadMercureInfo' ] )); diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js index d253b486..410d390b 100644 --- a/src/visits/ShortUrlVisits.js +++ b/src/visits/ShortUrlVisits.js @@ -12,6 +12,7 @@ import { formatDate } from '../utils/helpers/date'; import { useToggle } from '../utils/helpers/hooks'; import { MercureInfoType } from '../mercure/reducers/mercureInfo'; import { bindToMercureTopic } from '../mercure/helpers'; +import { RealTimeUpdatesType } from '../settings/reducers/realTimeUpdates'; import SortableBarGraph from './SortableBarGraph'; import { shortUrlVisitsType } from './reducers/shortUrlVisits'; import VisitsHeader from './VisitsHeader'; @@ -35,6 +36,7 @@ const propTypes = { createNewVisit: PropTypes.func, loadMercureInfo: PropTypes.func, mercureInfo: MercureInfoType, + realTimeUpdates: RealTimeUpdatesType, }; const highlightedVisitsToStats = (highlightedVisits, prop) => highlightedVisits.reduce((acc, highlightedVisit) => { @@ -62,6 +64,7 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa createNewVisit, loadMercureInfo, mercureInfo, + realTimeUpdates, }) => { const [ startDate, setStartDate ] = useState(undefined); const [ endDate, setEndDate ] = useState(undefined); @@ -117,7 +120,13 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa loadVisits(); }, [ startDate, endDate ]); useEffect( - bindToMercureTopic(mercureInfo, `https://shlink.io/new-visit/${shortCode}`, createNewVisit, loadMercureInfo), + bindToMercureTopic( + mercureInfo, + realTimeUpdates, + `https://shlink.io/new-visit/${shortCode}`, + createNewVisit, + loadMercureInfo + ), [ mercureInfo ], ); diff --git a/src/visits/services/provideServices.js b/src/visits/services/provideServices.js index f2363f67..f9f31b80 100644 --- a/src/visits/services/provideServices.js +++ b/src/visits/services/provideServices.js @@ -11,7 +11,7 @@ const provideServices = (bottle, connect) => { bottle.serviceFactory('MapModal', () => MapModal); bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsParser', 'OpenMapModalBtn'); bottle.decorator('ShortUrlVisits', connect( - [ 'shortUrlVisits', 'shortUrlDetail', 'mercureInfo' ], + [ 'shortUrlVisits', 'shortUrlDetail', 'mercureInfo', 'realTimeUpdates' ], [ 'getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits', 'createNewVisit', 'loadMercureInfo' ] )); diff --git a/test/mercure/helpers/index.test.js b/test/mercure/helpers/index.test.js index 1e6fd3df..3ee91a3c 100644 --- a/test/mercure/helpers/index.test.js +++ b/test/mercure/helpers/index.test.js @@ -11,11 +11,12 @@ describe('helpers', () => { const onTokenExpired = jest.fn(); it.each([ - [{ loading: true, error: false }], - [{ loading: false, error: true }], - [{ loading: true, error: true }], - ])('does not bind an EventSource when loading or error', (mercureInfo) => { - bindToMercureTopic(mercureInfo)(); + [{ loading: true, error: false }, { enabled: true }], + [{ loading: false, error: true }, { enabled: true }], + [{ loading: true, error: true }, { enabled: true }], + [{ loading: false, error: false }, { enabled: false }], + ])('does not bind an EventSource when disabled, loading or error', (mercureInfo, realTimeUpdates) => { + bindToMercureTopic(mercureInfo, realTimeUpdates)(); expect(EventSource).not.toHaveBeenCalled(); expect(onMessage).not.toHaveBeenCalled(); @@ -35,7 +36,7 @@ describe('helpers', () => { error: false, mercureHubUrl, token, - }, topic, onMessage, onTokenExpired)(); + }, { enabled: true }, topic, onMessage, onTokenExpired)(); expect(EventSource).toHaveBeenCalledWith(hubUrl, { headers: {