#325 Updated to react 17

.eslintrc

@@ -23,6 +23,7 @@
     }],
     "no-mixed-operators": "off",
     "react/display-name": "off",
+    "react/react-in-jsx-scope": "off",
     "@typescript-eslint/require-array-sort-compare": "off"
   }
 }

.github/workflows/docker-image-build.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Login to docker hub
         uses: docker/login-action@v1
         with:
-          username: ${{ secrets.DOCKER_USERNAME }}
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
+          password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}
       - name: Build the image
         run: bash ./scripts/docker/build

config/setupEnzyme.js

@@ -1,4 +1,4 @@
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 Enzyme.configure({ adapter: new Adapter() });

package.json

@@ -43,13 +43,13 @@
     "promise": "^8.0.3",
     "qs": "^6.9.4",
     "ramda": "^0.27.1",
-    "react": "^16.13.1",
+    "react": "^17.0.1",
     "react-autosuggest": "^10.0.2",
     "react-chartjs-2": "^2.10.0",
     "react-color": "^2.18.1",
     "react-copy-to-clipboard": "^5.0.2",
     "react-datepicker": "~1.5.0",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.1",
     "react-external-link": "^1.1.1",
     "react-leaflet": "^2.7.0",
     "react-moment": "^0.9.7",
@@ -64,13 +64,13 @@
     "uuid": "^3.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
+    "@babel/core": "^7.12.3",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.12.1",
     "@shlinkio/eslint-config-js-coding-standard": "~1.1.0",
     "@stryker-mutator/core": "^3.2.4",
-    "@stryker-mutator/typescript": "^3.2.4",
     "@stryker-mutator/jest-runner": "^3.2.4",
+    "@stryker-mutator/typescript": "^3.2.4",
     "@svgr/webpack": "^4.3.3",
     "@types/chart.js": "^2.9.24",
     "@types/classnames": "^2.2.10",
@@ -80,25 +80,26 @@
     "@types/moment": "^2.13.0",
     "@types/qs": "^6.9.4",
     "@types/ramda": "^0.27.14",
-    "@types/react": "^16.9.46",
+    "@types/react": "^16.9.56",
     "@types/react-autosuggest": "^10.0.0",
     "@types/react-color": "^2.17.4",
     "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-datepicker": "~1.8.0",
-    "@types/react-dom": "^16.9.8",
+    "@types/react-dom": "^16.9.9",
     "@types/react-leaflet": "^2.5.2",
     "@types/react-redux": "^7.1.9",
     "@types/react-router-dom": "^5.1.5",
     "@types/react-tagsinput": "^3.19.7",
     "@types/reactstrap": "^8.5.1",
     "@types/uuid": "^8.3.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.3.1",
     "adm-zip": "^0.4.13",
     "autoprefixer": "^9.6.3",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^26.3.0",
-    "babel-loader": "^8.0.6",
+    "babel-loader": "^8.2.1",
     "babel-plugin-named-asset-import": "^0.3.4",
-    "babel-preset-react-app": "^9.0.2",
+    "babel-preset-react-app": "^10.0.0",
     "babel-runtime": "^6.26.0",
     "bfj": "^7.0.1",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
@@ -108,7 +109,6 @@
     "dotenv": "^8.1.0",
     "dotenv-expand": "^5.1.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.8.0",
     "eslint-loader": "^3.0.2",
     "file-loader": "^4.2.0",
@@ -157,7 +157,12 @@
   },
   "babel": {
     "presets": [
-      "react-app"
+      [
+        "react-app",
+        {
+          "runtime": "automatic"
+        }
+      ]
     ],
     "plugins": [
       "@babel/plugin-proposal-optional-chaining",

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 (

test/App.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Route } from 'react-router-dom';
 import { identity } from 'ramda';

test/common/AsideMenu.test.tsx

@@ -1,5 +1,4 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import React from 'react';
 import { Mock } from 'ts-mockery';
 import asideMenuCreator from '../../src/common/AsideMenu';
 import { ServerWithId } from '../../src/servers/data';

test/common/ErrorHandler.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Button } from 'reactstrap';
 import { Mock } from 'ts-mockery';

test/common/Home.test.tsx

@@ -1,5 +1,4 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import React from 'react';
 import { Mock } from 'ts-mockery';
 import Home, { HomeProps } from '../../src/common/Home';
 import { ServerWithId } from '../../src/servers/data';

test/common/NotFound.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Link } from 'react-router-dom';
 import NotFound from '../../src/common/NotFound';

test/common/ScrollToTop.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import { RouteComponentProps } from 'react-router';

test/common/ShlinkVersions.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import ShlinkVersions, { ShlinkVersionsProps } from '../../src/common/ShlinkVersions';

test/common/SimplePaginator.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { identity } from 'ramda';
 import { PaginationItem } from 'reactstrap';
@@ -8,7 +7,6 @@ import { ELLIPSIS } from '../../src/utils/helpers/pagination';
 describe('<SimplePaginator />', () => {
   let wrapper: ShallowWrapper;
   const createWrapper = (pagesCount: number, currentPage = 1) => {
-    // @ts-expect-error
     wrapper = shallow(<SimplePaginator pagesCount={pagesCount} currentPage={currentPage} setCurrentPage={identity} />);
 
     return wrapper;

test/servers/CreateServer.test.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
-import { identity } from 'ramda';
 import { Mock } from 'ts-mockery';
 import { History } from 'history';
 import createServerConstruct from '../../src/servers/CreateServer';
@@ -18,9 +16,7 @@ describe('<CreateServer />', () => {
       .mockReturnValueOnce([ importFailed, () => '' ]);
     const CreateServer = createServerConstruct(ImportServersBtn, useStateFlagTimeout);
 
-    wrapper = shallow(
+    wrapper = shallow(<CreateServer createServer={createServerMock} history={historyMock} />);
-      <CreateServer createServer={createServerMock} resetSelectedServer={identity} history={historyMock} />,
-    );
 
     return wrapper;
   };

test/servers/DeleteServerButton.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import deleteServerButtonConstruct from '../../src/servers/DeleteServerButton';

test/servers/DeleteServerModal.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { History } from 'history';

test/servers/EditServer.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import { History, Location } from 'history';

test/servers/ServersDropdown.test.tsx

@@ -1,6 +1,6 @@
 import { values } from 'ramda';
 import { Mock } from 'ts-mockery';
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { DropdownItem, DropdownToggle } from 'reactstrap';
 import serversDropdownCreator, { ServersDropdownProps } from '../../src/servers/ServersDropdown';

test/servers/ServersListGroup.test.tsx

@@ -1,5 +1,4 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import React from 'react';
 import { ListGroup } from 'reactstrap';
 import { Mock } from 'ts-mockery';
 import ServersListGroup from '../../src/servers/ServersListGroup';

test/servers/helpers/ForServerVersion.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import ForServerVersion from '../../../src/servers/helpers/ForServerVersion';

test/servers/helpers/ImportServersBtn.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { UncontrolledTooltip } from 'reactstrap';
 import { Mock } from 'ts-mockery';

test/servers/helpers/ServerError.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { BrowserRouter } from 'react-router-dom';
 import { Mock } from 'ts-mockery';

test/servers/helpers/ServerForm.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { ServerForm } from '../../../src/servers/helpers/ServerForm';
 import { HorizontalFormGroup } from '../../../src/utils/HorizontalFormGroup';

test/short-urls/CreateShortUrl.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import moment from 'moment';
 import { identity } from 'ramda';

test/short-urls/Paginator.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { PaginationItem } from 'reactstrap';
 import Paginator from '../../src/short-urls/Paginator';

test/short-urls/SearchBar.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import searchBarCreator from '../../src/short-urls/SearchBar';