Finished TS migration

src/visits/ShortUrlVisits.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import qs from 'qs';
 import { RouteComponentProps } from 'react-router';
 import { MercureBoundProps, useMercureTopicBinding } from '../mercure/helpers';
@@ -6,16 +6,17 @@ 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 {
   getShortUrlVisits: (shortCode: string, query?: ShlinkVisitsParams) => void;
   shortUrlVisits: ShortUrlVisitsState;
   getShortUrlDetail: Function;
   shortUrlDetail: ShortUrlDetail;
-  cancelGetShortUrlVisits: Function;
+  cancelGetShortUrlVisits: () => void;
 }
 
-const ShortUrlVisits = (VisitsStats: FC<any>) => ({ // TODO Use VisitsStatsProps once available
+const ShortUrlVisits = ({
   history: { goBack },
   match,
   location: { search },
@@ -32,7 +33,7 @@ const ShortUrlVisits = (VisitsStats: FC<any>) => ({ // TODO Use VisitsStatsProps
   const { shortCode } = params;
   const { domain } = qs.parse(search, { ignoreQueryPrefix: true }) as { domain?: string };
 
-  const loadVisits = (dates: Partial<ShlinkVisitsParams>) => getShortUrlVisits(shortCode, { ...dates, domain });
+  const loadVisits = (params: Partial<ShlinkVisitsParams>) => getShortUrlVisits(shortCode, { ...params, domain });
 
   useEffect(() => {
     getShortUrlDetail(shortCode, domain);

src/visits/TagVisits.tsx

@@ -1,17 +1,19 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { MercureBoundProps, useMercureTopicBinding } from '../mercure/helpers';
 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 {
   getTagVisits: (tag: string, query: any) => void;
   tagVisits: TagVisitsState;
-  cancelGetTagVisits: Function;
+  cancelGetTagVisits: () => void;
 }
 
-const TagVisits = (VisitsStats: FC<any>, colorGenerator: ColorGenerator) => ({ // TODO Use VisitsStatsProps once available
+const TagVisits = (colorGenerator: ColorGenerator) => ({
   history: { goBack },
   match,
   getTagVisits,
@@ -23,7 +25,7 @@ const TagVisits = (VisitsStats: FC<any>, colorGenerator: ColorGenerator) => ({ /
 }: TagVisitsProps) => {
   const { params } = match;
   const { tag } = params;
-  const loadVisits = (dates: any) => getTagVisits(tag, dates);
+  const loadVisits = (params: ShlinkVisitsParams) => getTagVisits(tag, params);
 
   useMercureTopicBinding(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo);
 

src/visits/VisitsStats.js

@@ -1,247 +0,0 @@
-import { isEmpty, propEq, values } from 'ramda';
-import React, { useState, useEffect, useMemo } from 'react';
-import { Button, Card, Collapse, Progress } from 'reactstrap';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronDown as chevronDown } from '@fortawesome/free-solid-svg-icons';
-import DateRangeRow from '../utils/DateRangeRow';
-import Message from '../utils/Message';
-import { formatDate } from '../utils/helpers/date';
-import { useToggle } from '../utils/helpers/hooks';
-import SortableBarGraph from './helpers/SortableBarGraph';
-import GraphCard from './helpers/GraphCard';
-import LineChartCard from './helpers/LineChartCard';
-import VisitsTable from './VisitsTable';
-import { VisitsInfoType } from './types';
-import OpenMapModalBtn from './helpers/OpenMapModalBtn';
-
-const propTypes = {
-  children: PropTypes.node,
-  getVisits: PropTypes.func,
-  visitsInfo: VisitsInfoType,
-  cancelGetVisits: PropTypes.func,
-  matchMedia: PropTypes.func,
-};
-
-const highlightedVisitsToStats = (highlightedVisits, prop) => highlightedVisits.reduce((acc, highlightedVisit) => {
-  if (!acc[highlightedVisit[prop]]) {
-    acc[highlightedVisit[prop]] = 0;
-  }
-
-  acc[highlightedVisit[prop]] += 1;
-
-  return acc;
-}, {});
-const format = formatDate();
-let selectedBar;
-
-const VisitsStats = ({ processStatsFromVisits, normalizeVisits }) => {
-  const VisitsStatsComp = ({ children, visitsInfo, getVisits, cancelGetVisits, matchMedia = window.matchMedia }) => {
-    const [ startDate, setStartDate ] = useState(undefined);
-    const [ endDate, setEndDate ] = useState(undefined);
-    const [ showTable, toggleTable ] = useToggle();
-    const [ tableIsSticky, , setSticky, unsetSticky ] = useToggle();
-    const [ highlightedVisits, setHighlightedVisits ] = useState([]);
-    const [ highlightedLabel, setHighlightedLabel ] = useState();
-    const [ isMobileDevice, setIsMobileDevice ] = useState(false);
-    const determineIsMobileDevice = () => setIsMobileDevice(matchMedia('(max-width: 991px)').matches);
-    const setSelectedVisits = (selectedVisits) => {
-      selectedBar = undefined;
-      setHighlightedVisits(selectedVisits);
-    };
-    const highlightVisitsForProp = (prop) => (value) => {
-      const newSelectedBar = `${prop}_${value}`;
-
-      if (selectedBar === newSelectedBar) {
-        setHighlightedVisits([]);
-        setHighlightedLabel(undefined);
-        selectedBar = undefined;
-      } else {
-        setHighlightedVisits(normalizedVisits.filter(propEq(prop, value)));
-        setHighlightedLabel(value);
-        selectedBar = newSelectedBar;
-      }
-    };
-
-    const { visits, loading, loadingLarge, error, progress } = visitsInfo;
-    const showTableControls = !loading && visits.length > 0;
-    const normalizedVisits = useMemo(() => normalizeVisits(visits), [ visits ]);
-    const { os, browsers, referrers, countries, cities, citiesForMap } = useMemo(
-      () => processStatsFromVisits(normalizedVisits),
-      [ normalizedVisits ],
-    );
-    const mapLocations = values(citiesForMap);
-
-    useEffect(() => {
-      determineIsMobileDevice();
-      window.addEventListener('resize', determineIsMobileDevice);
-
-      return () => {
-        cancelGetVisits();
-        window.removeEventListener('resize', determineIsMobileDevice);
-      };
-    }, []);
-    useEffect(() => {
-      getVisits({ startDate: format(startDate), endDate: format(endDate) });
-    }, [ startDate, endDate ]);
-
-    const renderVisitsContent = () => {
-      if (loadingLarge) {
-        return (
-          <Message loading>
-            This is going to take a while... :S
-            <Progress value={progress} striped={progress === 100} className="mt-3" />
-          </Message>
-        );
-      }
-
-      if (loading) {
-        return <Message loading />;
-      }
-
-      if (error) {
-        return (
-          <Card className="mt-4" body inverse color="danger">
-            An error occurred while loading visits :(
-          </Card>
-        );
-      }
-
-      if (isEmpty(visits)) {
-        return <Message>There are no visits matching current filter  :(</Message>;
-      }
-
-      return (
-        <div className="row">
-          <div className="col-12 mt-4">
-            <LineChartCard
-              title="Visits during time"
-              visits={visits}
-              highlightedVisits={highlightedVisits}
-              highlightedLabel={highlightedLabel}
-            />
-          </div>
-          <div className="col-xl-4 col-lg-6 mt-4">
-            <GraphCard title="Operating systems" stats={os} />
-          </div>
-          <div className="col-xl-4 col-lg-6 mt-4">
-            <GraphCard title="Browsers" stats={browsers} />
-          </div>
-          <div className="col-xl-4 mt-4">
-            <SortableBarGraph
-              title="Referrers"
-              stats={referrers}
-              withPagination={false}
-              highlightedStats={highlightedVisitsToStats(highlightedVisits, 'referer')}
-              highlightedLabel={highlightedLabel}
-              sortingItems={{
-                name: 'Referrer name',
-                amount: 'Visits amount',
-              }}
-              onClick={highlightVisitsForProp('referer')}
-            />
-          </div>
-          <div className="col-lg-6 mt-4">
-            <SortableBarGraph
-              title="Countries"
-              stats={countries}
-              highlightedStats={highlightedVisitsToStats(highlightedVisits, 'country')}
-              highlightedLabel={highlightedLabel}
-              sortingItems={{
-                name: 'Country name',
-                amount: 'Visits amount',
-              }}
-              onClick={highlightVisitsForProp('country')}
-            />
-          </div>
-          <div className="col-lg-6 mt-4">
-            <SortableBarGraph
-              title="Cities"
-              stats={cities}
-              highlightedStats={highlightedVisitsToStats(highlightedVisits, 'city')}
-              highlightedLabel={highlightedLabel}
-              extraHeaderContent={(activeCities) =>
-                mapLocations.length > 0 &&
-                <OpenMapModalBtn modalTitle="Cities" locations={mapLocations} activeCities={activeCities} />
-              }
-              sortingItems={{
-                name: 'City name',
-                amount: 'Visits amount',
-              }}
-              onClick={highlightVisitsForProp('city')}
-            />
-          </div>
-        </div>
-      );
-    };
-
-    return (
-      <React.Fragment>
-        {children}
-
-        <section className="mt-4">
-          <div className="row flex-md-row-reverse">
-            <div className="col-lg-7 col-xl-6">
-              <DateRangeRow
-                disabled={loading}
-                startDate={startDate}
-                endDate={endDate}
-                onStartDateChange={setStartDate}
-                onEndDateChange={setEndDate}
-              />
-            </div>
-            <div className="col-lg-5 col-xl-6 mt-4 mt-lg-0">
-              {showTableControls && (
-                <span className={classNames({ row: isMobileDevice })}>
-                  <span className={classNames({ 'col-6': isMobileDevice })}>
-                    <Button outline color="primary" block={isMobileDevice} onClick={toggleTable}>
-                      {showTable ? 'Hide' : 'Show'} table
-                      <FontAwesomeIcon icon={chevronDown} rotation={showTable ? 180 : undefined} className="ml-2" />
-                    </Button>
-                  </span>
-                  <span className={classNames({ 'col-6': isMobileDevice, 'ml-2': !isMobileDevice })}>
-                    <Button
-                      outline
-                      disabled={highlightedVisits.length === 0}
-                      block={isMobileDevice}
-                      onClick={() => setSelectedVisits([])}
-                    >
-                      Reset selection
-                    </Button>
-                  </span>
-                </span>
-              )}
-            </div>
-          </div>
-        </section>
-
-        {showTableControls && (
-          <Collapse
-            isOpen={showTable}
-            // Enable stickiness only when there's no CSS animation, to avoid weird rendering effects
-            onEntered={setSticky}
-            onExiting={unsetSticky}
-          >
-            <VisitsTable
-              visits={normalizedVisits}
-              selectedVisits={highlightedVisits}
-              setSelectedVisits={setSelectedVisits}
-              isSticky={tableIsSticky}
-            />
-          </Collapse>
-        )}
-
-        <section>
-          {renderVisitsContent()}
-        </section>
-      </React.Fragment>
-    );
-  };
-
-  VisitsStatsComp.propTypes = propTypes;
-
-  return VisitsStatsComp;
-};
-
-export default VisitsStats;

src/visits/VisitsStats.tsx

@@ -0,0 +1,250 @@
+import { isEmpty, propEq, values } from 'ramda';
+import React, { useState, useEffect, useMemo, FC } from 'react';
+import { Button, Card, Collapse, Progress } from 'reactstrap';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown as chevronDown } from '@fortawesome/free-solid-svg-icons';
+import moment from 'moment';
+import DateRangeRow from '../utils/DateRangeRow';
+import Message from '../utils/Message';
+import { formatDate } from '../utils/helpers/date';
+import { useToggle } from '../utils/helpers/hooks';
+import { ShlinkVisitsParams } from '../utils/services/types';
+import SortableBarGraph from './helpers/SortableBarGraph';
+import GraphCard from './helpers/GraphCard';
+import LineChartCard from './helpers/LineChartCard';
+import VisitsTable from './VisitsTable';
+import { NormalizedVisit, Stats, VisitsInfo } from './types';
+import OpenMapModalBtn from './helpers/OpenMapModalBtn';
+import { normalizeVisits, processStatsFromVisits } from './services/VisitsParser';
+
+export interface VisitsStatsProps {
+  matchMedia?: (query: string) => MediaQueryList;
+  getVisits: (params: Partial<ShlinkVisitsParams>) => void;
+  visitsInfo: VisitsInfo;
+  cancelGetVisits: () => void;
+}
+
+type HighlightableProps = 'referer' | 'country' | 'city';
+
+const highlightedVisitsToStats = (
+  highlightedVisits: NormalizedVisit[],
+  prop: HighlightableProps,
+): Stats => highlightedVisits.reduce<Stats>((acc, highlightedVisit) => {
+  if (!acc[highlightedVisit[prop]]) {
+    acc[highlightedVisit[prop]] = 0;
+  }
+
+  acc[highlightedVisit[prop]] += 1;
+
+  return acc;
+}, {});
+const format = formatDate();
+let selectedBar: string | undefined;
+
+const VisitsStats: FC<VisitsStatsProps> = (
+  { children, visitsInfo, getVisits, cancelGetVisits, matchMedia = window.matchMedia },
+) => {
+  const [ startDate, setStartDate ] = useState<moment.Moment | null>(null);
+  const [ endDate, setEndDate ] = useState<moment.Moment | null>(null);
+  const [ showTable, toggleTable ] = useToggle();
+  const [ tableIsSticky, , setSticky, unsetSticky ] = useToggle();
+  const [ highlightedVisits, setHighlightedVisits ] = useState<NormalizedVisit[]>([]);
+  const [ highlightedLabel, setHighlightedLabel ] = useState<string | undefined>();
+  const [ isMobileDevice, setIsMobileDevice ] = useState(false);
+
+  const { visits, loading, loadingLarge, error, progress } = visitsInfo;
+  const showTableControls = !loading && visits.length > 0;
+  const normalizedVisits = useMemo(() => normalizeVisits(visits), [ visits ]);
+  const { os, browsers, referrers, countries, cities, citiesForMap } = useMemo(
+    () => processStatsFromVisits(normalizedVisits),
+    [ normalizedVisits ],
+  );
+  const mapLocations = values(citiesForMap);
+
+  const determineIsMobileDevice = () => setIsMobileDevice(matchMedia('(max-width: 991px)').matches);
+  const setSelectedVisits = (selectedVisits: NormalizedVisit[]) => {
+    selectedBar = undefined;
+    setHighlightedVisits(selectedVisits);
+  };
+  const highlightVisitsForProp = (prop: HighlightableProps) => (value: string) => {
+    const newSelectedBar = `${prop}_${value}`;
+
+    if (selectedBar === newSelectedBar) {
+      setHighlightedVisits([]);
+      setHighlightedLabel(undefined);
+      selectedBar = undefined;
+    } else {
+      setHighlightedVisits(normalizedVisits.filter(propEq(prop, value)));
+      setHighlightedLabel(value);
+      selectedBar = newSelectedBar;
+    }
+  };
+
+  useEffect(() => {
+    determineIsMobileDevice();
+    window.addEventListener('resize', determineIsMobileDevice);
+
+    return () => {
+      cancelGetVisits();
+      window.removeEventListener('resize', determineIsMobileDevice);
+    };
+  }, []);
+  useEffect(() => {
+    getVisits({ startDate: format(startDate) ?? undefined, endDate: format(endDate) ?? undefined });
+  }, [ startDate, endDate ]);
+
+  const renderVisitsContent = () => {
+    if (loadingLarge) {
+      return (
+        <Message loading>
+          This is going to take a while... :S
+          <Progress value={progress} striped={progress === 100} className="mt-3" />
+        </Message>
+      );
+    }
+
+    if (loading) {
+      return <Message loading />;
+    }
+
+    if (error) {
+      return (
+        <Card className="mt-4" body inverse color="danger">
+          An error occurred while loading visits :(
+        </Card>
+      );
+    }
+
+    if (isEmpty(visits)) {
+      return <Message>There are no visits matching current filter  :(</Message>;
+    }
+
+    return (
+      <div className="row">
+        <div className="col-12 mt-4">
+          <LineChartCard
+            title="Visits during time"
+            visits={visits}
+            highlightedVisits={highlightedVisits}
+            highlightedLabel={highlightedLabel}
+          />
+        </div>
+        <div className="col-xl-4 col-lg-6 mt-4">
+          <GraphCard title="Operating systems" stats={os} />
+        </div>
+        <div className="col-xl-4 col-lg-6 mt-4">
+          <GraphCard title="Browsers" stats={browsers} />
+        </div>
+        <div className="col-xl-4 mt-4">
+          <SortableBarGraph
+            title="Referrers"
+            stats={referrers}
+            withPagination={false}
+            highlightedStats={highlightedVisitsToStats(highlightedVisits, 'referer')}
+            highlightedLabel={highlightedLabel}
+            sortingItems={{
+              name: 'Referrer name',
+              amount: 'Visits amount',
+            }}
+            onClick={highlightVisitsForProp('referer')}
+          />
+        </div>
+        <div className="col-lg-6 mt-4">
+          <SortableBarGraph
+            title="Countries"
+            stats={countries}
+            highlightedStats={highlightedVisitsToStats(highlightedVisits, 'country')}
+            highlightedLabel={highlightedLabel}
+            sortingItems={{
+              name: 'Country name',
+              amount: 'Visits amount',
+            }}
+            onClick={highlightVisitsForProp('country')}
+          />
+        </div>
+        <div className="col-lg-6 mt-4">
+          <SortableBarGraph
+            title="Cities"
+            stats={cities}
+            highlightedStats={highlightedVisitsToStats(highlightedVisits, 'city')}
+            highlightedLabel={highlightedLabel}
+            extraHeaderContent={(activeCities: string[]) =>
+              mapLocations.length > 0 &&
+              <OpenMapModalBtn modalTitle="Cities" locations={mapLocations} activeCities={activeCities} />
+            }
+            sortingItems={{
+              name: 'City name',
+              amount: 'Visits amount',
+            }}
+            onClick={highlightVisitsForProp('city')}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <React.Fragment>
+      {children}
+
+      <section className="mt-4">
+        <div className="row flex-md-row-reverse">
+          <div className="col-lg-7 col-xl-6">
+            <DateRangeRow
+              disabled={loading}
+              startDate={startDate}
+              endDate={endDate}
+              onStartDateChange={setStartDate}
+              onEndDateChange={setEndDate}
+            />
+          </div>
+          <div className="col-lg-5 col-xl-6 mt-4 mt-lg-0">
+            {showTableControls && (
+              <span className={classNames({ row: isMobileDevice })}>
+                <span className={classNames({ 'col-6': isMobileDevice })}>
+                  <Button outline color="primary" block={isMobileDevice} onClick={toggleTable}>
+                    {showTable ? 'Hide' : 'Show'} table
+                    <FontAwesomeIcon icon={chevronDown} rotation={showTable ? 180 : undefined} className="ml-2" />
+                  </Button>
+                </span>
+                <span className={classNames({ 'col-6': isMobileDevice, 'ml-2': !isMobileDevice })}>
+                  <Button
+                    outline
+                    disabled={highlightedVisits.length === 0}
+                    block={isMobileDevice}
+                    onClick={() => setSelectedVisits([])}
+                  >
+                    Reset selection
+                  </Button>
+                </span>
+              </span>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {showTableControls && (
+        <Collapse
+          isOpen={showTable}
+          // Enable stickiness only when there's no CSS animation, to avoid weird rendering effects
+          onEntered={setSticky}
+          onExiting={unsetSticky}
+        >
+          <VisitsTable
+            visits={normalizedVisits}
+            selectedVisits={highlightedVisits}
+            setSelectedVisits={setSelectedVisits}
+            isSticky={tableIsSticky}
+          />
+        </Collapse>
+      )}
+
+      <section>
+        {renderVisitsContent()}
+      </section>
+    </React.Fragment>
+  );
+};
+
+export default VisitsStats;

src/visits/VisitsTable.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
 import Moment from 'react-moment';
 import classNames from 'classnames';
 import { min, splitEvery } from 'ramda';
@@ -11,35 +10,42 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import SimplePaginator from '../common/SimplePaginator';
 import SearchField from '../utils/SearchField';
-import { determineOrderDir } from '../utils/utils';
+import { determineOrderDir, OrderDir } from '../utils/utils';
 import { prettify } from '../utils/helpers/numbers';
+import { NormalizedVisit } from './types';
 import './VisitsTable.scss';
 
-const NormalizedVisitType = PropTypes.shape({
+interface VisitsTableProps {
+  visits: NormalizedVisit[];
+  selectedVisits?: NormalizedVisit[];
+  setSelectedVisits: (visits: NormalizedVisit[]) => void;
+  isSticky?: boolean;
+  matchMedia?: (query: string) => MediaQueryList;
+}
 
-});
+type OrderableFields = 'date' | 'country' | 'city' | 'browser' | 'os' | 'referer';
 
-const propTypes = {
-  visits: PropTypes.arrayOf(NormalizedVisitType).isRequired,
-  selectedVisits: PropTypes.arrayOf(NormalizedVisitType),
-  setSelectedVisits: PropTypes.func.isRequired,
-  isSticky: PropTypes.bool,
-  matchMedia: PropTypes.func,
-};
+interface Order {
+  field?: OrderableFields;
+  dir?: OrderDir;
+}
 
 const PAGE_SIZE = 20;
-const visitMatchesSearch = ({ browser, os, referer, country, city }, searchTerm) =>
+const visitMatchesSearch = ({ browser, os, referer, country, city }: NormalizedVisit, searchTerm: string) =>
   `${browser} ${os} ${referer} ${country} ${city}`.toLowerCase().includes(searchTerm.toLowerCase());
-const searchVisits = (searchTerm, visits) => visits.filter((visit) => visitMatchesSearch(visit, searchTerm));
-const sortVisits = ({ field, dir }, visits) => visits.sort((a, b) => {
-  const greaterThan = dir === 'ASC' ? 1 : -1;
-  const smallerThan = dir === 'ASC' ? -1 : 1;
+const searchVisits = (searchTerm: string, visits: NormalizedVisit[]) =>
+  visits.filter((visit) => visitMatchesSearch(visit, searchTerm));
+const sortVisits = ({ field, dir }: Order, visits: NormalizedVisit[]) => !field || !dir ? visits : visits.sort(
+  (a, b) => {
+    const greaterThan = dir === 'ASC' ? 1 : -1;
+    const smallerThan = dir === 'ASC' ? -1 : 1;
 
-  return a[field] > b[field] ? greaterThan : smallerThan;
-});
-const calculateVisits = (allVisits, searchTerm, order) => {
+    return a[field] > b[field] ? greaterThan : smallerThan;
+  },
+);
+const calculateVisits = (allVisits: NormalizedVisit[], searchTerm: string | undefined, order: Order) => {
   const filteredVisits = searchTerm ? searchVisits(searchTerm, allVisits) : [ ...allVisits ];
-  const sortedVisits = order.dir ? sortVisits(order, filteredVisits) : filteredVisits;
+  const sortedVisits = sortVisits(order, filteredVisits);
   const total = sortedVisits.length;
   const visitsGroups = splitEvery(PAGE_SIZE, sortedVisits);
 
@@ -52,23 +58,24 @@ const VisitsTable = ({
   setSelectedVisits,
   isSticky = false,
   matchMedia = window.matchMedia,
-}) => {
+}: VisitsTableProps) => {
   const headerCellsClass = classNames('visits-table__header-cell', {
     'visits-table__sticky': isSticky,
   });
   const matchMobile = () => matchMedia('(max-width: 767px)').matches;
 
   const [ isMobileDevice, setIsMobileDevice ] = useState(matchMobile());
-  const [ searchTerm, setSearchTerm ] = useState(undefined);
-  const [ order, setOrder ] = useState({ field: undefined, dir: undefined });
+  const [ searchTerm, setSearchTerm ] = useState<string | undefined>(undefined);
+  const [ order, setOrder ] = useState<Order>({ field: undefined, dir: undefined });
   const resultSet = useMemo(() => calculateVisits(visits, searchTerm, order), [ searchTerm, order ]);
 
   const [ page, setPage ] = useState(1);
   const end = page * PAGE_SIZE;
   const start = end - PAGE_SIZE;
 
-  const orderByColumn = (field) => () => setOrder({ field, dir: determineOrderDir(field, order.field, order.dir) });
-  const renderOrderIcon = (field) => order.dir && order.field === field && (
+  const orderByColumn = (field: OrderableFields) =>
+    () => setOrder({ field, dir: determineOrderDir(field, order.field, order.dir) });
+  const renderOrderIcon = (field: OrderableFields) => order.dir && order.field === field && (
     <FontAwesomeIcon
       icon={order.dir === 'ASC' ? caretUpIcon : caretDownIcon}
       className="visits-table__header-icon"
@@ -201,6 +208,4 @@ const VisitsTable = ({
   );
 };
 
-VisitsTable.propTypes = propTypes;
-
 export default VisitsTable;

src/visits/helpers/LineChartCard.tsx

@@ -12,7 +12,7 @@ import { Line } from 'react-chartjs-2';
 import { always, cond, reverse } from 'ramda';
 import moment from 'moment';
 import { ChartData, ChartDataSets } from 'chart.js';
-import { Stats, Visit } from '../types';
+import { NormalizedVisit, Stats, Visit } from '../types';
 import { fillTheGaps } from '../../utils/helpers/visits';
 import { useToggle } from '../../utils/helpers/hooks';
 import { rangeOf } from '../../utils/utils';
@@ -23,7 +23,7 @@ interface LineChartCardProps {
   title: string;
   highlightedLabel?: string;
   visits: Visit[];
-  highlightedVisits: Visit[];
+  highlightedVisits: NormalizedVisit[];
 }
 
 type Step = 'monthly' | 'weekly' | 'daily' | 'hourly';
@@ -66,13 +66,16 @@ const determineInitialStep = (oldestVisitDate: string): Step => {
   return matcher() ?? 'monthly';
 };
 
-const groupVisitsByStep = (step: Step, visits: Visit[]): Stats => visits.reduce<Stats>((acc, visit) => {
-  const key = STEP_TO_DATE_FORMAT[step](visit.date);
+const groupVisitsByStep = (step: Step, visits: (Visit | NormalizedVisit)[]): Stats => visits.reduce<Stats>(
+  (acc, visit) => {
+    const key = STEP_TO_DATE_FORMAT[step](visit.date);
 
-  acc[key] = acc[key] ? acc[key] + 1 : 1;
+    acc[key] = acc[key] ? acc[key] + 1 : 1;
 
-  return acc;
-}, {});
+    return acc;
+  },
+  {},
+);
 
 const generateLabels = (step: Step, visits: Visit[]): string[] => {
   const unit = STEP_TO_DATE_UNIT_MAP[step];

src/visits/services/VisitsParser.ts

@@ -77,3 +77,8 @@ export const normalizeVisits = map(({ userAgent, date, referer, visitLocation }:
   latitude: visitLocation?.latitude,
   longitude: visitLocation?.longitude,
 }));
+
+export interface VisitsParser {
+  processStatsFromVisits: (normalizedVisits: NormalizedVisit[]) => VisitsStats;
+  normalizeVisits: (visits: Visit[]) => NormalizedVisit[];
+}

src/visits/services/provideServices.ts

@@ -3,7 +3,6 @@ import ShortUrlVisits from '../ShortUrlVisits';
 import { cancelGetShortUrlVisits, getShortUrlVisits } from '../reducers/shortUrlVisits';
 import { getShortUrlDetail } from '../reducers/shortUrlDetail';
 import MapModal from '../helpers/MapModal';
-import VisitsStats from '../VisitsStats';
 import { createNewVisit } from '../reducers/visitCreation';
 import { cancelGetTagVisits, getTagVisits } from '../reducers/tagVisits';
 import TagVisits from '../TagVisits';
@@ -13,13 +12,12 @@ import * as visitsParser from './VisitsParser';
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
   bottle.serviceFactory('MapModal', () => MapModal);
-  bottle.serviceFactory('VisitsStats', VisitsStats, 'VisitsParser');
-  bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsStats');
+  bottle.serviceFactory('ShortUrlVisits', () => ShortUrlVisits);
   bottle.decorator('ShortUrlVisits', connect(
     [ 'shortUrlVisits', 'shortUrlDetail', 'mercureInfo' ],
     [ 'getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits', 'createNewVisit', 'loadMercureInfo' ],
   ));
-  bottle.serviceFactory('TagVisits', TagVisits, 'VisitsStats', 'ColorGenerator');
+  bottle.serviceFactory('TagVisits', TagVisits, 'ColorGenerator');
   bottle.decorator('TagVisits', connect(
     [ 'tagVisits', 'mercureInfo' ],
     [ 'getTagVisits', 'cancelGetTagVisits', 'createNewVisit', 'loadMercureInfo' ],

src/visits/types/index.ts

@@ -1,33 +1,6 @@
-import PropTypes from 'prop-types';
 import { Action } from 'redux';
 import { ShortUrl } from '../../short-urls/data';
 
-/** @deprecated Use Visit interface instead */
-export const VisitType = PropTypes.shape({
-  referer: PropTypes.string,
-  date: PropTypes.string,
-  userAgent: PropTypes.string,
-  visitLocation: PropTypes.shape({
-    countryCode: PropTypes.string,
-    countryName: PropTypes.string,
-    regionName: PropTypes.string,
-    cityName: PropTypes.string,
-    latitude: PropTypes.number,
-    longitude: PropTypes.number,
-    timezone: PropTypes.string,
-    isEmpty: PropTypes.bool,
-  }),
-});
-
-/** @deprecated Use VisitsInfo interface instead */
-export const VisitsInfoType = PropTypes.shape({
-  visits: PropTypes.arrayOf(VisitType),
-  loading: PropTypes.bool,
-  loadingLarge: PropTypes.bool,
-  error: PropTypes.bool,
-  progress: PropTypes.number,
-});
-
 export interface VisitsInfo {
   visits: Visit[];
   loading: boolean;