Created custom react hook that binds to mercure topic

This commit is contained in:
Alejandro Celaya 2020-06-06 09:29:43 +02:00
parent c46d5187c1
commit 52c56f7918
5 changed files with 14 additions and 21 deletions

View file

@ -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 ]);
};

View file

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

View file

@ -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) {

View file

@ -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}>

View file

@ -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}>