Migrated to typescript first component getting another component with props injected

src/servers/CreateServer.js

@@ -1,57 +0,0 @@
-import React, { useEffect } from 'react';
-import { v4 as uuid } from 'uuid';
-import PropTypes from 'prop-types';
-import NoMenuLayout from '../common/NoMenuLayout';
-import { ServerForm } from './helpers/ServerForm';
-import './CreateServer.scss';
-
-const SHOW_IMPORT_MSG_TIME = 4000;
-const propTypes = {
-  createServer: PropTypes.func,
-  history: PropTypes.shape({
-    push: PropTypes.func,
-  }),
-  resetSelectedServer: PropTypes.func,
-};
-
-const CreateServer = (ImportServersBtn, useStateFlagTimeout) => {
-  const CreateServerComp = ({ createServer, history: { push }, resetSelectedServer }) => {
-    const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
-    const handleSubmit = (serverData) => {
-      const id = uuid();
-      const server = { id, ...serverData };
-
-      createServer(server);
-      push(`/server/${id}/list-short-urls/1`);
-    };
-
-    useEffect(() => {
-      resetSelectedServer();
-    }, []);
-
-    return (
-      <NoMenuLayout>
-        <ServerForm onSubmit={handleSubmit}>
-          <ImportServersBtn onImport={setServersImported} />
-          <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>
-        )}
-      </NoMenuLayout>
-    );
-  };
-
-  CreateServerComp.propTypes = propTypes;
-
-  return CreateServerComp;
-};
-
-export default CreateServer;

src/servers/CreateServer.tsx

@@ -0,0 +1,52 @@
+import React, { FC, useEffect } from 'react';
+import { v4 as uuid } from 'uuid';
+import { RouterProps } from 'react-router';
+import NoMenuLayout from '../common/NoMenuLayout';
+import { ServerForm } from './helpers/ServerForm';
+import { ImportServersBtnProps } from './helpers/ImportServersBtn';
+import { NewServerData, RegularServer } from './data';
+import './CreateServer.scss';
+
+const SHOW_IMPORT_MSG_TIME = 4000;
+
+interface CreateServerProps extends RouterProps {
+  createServer: (server: RegularServer) => void;
+  resetSelectedServer: Function;
+}
+
+const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagTimeout: Function) => (
+  { createServer, history: { push }, resetSelectedServer }: CreateServerProps,
+) => {
+  const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
+  const handleSubmit = (serverData: NewServerData) => {
+    const id = uuid();
+
+    createServer({ ...serverData, id });
+    push(`/server/${id}/list-short-urls/1`);
+  };
+
+  useEffect(() => {
+    resetSelectedServer();
+  }, []);
+
+  return (
+    <NoMenuLayout>
+      <ServerForm onSubmit={handleSubmit}>
+        <ImportServersBtn onImport={setServersImported} />
+        <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>
+      )}
+    </NoMenuLayout>
+  );
+};
+
+export default CreateServer;

src/servers/data/index.ts

@@ -1,11 +1,14 @@
-export interface RegularServer {
-  id: string;
+export interface NewServerData {
   name: string;
   url: string;
   apiKey: string;
+}
+
+export interface RegularServer extends NewServerData {
+  id: string;
   version?: string;
   printableVersion?: string;
-  serverNotReachable?: boolean;
+  serverNotReachable?: true;
 }
 
 interface NotFoundServer {

src/servers/helpers/ImportServersBtn.tsx

@@ -5,14 +5,17 @@ import { Server } from '../data';
 
 type Ref<T> = RefObject<T> | MutableRefObject<T>;
 
-interface ImportServersBtnProps {
-  createServers: (servers: Server[]) => void;
-  fileRef: Ref<HTMLInputElement>;
+export interface ImportServersBtnProps {
   onImport?: () => void;
 }
 
+interface ImportServersBtnConnectProps {
+  createServers: (servers: Server[]) => void;
+  fileRef: Ref<HTMLInputElement>;
+}
+
 const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => (
-  { createServers, fileRef, onImport = () => {} }: ImportServersBtnProps,
+  { createServers, fileRef, onImport = () => {} }: ImportServersBtnConnectProps & ImportServersBtnProps,
 ) => {
   const ref = fileRef ?? useRef<HTMLInputElement>();
   const onChange = async ({ target }: ChangeEvent<HTMLInputElement>) =>