#325 Updated to react 17

src/visits/ShortUrlVisits.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import qs from 'qs';
 import { RouteComponentProps } from 'react-router';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';

src/visits/ShortUrlVisitsHeader.tsx

@@ -1,6 +1,5 @@
 import { UncontrolledTooltip } from 'reactstrap';
 import Moment from 'react-moment';
-import React from 'react';
 import { ExternalLink } from 'react-external-link';
 import { ShortUrlDetail } from './reducers/shortUrlDetail';
 import { ShortUrlVisits } from './reducers/shortUrlVisits';
@@ -30,9 +29,9 @@ const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }: ShortU
     </span>
   );
   const visitsStatsTitle = (
-    <React.Fragment>
+    <>
       Visits for <ExternalLink href={shortLink} />
-    </React.Fragment>
+    </>
   );
 
   return (

src/visits/TagVisits.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import ColorGenerator from '../utils/services/ColorGenerator';

src/visits/TagVisitsHeader.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Tag from '../tags/helpers/Tag';
 import ColorGenerator from '../utils/services/ColorGenerator';
 import VisitsHeader from './VisitsHeader';

src/visits/VisitsHeader.tsx

@@ -1,5 +1,5 @@
 import { Button, Card } from 'reactstrap';
-import React, { FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import ShortUrlVisitsCount from '../short-urls/helpers/ShortUrlVisitsCount';

src/visits/VisitsStats.tsx

@@ -1,5 +1,5 @@
 import { isEmpty, propEq, values } from 'ramda';
-import React, { useState, useEffect, useMemo, FC } from 'react';
+import { useState, useEffect, useMemo, FC } from 'react';
 import { Button, Card, Collapse, Progress } from 'reactstrap';
 import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -186,7 +186,7 @@ const VisitsStats: FC<VisitsStatsProps> = (
   };
 
   return (
-    <React.Fragment>
+    <>
       {children}
 
       <section className="mt-4">
@@ -244,7 +244,7 @@ const VisitsStats: FC<VisitsStatsProps> = (
       <section>
         {renderVisitsContent()}
       </section>
-    </React.Fragment>
+    </>
   );
 };
 

src/visits/VisitsTable.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Moment from 'react-moment';
 import classNames from 'classnames';
 import { min, splitEvery } from 'ramda';

src/visits/helpers/DefaultChart.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { Doughnut, HorizontalBar } from 'react-chartjs-2';
 import { keys, values } from 'ramda';
 import classNames from 'classnames';

src/visits/helpers/GraphCard.tsx

@@ -1,5 +1,5 @@
 import { Card, CardHeader, CardBody, CardFooter } from 'reactstrap';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import DefaultChart, { DefaultChartProps } from './DefaultChart';
 import './GraphCard.scss';
 

src/visits/helpers/LineChartCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import { useState, useMemo } from 'react';
 import {
   Card,
   CardHeader,

src/visits/helpers/MapModal.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { Modal, ModalBody } from 'reactstrap';
 import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
 import { prop } from 'ramda';

src/visits/helpers/OpenMapModalBtn.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
 import { Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap';
@@ -36,7 +36,7 @@ const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: OpenMapMo
   };
 
   return (
-    <React.Fragment>
+    <>
       <button className="btn btn-link open-map-modal-btn__btn" ref={buttonRef as any} onClick={onClick}>
         <FontAwesomeIcon icon={mapIcon} />
       </button>
@@ -48,7 +48,7 @@ const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: OpenMapMo
         </DropdownMenu>
       </Dropdown>
       <MapModal toggle={closeMap} isOpen={mapIsOpened} title={modalTitle} locations={locationsToShow} />
-    </React.Fragment>
+    </>
   );
 };
 

src/visits/helpers/SortableBarGraph.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { fromPairs, pipe, reverse, sortBy, splitEvery, toLower, toPairs, type, zipObj } from 'ramda';
 import SortingDropdown from '../../utils/SortingDropdown';
 import PaginationDropdown from '../../utils/PaginationDropdown';
@@ -94,7 +94,7 @@ const SortableBarGraph = ({
   );
   const activeCities = Object.keys(currentPageStats);
   const computeTitle = () => (
-    <React.Fragment>
+    <>
       {title}
       <div className="float-right">
         <SortingDropdown
@@ -127,7 +127,7 @@ const SortableBarGraph = ({
           {extraHeaderContent(pagination ? activeCities : undefined)}
         </div>
       )}
-    </React.Fragment>
+    </>
   );
 
   return (