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>) => (
+const TagsList = (TagCard: FC<TagCardProps>) => boundToMercureHub((
-  { filterTags, forceListTags, tagsList, selectedServer, createNewVisit, loadMercureInfo, mercureInfo }: TagsListProps,
+  { 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;

test/App.test.tsx

@@ -7,10 +7,9 @@ import appFactory from '../src/App';
 describe('<App />', () => {
   let wrapper: ShallowWrapper;
   const MainHeader = () => null;
-  const DummyComponent = () => null;
 
   beforeEach(() => {
-    const App = appFactory(MainHeader, DummyComponent, DummyComponent, DummyComponent, DummyComponent, DummyComponent);
+    const App = appFactory(MainHeader, () => null, () => null, () => null, () => null, () => null, () => null);
 
     wrapper = shallow(<App fetchServers={identity} servers={{}} />);
   });

test/short-urls/ShortUrlsList.test.tsx

@@ -5,6 +5,7 @@ import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawe
 import { Mock } from 'ts-mockery';
 import shortUrlsListCreator, { ShortUrlsListProps, SORTABLE_FIELDS } from '../../src/short-urls/ShortUrlsList';
 import { ShortUrl } from '../../src/short-urls/data';
+import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 
 describe('<ShortUrlsList />', () => {
   let wrapper: ShallowWrapper;
@@ -18,6 +19,7 @@ describe('<ShortUrlsList />', () => {
     wrapper = shallow(
       <ShortUrlsList
         {...Mock.all<ShortUrlsListProps>()}
+        {...Mock.of<MercureBoundProps>({ mercureInfo: { loading: true } })}
         listShortUrls={listShortUrlsMock}
         resetShortUrlParams={resetShortUrlParamsMock}
         shortUrlsListParams={{
@@ -39,9 +41,8 @@ describe('<ShortUrlsList />', () => {
             }),
           ]
         }
-        mercureInfo={{ loading: true } as any}
       />,
-    );
+    ).dive(); // Dive is needed as this component is wrapped in a HOC
   });
 
   afterEach(jest.resetAllMocks);

test/tags/TagsList.test.tsx

@@ -7,6 +7,7 @@ import Message from '../../src/utils/Message';
 import SearchField from '../../src/utils/SearchField';
 import { rangeOf } from '../../src/utils/utils';
 import { TagsList } from '../../src/tags/reducers/tagsList';
+import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 
 describe('<TagsList />', () => {
   let wrapper: ShallowWrapper;
@@ -18,11 +19,12 @@ describe('<TagsList />', () => {
     wrapper = shallow(
       <TagsListComp
         {...Mock.all<TagsListProps>()}
+        {...Mock.all<MercureBoundProps>()}
         forceListTags={identity}
         filterTags={filterTags}
         tagsList={Mock.of<TagsList>(tagsList)}
       />,
-    );
+    ).dive(); // Dive is needed as this component is wrapped in a HOC
 
     return wrapper;
   };

test/visits/ShortUrlVisits.test.tsx

@@ -9,6 +9,7 @@ import ShortUrlVisitsHeader from '../../src/visits/ShortUrlVisitsHeader';
 import { ShortUrlVisits as ShortUrlVisitsState } from '../../src/visits/reducers/shortUrlVisits';
 import { ShortUrlDetail } from '../../src/visits/reducers/shortUrlDetail';
 import VisitsStats from '../../src/visits/VisitsStats';
+import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 
 describe('<ShortUrlVisits />', () => {
   let wrapper: ShallowWrapper;
@@ -25,6 +26,7 @@ describe('<ShortUrlVisits />', () => {
     wrapper = shallow(
       <ShortUrlVisits
         {...Mock.all<ShortUrlVisitsProps>()}
+        {...Mock.all<MercureBoundProps>()}
         getShortUrlDetail={identity}
         getShortUrlVisits={getShortUrlVisitsMock}
         match={match}
@@ -34,7 +36,7 @@ describe('<ShortUrlVisits />', () => {
         shortUrlDetail={Mock.all<ShortUrlDetail>()}
         cancelGetShortUrlVisits={() => {}}
       />,
-    );
+    ).dive(); // Dive is needed as this component is wrapped in a HOC
   });
 
   afterEach(() => wrapper.unmount());

test/visits/TagVisits.test.tsx

@@ -8,6 +8,7 @@ import TagVisitsHeader from '../../src/visits/TagVisitsHeader';
 import ColorGenerator from '../../src/utils/services/ColorGenerator';
 import { TagVisits as TagVisitsStats } from '../../src/visits/reducers/tagVisits';
 import VisitsStats from '../../src/visits/VisitsStats';
+import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 
 describe('<TagVisits />', () => {
   let wrapper: ShallowWrapper;
@@ -25,13 +26,14 @@ describe('<TagVisits />', () => {
     wrapper = shallow(
       <TagVisits
         {...Mock.all<TagVisitsProps>()}
+        {...Mock.all<MercureBoundProps>()}
         getTagVisits={getTagVisitsMock}
         match={match}
         history={history}
         tagVisits={Mock.of<TagVisitsStats>({ loading: true, visits: [] })}
         cancelGetTagVisits={() => {}}
       />,
-    );
+    ).dive(); // Dive is needed as this component is wrapped in a HOC
   });
 
   afterEach(() => wrapper.unmount());