#325 Updated to react 17

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, FC } from 'react';
+import { useEffect, FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import NotFound from './common/NotFound';
 import { ServersMap } from './servers/data';

src/common/AsideMenu.tsx

@@ -5,7 +5,7 @@ import {
   faPen as editIcon,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { NavLink, NavLinkProps } from 'react-router-dom';
 import classNames from 'classnames';
 import { Location } from 'history';

src/common/ErrorHandler.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { Component, ReactNode } from 'react';
 import { Button } from 'reactstrap';
 import './ErrorHandler.scss';
 
@@ -9,7 +9,7 @@ interface ErrorHandlerState {
 const ErrorHandler = (
   { location }: Window,
   { error }: Console,
-) => class ErrorHandler extends React.Component<any, ErrorHandlerState> {
+) => class ErrorHandler extends Component<any, ErrorHandlerState> {
   public constructor(props: object) {
     super(props);
     this.state = { hasError: false };

src/common/Home.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { isEmpty, values } from 'ramda';
 import { Link } from 'react-router-dom';
 import ServersListGroup from '../servers/ServersListGroup';

src/common/MainHeader.tsx

@@ -1,6 +1,6 @@
 import { faPlus as plusIcon, faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { FC, useEffect } from 'react';
+import { FC, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
 import classNames from 'classnames';

src/common/MenuLayout.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import { FC, useEffect } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { EventData, Swipeable } from 'react-swipeable';
 import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
@@ -46,7 +46,7 @@ const MenuLayout = (
   };
 
   return (
-    <React.Fragment>
+    <>
       <FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
 
       <Swipeable
@@ -73,7 +73,7 @@ const MenuLayout = (
           </div>
         </div>
       </Swipeable>
-    </React.Fragment>
+    </>
   );
 }, ServerError);
 

src/common/NoMenuLayout.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import './NoMenuLayout.scss';
 
 const NoMenuLayout: FC = ({ children }) => <div className="no-menu-wrapper">{children}</div>;

src/common/NotFound.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { Link } from 'react-router-dom';
 
 interface NotFoundProps {

src/common/ScrollToTop.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router';
 
 const ScrollToTop = () => ({ location, children }: PropsWithChildren<RouteComponentProps>) => {
@@ -6,7 +6,7 @@ const ScrollToTop = () => ({ location, children }: PropsWithChildren<RouteCompon
     scrollTo(0, 0);
   }, [ location ]);
 
-  return <React.Fragment>{children}</React.Fragment>;
+  return <>{children}</>;
 };
 
 export default ScrollToTop;

src/common/ShlinkVersions.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classNames from 'classnames';
 import { pipe } from 'ramda';
 import { ExternalLink } from 'react-external-link';
@@ -28,7 +27,7 @@ const ShlinkVersions = (
   return (
     <small className={classNames('text-muted', className)}>
       {isReachableServer(selectedServer) &&
-        <React.Fragment>Server: <VersionLink project="shlink" version={selectedServer.printableVersion} /> - </React.Fragment>
+        <>Server: <VersionLink project="shlink" version={selectedServer.printableVersion} /> - </>
       }
       Client: <VersionLink project="shlink-web-client" version={normalizedClientVersion} />
     </small>

src/common/SimplePaginator.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import classNames from 'classnames';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 import {

src/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';

src/mercure/helpers/boundToMercureHub.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import { FC, useEffect } from 'react';
 import { pipe } from 'ramda';
 import { CreateVisit } from '../../visits/types';
 import { MercureInfo } from '../reducers/mercureInfo';

src/servers/CreateServer.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { v4 as uuid } from 'uuid';
 import { RouterProps } from 'react-router';
 import classNames from 'classnames';

src/servers/DeleteServerButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useToggle } from '../utils/helpers/hooks';
@@ -17,14 +17,14 @@ const DeleteServerButton = (DeleteServerModal: FC<DeleteServerModalProps>): FC<D
   const [ isModalOpen, , showModal, hideModal ] = useToggle();
 
   return (
-    <React.Fragment>
+    <>
       <span className={className} onClick={showModal}>
         {!children && <FontAwesomeIcon icon={deleteIcon} />}
         <span className={textClassName}>{children ?? 'Remove this server'}</span>
       </span>
 
       <DeleteServerModal server={server} isOpen={isModalOpen} toggle={hideModal} />
-    </React.Fragment>
+    </>
   );
 };
 

src/servers/DeleteServerModal.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { RouterProps } from 'react-router';
 import { ServerWithId } from './data';

src/servers/EditServer.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { Button } from 'reactstrap';
 import NoMenuLayout from '../common/NoMenuLayout';
 import { ServerForm } from './helpers/ServerForm';

src/servers/ServersDropdown.tsx

@@ -1,5 +1,4 @@
 import { isEmpty, values } from 'ramda';
-import React from 'react';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 import { Link } from 'react-router-dom';
 import ServersExporter from './services/ServersExporter';
@@ -19,7 +18,7 @@ const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, select
     }
 
     return (
-      <React.Fragment>
+      <>
         {serversList.map(({ name, id }) => (
           <DropdownItem
             key={id}
@@ -34,7 +33,7 @@ const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, select
         <DropdownItem className="servers-dropdown__export-item" onClick={async () => serversExporter.exportServers()}>
           Export servers
         </DropdownItem>
-      </React.Fragment>
+      </>
     );
   };
 

src/servers/ServersListGroup.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { ListGroup, ListGroupItem } from 'reactstrap';
 import { Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons';
-import './ServersListGroup.scss';
 import { ServerWithId } from './data';
+import './ServersListGroup.scss';
 
 interface ServersListGroup {
   servers: ServerWithId[];
@@ -18,7 +18,7 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => (
 );
 
 const ServersListGroup: FC<ServersListGroup> = ({ servers, children }) => (
-  <React.Fragment>
+  <>
     <div className="container">
       <h5>{children}</h5>
     </div>
@@ -27,7 +27,7 @@ const ServersListGroup: FC<ServersListGroup> = ({ servers, children }) => (
         {servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}
       </ListGroup>
     )}
-  </React.Fragment>
+  </>
 );
 
 export default ServersListGroup;

src/servers/helpers/ForServerVersion.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { versionMatch, Versions } from '../../utils/helpers/version';
 import { isReachableServer, SelectedServer } from '../data';
 
@@ -18,7 +18,7 @@ const ForServerVersion: FC<ForServerVersionProps> = ({ minVersion, maxVersion, s
     return null;
   }
 
-  return <React.Fragment>{children}</React.Fragment>;
+  return <>{children}</>;
 };
 
 export default ForServerVersion;

src/servers/helpers/ImportServersBtn.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, RefObject, ChangeEvent, MutableRefObject } from 'react';
+import { useRef, RefObject, ChangeEvent, MutableRefObject } from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
 import ServersImporter from '../services/ServersImporter';
 import { ServerData } from '../data';
@@ -33,7 +33,7 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({
       .catch(onImportError);
 
   return (
-    <React.Fragment>
+    <>
       <button
         type="button"
         className="btn btn-outline-secondary mr-2"
@@ -47,7 +47,7 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({
       </UncontrolledTooltip>
 
       <input type="file" accept="text/csv" className="create-server__csv-select" ref={ref} onChange={onChange} />
-    </React.Fragment>
+    </>
   );
 };
 

src/servers/helpers/ServerError.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { Link } from 'react-router-dom';
 import Message from '../../utils/Message';
 import ServersListGroup from '../ServersListGroup';
@@ -19,10 +19,10 @@ export const ServerError = (DeleteServerButton: FC<DeleteServerButtonProps>): FC
       <Message type="error">
         {!isServerWithId(selectedServer) && 'Could not find this Shlink server.'}
         {isServerWithId(selectedServer) && (
-          <React.Fragment>
+          <>
             <p>Oops! Could not connect to this Shlink server.</p>
             Make sure you have internet connection, and the server is properly configured and on-line.
-          </React.Fragment>
+          </>
         )}
       </Message>
     </div>

src/servers/helpers/ServerForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { HorizontalFormGroup } from '../../utils/HorizontalFormGroup';
 import { handleEventPreventingDefault } from '../../utils/utils';
 import { ServerData } from '../data';

src/servers/helpers/withSelectedServer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import { FC, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router';
 import Message from '../../utils/Message';
 import { isNotFoundServer, SelectedServer } from '../data';

src/servers/helpers/withoutSelectedServer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import { FC, useEffect } from 'react';
 
 interface WithoutSelectedServerProps {
   resetSelectedServer: Function;

src/settings/RealTimeUpdates.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Card, CardBody, CardHeader, FormGroup, Input } from 'reactstrap';
 import classNames from 'classnames';
 import ToggleSwitch from '../utils/ToggleSwitch';

src/settings/Settings.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import NoMenuLayout from '../common/NoMenuLayout';
 
 const Settings = (RealTimeUpdates: FC) => () => (

src/short-urls/CreateShortUrl.tsx

@@ -1,7 +1,7 @@
 import { faAngleDoubleDown as downIcon, faAngleDoubleUp as upIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isEmpty, pipe, replace, trim } from 'ramda';
-import React, { FC, useState } from 'react';
+import { FC, useState } from 'react';
 import { Collapse, FormGroup, Input } from 'reactstrap';
 import { InputType } from 'reactstrap/lib/Input';
 import * as m from 'moment';

src/short-urls/Paginator.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 import { pageIsEllipsis, keyForPage, progressivePagination, prettifyPageNumber } from '../utils/helpers/pagination';

src/short-urls/SearchBar.tsx

@@ -1,6 +1,6 @@
 import { faTags as tagsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { isEmpty, pipe } from 'ramda';
 import moment from 'moment';
 import SearchField from '../utils/SearchField';

src/short-urls/ShortUrls.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { ShlinkShortUrlsResponse } from '../utils/services/types';
 import Paginator from './Paginator';
 import { ShortUrlsListProps, WithList } from './ShortUrlsList';
@@ -20,13 +20,13 @@ const ShortUrls = (SearchBar: FC, ShortUrlsList: FC<ShortUrlsListProps & WithLis
   }, [ serverId, page ]);
 
   return (
-    <React.Fragment>
+    <>
       <div className="form-group"><SearchBar /></div>
       <div>
         <ShortUrlsList {...props} shortUrlsList={data} key={urlsListKey} />
         <Paginator paginator={pagination} serverId={serverId} />
       </div>
-    </React.Fragment>
+    </>
   );
 };
 

src/short-urls/ShortUrlsList.tsx

@@ -1,7 +1,7 @@
 import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { head, isEmpty, keys, values } from 'ramda';
-import React, { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import qs from 'qs';
 import { RouteComponentProps } from 'react-router';
 import SortingDropdown from '../utils/SortingDropdown';
@@ -107,7 +107,7 @@ const ShortUrlsList = (ShortUrlsRow: FC<ShortUrlsRowProps>) => boundToMercureHub
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <div className="d-block d-md-none mb-3">
         <SortingDropdown
           items={SORTABLE_FIELDS}
@@ -154,7 +154,7 @@ const ShortUrlsList = (ShortUrlsRow: FC<ShortUrlsRowProps>) => boundToMercureHub
           {renderShortUrls()}
         </tbody>
       </table>
-    </React.Fragment>
+    </>
   );
 }, () => 'https://shlink.io/new-visit');
 

src/short-urls/UseExistingIfFoundInfoIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
@@ -41,12 +40,12 @@ const UseExistingIfFoundInfoIcon = () => {
   const [ isModalOpen, toggleModal ] = useToggle();
 
   return (
-    <React.Fragment>
+    <>
       <span title="What does this mean?">
         <FontAwesomeIcon icon={infoIcon} style={{ cursor: 'pointer' }} onClick={toggleModal} />
       </span>
       <InfoModal isOpen={isModalOpen} toggle={toggleModal} />
-    </React.Fragment>
+    </>
   );
 };
 

src/short-urls/helpers/CreateShortUrlResult.tsx

@@ -1,7 +1,7 @@
 import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isNil } from 'ramda';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { Card, CardBody, Tooltip } from 'reactstrap';
 import { ShortUrlCreation } from '../reducers/shortUrlCreation';

src/short-urls/helpers/DeleteShortUrlModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { identity, pipe } from 'ramda';
 import { ShortUrlDeletion } from '../reducers/shortUrlDeletion';

src/short-urls/helpers/EditMetaModal.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, UncontrolledTooltip } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';

src/short-urls/helpers/EditShortUrlModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, Button } from 'reactstrap';
 import { ExternalLink } from 'react-external-link';
 import { ShortUrlEdition } from '../reducers/shortUrlEdition';

src/short-urls/helpers/EditTagsModal.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { ExternalLink } from 'react-external-link';
 import { ShortUrlTags } from '../reducers/shortUrlTags';

src/short-urls/helpers/PreviewModal.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
 import { ExternalLink } from 'react-external-link';
 import { ShortUrlModalProps } from '../data';

src/short-urls/helpers/QrCodeModal.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
 import { ExternalLink } from 'react-external-link';
 import { ShortUrlModalProps } from '../data';

src/short-urls/helpers/ShortUrlVisitsCount.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { UncontrolledTooltip } from 'reactstrap';
@@ -32,7 +32,7 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f
   const tooltipRef = useRef<HTMLElement | null>();
 
   return (
-    <React.Fragment>
+    <>
       <span className="indivisible">
         {visitsLink}
         <small
@@ -50,7 +50,7 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f
       <UncontrolledTooltip target={(() => tooltipRef.current) as any} placement="bottom">
         This short URL will not accept more than <b>{prettifiedMaxVisits}</b> visits.
       </UncontrolledTooltip>
-    </React.Fragment>
+    </>
   );
 };
 

src/short-urls/helpers/ShortUrlsRow.tsx

@@ -1,5 +1,5 @@
 import { isEmpty } from 'ramda';
-import React, { FC, useEffect, useRef } from 'react';
+import { FC, useEffect, useRef } from 'react';
 import Moment from 'react-moment';
 import { ExternalLink } from 'react-external-link';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

src/short-urls/helpers/ShortUrlsRowMenu.tsx

@@ -9,7 +9,7 @@ import {
   faLink as linkIcon,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
 import { useToggle } from '../../utils/helpers/hooks';
 import { ShortUrl, ShortUrlModalProps } from '../data';

src/short-urls/helpers/VisitStatsLink.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { Link } from 'react-router-dom';
 import { isServerWithId, SelectedServer, ServerWithId } from '../../servers/data';
 import { ShortUrl } from '../data';

src/tags/TagCard.tsx

@@ -1,7 +1,7 @@
 import { Card, CardHeader, CardBody, Button, Collapse } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash as deleteIcon, faPencilAlt as editIcon, faLink, faEye } from '@fortawesome/free-solid-svg-icons';
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { Link } from 'react-router-dom';
 import { prettify } from '../utils/helpers/numbers';
 import { useToggle } from '../utils/helpers/hooks';

src/tags/TagsList.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { splitEvery } from 'ramda';
 import Message from '../utils/Message';
 import SearchField from '../utils/SearchField';
@@ -48,7 +48,7 @@ const TagsList = (TagCard: FC<TagCardProps>) => boundToMercureHub((
     const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);
 
     return (
-      <React.Fragment>
+      <>
         {tagsGroups.map((group, index) => (
           <div key={index} className="col-md-6 col-xl-3">
             {group.map((tag) => (
@@ -63,17 +63,17 @@ const TagsList = (TagCard: FC<TagCardProps>) => boundToMercureHub((
             ))}
           </div>
         ))}
-      </React.Fragment>
+      </>
     );
   };
 
   return (
-    <React.Fragment>
+    <>
       {!tagsList.loading && <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />}
       <div className="row">
         {renderContent()}
       </div>
-    </React.Fragment>
+    </>
   );
 }, () => 'https://shlink.io/new-visit');
 

src/tags/helpers/DeleteTagConfirmModal.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { TagDeletion } from '../reducers/tagDelete';
 import { TagModalProps } from '../data';

src/tags/helpers/EditTagModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
 import { ChromePicker } from 'react-color';
 import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons';

src/tags/helpers/Tag.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import ColorGenerator from '../../utils/services/ColorGenerator';
 import './Tag.scss';
 

src/tags/helpers/TagBullet.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ColorGenerator from '../../utils/services/ColorGenerator';
 import './TagBullet.scss';
 

src/tags/helpers/TagsSelector.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useEffect } from 'react';
+import { ChangeEvent, useEffect } from 'react';
 import TagsInput, { RenderInputProps, RenderTagProps } from 'react-tagsinput';
 import Autosuggest, { ChangeEvent as AutoChangeEvent, SuggestionSelectedEventData } from 'react-autosuggest';
 import ColorGenerator from '../../utils/services/ColorGenerator';
@@ -50,10 +50,10 @@ const TagsSelector = (colorGenerator: ColorGenerator) => (
         shouldRenderSuggestions={(value: string) => value.trim().length > 0}
         getSuggestionValue={(suggestion) => suggestion}
         renderSuggestion={(suggestion) => (
-          <React.Fragment>
+          <>
             <TagBullet tag={suggestion} colorGenerator={colorGenerator} />
             {suggestion}
-          </React.Fragment>
+          </>
         )}
         onSuggestionsFetchRequested={() => {}}
         onSuggestionsClearRequested={() => {}}

src/utils/BooleanControl.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FC } from 'react';
+import { ChangeEvent, FC } from 'react';
 import classNames from 'classnames';
 import { v4 as uuid } from 'uuid';
 import { identity } from 'ramda';

src/utils/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import BooleanControl, { BooleanControlProps } from './BooleanControl';
 
 const Checkbox: FC<BooleanControlProps> = (props) => <BooleanControl type="checkbox" {...props} />;

src/utils/DateInput.tsx

@@ -1,4 +1,4 @@
-import React, { Component, RefObject } from 'react';
+import { Component, RefObject, createRef } from 'react';
 import { isNil } from 'ramda';
 import DatePicker, { ReactDatePickerProps } from 'react-datepicker';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -11,7 +11,7 @@ export interface DateInputProps extends ReactDatePickerProps {
 }
 
 const DateInput = (props: DateInputProps) => {
-  const { className, isClearable, selected, ref = React.createRef() } = props;
+  const { className, isClearable, selected, ref = createRef() } = props;
   const showCalendarIcon = !isClearable || isNil(selected);
 
   return (

src/utils/DateRangeRow.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import moment from 'moment';
 import DateInput from './DateInput';
 import './DateRangeRow.scss';

src/utils/HorizontalFormGroup.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { v4 as uuid } from 'uuid';
 import { InputType } from 'reactstrap/lib/Input';
 

src/utils/Message.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { Card } from 'reactstrap';
 import classNames from 'classnames';
 import { faCircleNotch as preloader } from '@fortawesome/free-solid-svg-icons';

src/utils/PaginationDropdown.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 
 interface PaginationDropdownProps {

src/utils/SearchField.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch as searchIcon } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';

src/utils/SortingDropdown.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { toPairs } from 'ramda';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

src/utils/ToggleSwitch.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import BooleanControl, { BooleanControlProps } from './BooleanControl';
 
 const ToggleSwitch: FC<BooleanControlProps> = (props) => <BooleanControl type="switch" {...props} />;

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 (