#325 Updated to react 17

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 (