mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-10 18:27:25 +03:00
Created custom react hook that binds to mercure topic
This commit is contained in:
parent
c46d5187c1
commit
52c56f7918
5 changed files with 14 additions and 21 deletions
|
@ -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 ]);
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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}>
|
||||
|
|
Loading…
Reference in a new issue