Migrate CreateServer component to Typescript

src/servers/CreateServer.tsx

@@ -1,7 +1,9 @@
 import React, { FC, useEffect } from 'react';
 import { v4 as uuid } from 'uuid';
 import { RouterProps } from 'react-router';
+import classNames from 'classnames';
 import NoMenuLayout from '../common/NoMenuLayout';
+import { StateFlagTimeout } from '../utils/helpers/hooks';
 import { ServerForm } from './helpers/ServerForm';
 import { ImportServersBtnProps } from './helpers/ImportServersBtn';
 import { NewServerData, RegularServer } from './data';
@@ -14,10 +16,26 @@ interface CreateServerProps extends RouterProps {
   resetSelectedServer: Function;
 }
 
-const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagTimeout: Function) => (
+const Result: FC<{ type: 'success' | 'error' }> = ({ children, type }) => (
+  <div className="row">
+    <div className="col-md-10 offset-md-1">
+      <div
+        className={classNames('p-2 mt-3 text-white text-center', {
+          'bg-main': type === 'success',
+          'bg-danger': type === 'error',
+        })}
+      >
+        {children}
+      </div>
+    </div>
+  </div>
+);
+
+const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagTimeout: StateFlagTimeout) => (
   { createServer, history: { push }, resetSelectedServer }: CreateServerProps,
 ) => {
   const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
+  const [ errorImporting, setErrorImporting ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
   const handleSubmit = (serverData: NewServerData) => {
     const id = uuid();
 
@@ -32,19 +50,12 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
   return (
     <NoMenuLayout>
       <ServerForm onSubmit={handleSubmit}>
-        <ImportServersBtn onImport={setServersImported} />
+        <ImportServersBtn onImport={setServersImported} onImportError={setErrorImporting} />
         <button className="btn btn-outline-primary">Create server</button>
       </ServerForm>
 
-      {serversImported && (
-        <div className="row create-server__import-success-msg">
-          <div className="col-md-10 offset-md-1">
-            <div className="p-2 mt-3 bg-main text-white text-center">
-              Servers properly imported. You can now select one from the list :)
-            </div>
-          </div>
-        </div>
-      )}
+      {serversImported && <Result type="success">Servers properly imported. You can now select one from the list :)</Result>}
+      {errorImporting && <Result type="error">The servers could not be imported. Make sure the format is correct.</Result>}
     </NoMenuLayout>
   );
 };

src/servers/helpers/ImportServersBtn.tsx

@@ -7,16 +7,20 @@ type Ref<T> = RefObject<T> | MutableRefObject<T>;
 
 export interface ImportServersBtnProps {
   onImport?: () => void;
+  onImportError?: () => void;
 }
 
-interface ImportServersBtnConnectProps {
+interface ImportServersBtnConnectProps extends ImportServersBtnProps {
   createServers: (servers: Server[]) => void;
   fileRef: Ref<HTMLInputElement>;
 }
 
-const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => (
-  { createServers, fileRef, onImport = () => {} }: ImportServersBtnConnectProps & ImportServersBtnProps,
-) => {
+const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({
+  createServers,
+  fileRef,
+  onImport = () => {},
+  onImportError = () => {},
+}: ImportServersBtnConnectProps) => {
   const ref = fileRef ?? useRef<HTMLInputElement>();
   const onChange = async ({ target }: ChangeEvent<HTMLInputElement>) =>
     importServersFromFile(target.files?.[0])
@@ -25,7 +29,8 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => (
       .then(() => {
         // Reset input after processing file
         (target as { value: string | null }).value = null;
-      });
+      })
+      .catch(onImportError);
 
   return (
     <React.Fragment>

src/utils/helpers/hooks.js

@@ -1,26 +0,0 @@
-import { useState, useRef } from 'react';
-
-const DEFAULT_DELAY = 2000;
-
-export const useStateFlagTimeout = (setTimeout, clearTimeout) => (initialValue = false, delay = DEFAULT_DELAY) => {
-  const [ flag, setFlag ] = useState(initialValue);
-  const timeout = useRef(undefined);
-  const callback = () => {
-    setFlag(!initialValue);
-
-    if (timeout.current) {
-      clearTimeout(timeout.current);
-    }
-
-    timeout.current = setTimeout(() => setFlag(initialValue), delay);
-  };
-
-  return [ flag, callback ];
-};
-
-// Return [ flag, toggle, enable, disable ]
-export const useToggle = (initialValue = false) => {
-  const [ flag, setFlag ] = useState(initialValue);
-
-  return [ flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false) ];
-};

src/utils/helpers/hooks.ts

@@ -0,0 +1,32 @@
+import { useState, useRef } from 'react';
+
+const DEFAULT_DELAY = 2000;
+
+export type StateFlagTimeout = (initialValue?: boolean, delay?: number) => [ boolean, () => void ];
+
+export const useStateFlagTimeout = (
+  setTimeout: (callback: Function, timeout: number) => number,
+  clearTimeout: (timer: number) => void,
+): StateFlagTimeout => (initialValue = false, delay = DEFAULT_DELAY) => {
+  const [ flag, setFlag ] = useState<boolean>(initialValue);
+  const timeout = useRef<number | undefined>(undefined);
+  const callback = () => {
+    setFlag(!initialValue);
+
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+
+    timeout.current = setTimeout(() => setFlag(initialValue), delay);
+  };
+
+  return [ flag, callback ];
+};
+
+type ToggleResult = [ boolean, (flag: boolean) => void, () => void, () => void ];
+
+export const useToggle = (initialValue = false): ToggleResult => {
+  const [ flag, setFlag ] = useState<boolean>(initialValue);
+
+  return [ flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false) ];
+};