#325 Updated to react 17

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 {