forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-15 20:13:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Created custom react hook that binds to mercure topic

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
src/mercure/helpers/index.js
View File

@@ -1,3 +1,4 @@
import { useEffect } from 'react';
import { EventSourcePolyfill as EventSource } from 'event-source-polyfill'; import { EventSourcePolyfill as EventSource } from 'event-source-polyfill';
export const bindToMercureTopic = (mercureInfo, topic, onMessage, onTokenExpired) => () => { export const bindToMercureTopic = (mercureInfo, topic, onMessage, onTokenExpired) => () => {
@@ -21,3 +22,7 @@ export const bindToMercureTopic = (mercureInfo, topic, onMessage, onTokenExpired
return () => es.close(); return () => es.close();
}; };
export const useMercureTopicBinding = (mercureInfo, topic, onMessage, onTokenExpired) => {
useEffect(bindToMercureTopic(mercureInfo, topic, onMessage, onTokenExpired), [ mercureInfo ]);
};

7
src/short-urls/ShortUrlsList.js
View File

@@ -8,7 +8,7 @@ import { serverType } from '../servers/prop-types';
import SortingDropdown from '../utils/SortingDropdown'; import SortingDropdown from '../utils/SortingDropdown';
import { determineOrderDir } from '../utils/utils'; import { determineOrderDir } from '../utils/utils';
import { MercureInfoType } from '../mercure/reducers/mercureInfo'; import { MercureInfoType } from '../mercure/reducers/mercureInfo';
import { bindToMercureTopic } from '../mercure/helpers'; import { useMercureTopicBinding } from '../mercure/helpers';
import { shortUrlType } from './reducers/shortUrlsList'; import { shortUrlType } from './reducers/shortUrlsList';
import { shortUrlsListParamsType } from './reducers/shortUrlsListParams'; import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
import './ShortUrlsList.scss'; import './ShortUrlsList.scss';
@@ -116,10 +116,7 @@ const ShortUrlsList = (ShortUrlsRow) => {
return resetShortUrlParams; return resetShortUrlParams;
}, []); }, []);
useEffect( useMercureTopicBinding(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo);
bindToMercureTopic(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo),
[ mercureInfo ]
);
return ( return (
<React.Fragment> <React.Fragment>

7
src/tags/TagsList.js
View File

@@ -5,7 +5,7 @@ import Message from '../utils/Message';
import SearchField from '../utils/SearchField'; import SearchField from '../utils/SearchField';
import { serverType } from '../servers/prop-types'; import { serverType } from '../servers/prop-types';
import { MercureInfoType } from '../mercure/reducers/mercureInfo'; import { MercureInfoType } from '../mercure/reducers/mercureInfo';
import { bindToMercureTopic } from '../mercure/helpers'; import { useMercureTopicBinding } from '../mercure/helpers';
import { TagsListType } from './reducers/tagsList'; import { TagsListType } from './reducers/tagsList';
const { ceil } = Math; const { ceil } = Math;
@@ -30,10 +30,7 @@ const TagsList = (TagCard) => {
useEffect(() => { useEffect(() => {
forceListTags(); forceListTags();
}, []); }, []);
useEffect( useMercureTopicBinding(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo);
bindToMercureTopic(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo),
[ mercureInfo ]
);
const renderContent = () => { const renderContent = () => {
if (tagsList.loading) { if (tagsList.loading) {

7
src/visits/ShortUrlVisits.js
View File

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import qs from 'qs'; import qs from 'qs';
import { MercureInfoType } from '../mercure/reducers/mercureInfo'; import { MercureInfoType } from '../mercure/reducers/mercureInfo';
import { bindToMercureTopic } from '../mercure/helpers'; import { useMercureTopicBinding } from '../mercure/helpers';
import { shortUrlVisitsType } from './reducers/shortUrlVisits'; import { shortUrlVisitsType } from './reducers/shortUrlVisits';
import ShortUrlVisitsHeader from './ShortUrlVisitsHeader'; import ShortUrlVisitsHeader from './ShortUrlVisitsHeader';
import { shortUrlDetailType } from './reducers/shortUrlDetail'; import { shortUrlDetailType } from './reducers/shortUrlDetail';
@@ -51,10 +51,7 @@ const ShortUrlVisits = (VisitsStats) => {
useEffect(() => { useEffect(() => {
getShortUrlDetail(shortCode, domain); getShortUrlDetail(shortCode, domain);
}, []); }, []);
useEffect( useMercureTopicBinding(mercureInfo, `https://shlink.io/new-visit/${shortCode}`, createNewVisit, loadMercureInfo);
bindToMercureTopic(mercureInfo, `https://shlink.io/new-visit/${shortCode}`, createNewVisit, loadMercureInfo),
[ mercureInfo ],
);
return ( return (
<VisitsStats getVisits={loadVisits} cancelGetVisits={cancelGetShortUrlVisits} visitsInfo={shortUrlVisits}> <VisitsStats getVisits={loadVisits} cancelGetVisits={cancelGetShortUrlVisits} visitsInfo={shortUrlVisits}>

9
src/visits/TagVisits.js
View File

@@ -1,7 +1,7 @@
import React, { useEffect } from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { MercureInfoType } from '../mercure/reducers/mercureInfo'; import { MercureInfoType } from '../mercure/reducers/mercureInfo';
import { bindToMercureTopic } from '../mercure/helpers'; import { useMercureTopicBinding } from '../mercure/helpers';
import { TagVisitsType } from './reducers/tagVisits'; import { TagVisitsType } from './reducers/tagVisits';
import TagVisitsHeader from './TagVisitsHeader'; import TagVisitsHeader from './TagVisitsHeader';
@@ -35,10 +35,7 @@ const TagVisits = (VisitsStats, colorGenerator) => {
const { tag } = params; const { tag } = params;
const loadVisits = (dates) => getTagVisits(tag, dates); const loadVisits = (dates) => getTagVisits(tag, dates);
useEffect( useMercureTopicBinding(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo);
bindToMercureTopic(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo),
[ mercureInfo ],
);
return ( return (
<VisitsStats getVisits={loadVisits} cancelGetVisits={cancelGetTagVisits} visitsInfo={tagVisits}> <VisitsStats getVisits={loadVisits} cancelGetVisits={cancelGetTagVisits} visitsInfo={tagVisits}>