Removed duplicated code on mercure-bound components

src/visits/ShortUrlVisits.js

@@ -1,68 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import qs from 'qs';
-import { MercureInfoType } from '../mercure/reducers/mercureInfo';
-import { useMercureTopicBinding } from '../mercure/helpers';
-import { shortUrlVisitsType } from './reducers/shortUrlVisits';
-import ShortUrlVisitsHeader from './ShortUrlVisitsHeader';
-import { shortUrlDetailType } from './reducers/shortUrlDetail';
-
-const propTypes = {
-  history: PropTypes.shape({
-    goBack: PropTypes.func,
-  }),
-  match: PropTypes.shape({
-    params: PropTypes.object,
-  }),
-  location: PropTypes.shape({
-    search: PropTypes.string,
-  }),
-  getShortUrlVisits: PropTypes.func,
-  shortUrlVisits: shortUrlVisitsType,
-  getShortUrlDetail: PropTypes.func,
-  shortUrlDetail: shortUrlDetailType,
-  cancelGetShortUrlVisits: PropTypes.func,
-  createNewVisit: PropTypes.func,
-  loadMercureInfo: PropTypes.func,
-  mercureInfo: MercureInfoType,
-};
-
-const ShortUrlVisits = (VisitsStats) => {
-  const ShortUrlVisitsComp = ({
-    history,
-    match,
-    location,
-    shortUrlVisits,
-    shortUrlDetail,
-    getShortUrlVisits,
-    getShortUrlDetail,
-    cancelGetShortUrlVisits,
-    createNewVisit,
-    loadMercureInfo,
-    mercureInfo,
-  }) => {
-    const { params } = match;
-    const { shortCode } = params;
-    const { search } = location;
-    const { domain } = qs.parse(search, { ignoreQueryPrefix: true });
-
-    const loadVisits = (dates) => getShortUrlVisits(shortCode, { ...dates, domain });
-
-    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={history.goBack} />
-      </VisitsStats>
-    );
-  };
-
-  ShortUrlVisitsComp.propTypes = propTypes;
-
-  return ShortUrlVisitsComp;
-};
-
-export default ShortUrlVisits;

src/visits/ShortUrlVisits.tsx

@@ -0,0 +1,49 @@
+import React, { FC, useEffect } from 'react';
+import qs from 'qs';
+import { RouteComponentProps } from 'react-router';
+import { MercureBoundProps, useMercureTopicBinding } from '../mercure/helpers';
+import { ShlinkVisitsParams } from '../utils/services/types';
+import { ShortUrlVisits as ShortUrlVisitsState } from './reducers/shortUrlVisits';
+import ShortUrlVisitsHeader from './ShortUrlVisitsHeader';
+import { ShortUrlDetail } from './reducers/shortUrlDetail';
+
+interface ShortUrlVisitsProps extends RouteComponentProps<{ shortCode: string }>, MercureBoundProps {
+  getShortUrlVisits: (shortCode: string, query?: ShlinkVisitsParams) => void;
+  shortUrlVisits: ShortUrlVisitsState;
+  getShortUrlDetail: Function;
+  shortUrlDetail: ShortUrlDetail;
+  cancelGetShortUrlVisits: Function;
+}
+
+const ShortUrlVisits = (VisitsStats: FC<any>) => ({ // TODO Use VisitsStatsProps once available
+  history: { goBack },
+  match,
+  location: { search },
+  shortUrlVisits,
+  shortUrlDetail,
+  getShortUrlVisits,
+  getShortUrlDetail,
+  cancelGetShortUrlVisits,
+  createNewVisit,
+  loadMercureInfo,
+  mercureInfo,
+}: ShortUrlVisitsProps) => {
+  const { params } = match;
+  const { shortCode } = params;
+  const { domain } = qs.parse(search, { ignoreQueryPrefix: true }) as { domain?: string };
+
+  const loadVisits = (dates: Partial<ShlinkVisitsParams>) => getShortUrlVisits(shortCode, { ...dates, domain });
+
+  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>
+  );
+};
+
+export default ShortUrlVisits;