#325 Updated to react 17

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;