Moved mercure hub binding from custom hook to HOC

src/mercure/helpers/boundToMercureHub.tsx

@@ -0,0 +1,26 @@
+import React, { FC, useEffect } from 'react';
+import { CreateVisit } from '../../visits/types';
+import { MercureInfo } from '../reducers/mercureInfo';
+import { bindToMercureTopic } from './index';
+
+export interface MercureBoundProps {
+  createNewVisit: (visitData: CreateVisit) => void;
+  loadMercureInfo: Function;
+  mercureInfo: MercureInfo;
+}
+
+export function boundToMercureHub<T = {}>(
+  WrappedComponent: FC<MercureBoundProps & T>,
+  getTopicForProps: (props: T) => string,
+) {
+  return (props: MercureBoundProps & T) => {
+    const { createNewVisit, loadMercureInfo, mercureInfo } = props;
+
+    useEffect(
+      bindToMercureTopic(mercureInfo, getTopicForProps(props), createNewVisit, loadMercureInfo),
+      [ mercureInfo ],
+    );
+
+    return <WrappedComponent {...props} />;
+  };
+}

src/mercure/helpers/index.ts

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { EventSourcePolyfill as EventSource } from 'event-source-polyfill';
 import { MercureInfo } from '../reducers/mercureInfo';
 
@@ -23,18 +22,3 @@ export const bindToMercureTopic = <T>(mercureInfo: MercureInfo, topic: string, o
 
   return () => es.close();
 };
-
-export const useMercureTopicBinding = <T>(
-  mercureInfo: MercureInfo,
-  topic: string,
-  onMessage: (message: T) => void,
-  onTokenExpired: Function,
-) => {
-  useEffect(bindToMercureTopic(mercureInfo, topic, onMessage, onTokenExpired), [ mercureInfo ]);
-};
-
-export interface MercureBoundProps {
-  createNewVisit: (message: any) => void;
-  loadMercureInfo: Function;
-  mercureInfo: MercureInfo;
-}

src/short-urls/ShortUrlsList.tsx

@@ -6,8 +6,8 @@ import qs from 'qs';
 import { RouteComponentProps } from 'react-router';
 import SortingDropdown from '../utils/SortingDropdown';
 import { determineOrderDir, OrderDir } from '../utils/utils';
-import { MercureBoundProps, useMercureTopicBinding } from '../mercure/helpers';
 import { SelectedServer } from '../servers/data';
+import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
 import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
 import { ShortUrl } from './data';
@@ -31,14 +31,14 @@ export interface WithList {
   shortUrlsList: ShortUrl[];
 }
 
-export interface ShortUrlsListProps extends ShortUrlsListState, RouteComponentProps<RouteParams>, MercureBoundProps {
+export interface ShortUrlsListProps extends ShortUrlsListState, RouteComponentProps<RouteParams> {
   selectedServer: SelectedServer;
   listShortUrls: (params: ShortUrlsListParams) => void;
   shortUrlsListParams: ShortUrlsListParams;
   resetShortUrlParams: () => void;
 }
 
-const ShortUrlsList = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
+const ShortUrlsList = (ShortUrlsRow: FC<ShortUrlsRowProps>) => boundToMercureHub(({
   listShortUrls,
   resetShortUrlParams,
   shortUrlsListParams,
@@ -48,9 +48,6 @@ const ShortUrlsList = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
   error,
   shortUrlsList,
   selectedServer,
-  createNewVisit,
-  loadMercureInfo,
-  mercureInfo,
 }: ShortUrlsListProps & WithList) => {
   const { orderBy } = shortUrlsListParams;
   const [ order, setOrder ] = useState<{ orderField?: OrderableFields; orderDir?: OrderDir }>({
@@ -116,7 +113,6 @@ const ShortUrlsList = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
 
     return resetShortUrlParams;
   }, []);
-  useMercureTopicBinding(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo);
 
   return (
     <React.Fragment>
@@ -168,6 +164,6 @@ const ShortUrlsList = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
       </table>
     </React.Fragment>
   );
-};
+}, () => 'https://shlink.io/new-visit');
 
 export default ShortUrlsList;

src/tags/TagsList.tsx

@@ -2,30 +2,29 @@ import React, { FC, useEffect, useState } from 'react';
 import { splitEvery } from 'ramda';
 import Message from '../utils/Message';
 import SearchField from '../utils/SearchField';
-import { MercureBoundProps, useMercureTopicBinding } from '../mercure/helpers';
 import { SelectedServer } from '../servers/data';
+import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { TagsList as TagsListState } from './reducers/tagsList';
 import { TagCardProps } from './TagCard';
 
 const { ceil } = Math;
 const TAGS_GROUPS_AMOUNT = 4;
 
-export interface TagsListProps extends MercureBoundProps {
+export interface TagsListProps {
   filterTags: (searchTerm: string) => void;
   forceListTags: Function;
   tagsList: TagsListState;
   selectedServer: SelectedServer;
 }
 
-const TagsList = (TagCard: FC<TagCardProps>) => (
-  { filterTags, forceListTags, tagsList, selectedServer, createNewVisit, loadMercureInfo, mercureInfo }: TagsListProps,
+const TagsList = (TagCard: FC<TagCardProps>) => boundToMercureHub((
+  { filterTags, forceListTags, tagsList, selectedServer }: TagsListProps,
 ) => {
   const [ displayedTag, setDisplayedTag ] = useState<string | undefined>();
 
   useEffect(() => {
     forceListTags();
   }, []);
-  useMercureTopicBinding(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo);
 
   const renderContent = () => {
     if (tagsList.loading) {
@@ -76,6 +75,6 @@ const TagsList = (TagCard: FC<TagCardProps>) => (
       </div>
     </React.Fragment>
   );
-};
+}, () => 'https://shlink.io/new-visit');
 
 export default TagsList;

src/visits/ShortUrlVisits.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect } from 'react';
 import qs from 'qs';
 import { RouteComponentProps } from 'react-router';
-import { MercureBoundProps, useMercureTopicBinding } from '../mercure/helpers';
+import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { ShlinkVisitsParams } from '../utils/services/types';
 import { ShortUrlVisits as ShortUrlVisitsState } from './reducers/shortUrlVisits';
 import ShortUrlVisitsHeader from './ShortUrlVisitsHeader';
 import { ShortUrlDetail } from './reducers/shortUrlDetail';
 import VisitsStats from './VisitsStats';
 
-export interface ShortUrlVisitsProps extends RouteComponentProps<{ shortCode: string }>, MercureBoundProps {
+export interface ShortUrlVisitsProps extends RouteComponentProps<{ shortCode: string }> {
   getShortUrlVisits: (shortCode: string, query?: ShlinkVisitsParams) => void;
   shortUrlVisits: ShortUrlVisitsState;
   getShortUrlDetail: Function;
@@ -16,7 +16,7 @@ export interface ShortUrlVisitsProps extends RouteComponentProps<{ shortCode: st
   cancelGetShortUrlVisits: () => void;
 }
 
-const ShortUrlVisits = ({
+const ShortUrlVisits = boundToMercureHub(({
   history: { goBack },
   match,
   location: { search },
@@ -25,9 +25,6 @@ const ShortUrlVisits = ({
   getShortUrlVisits,
   getShortUrlDetail,
   cancelGetShortUrlVisits,
-  createNewVisit,
-  loadMercureInfo,
-  mercureInfo,
 }: ShortUrlVisitsProps) => {
   const { params } = match;
   const { shortCode } = params;
@@ -38,13 +35,12 @@ const ShortUrlVisits = ({
   useEffect(() => {
     getShortUrlDetail(shortCode, domain);
   }, []);
-  useMercureTopicBinding(mercureInfo, `https://shlink.io/new-visit/${shortCode}`, createNewVisit, loadMercureInfo);
 
   return (
     <VisitsStats getVisits={loadVisits} cancelGetVisits={cancelGetShortUrlVisits} visitsInfo={shortUrlVisits}>
       <ShortUrlVisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />
     </VisitsStats>
   );
-};
+}, ({ match }) => `https://shlink.io/new-visit/${match.params.shortCode}`);
 
 export default ShortUrlVisits;

src/visits/TagVisits.tsx

@@ -1,39 +1,34 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router';
-import { MercureBoundProps, useMercureTopicBinding } from '../mercure/helpers';
+import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import ColorGenerator from '../utils/services/ColorGenerator';
 import { ShlinkVisitsParams } from '../utils/services/types';
 import { TagVisits as TagVisitsState } from './reducers/tagVisits';
 import TagVisitsHeader from './TagVisitsHeader';
 import VisitsStats from './VisitsStats';
 
-export interface TagVisitsProps extends RouteComponentProps<{ tag: string }>, MercureBoundProps {
+export interface TagVisitsProps extends RouteComponentProps<{ tag: string }> {
   getTagVisits: (tag: string, query: any) => void;
   tagVisits: TagVisitsState;
   cancelGetTagVisits: () => void;
 }
 
-const TagVisits = (colorGenerator: ColorGenerator) => ({
+const TagVisits = (colorGenerator: ColorGenerator) => boundToMercureHub(({
   history: { goBack },
   match,
   getTagVisits,
   tagVisits,
   cancelGetTagVisits,
-  createNewVisit,
-  loadMercureInfo,
-  mercureInfo,
 }: TagVisitsProps) => {
   const { params } = match;
   const { tag } = params;
   const loadVisits = (params: ShlinkVisitsParams) => getTagVisits(tag, params);
 
-  useMercureTopicBinding(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo);
-
   return (
     <VisitsStats getVisits={loadVisits} cancelGetVisits={cancelGetTagVisits} visitsInfo={tagVisits}>
       <TagVisitsHeader tagVisits={tagVisits} goBack={goBack} colorGenerator={colorGenerator} />
     </VisitsStats>
   );
-};
+}, () => 'https://shlink.io/new-visit');
 
 export default TagVisits;