Migrated to typescript first component getting another component with props injected

package-lock.json

@@ -3432,6 +3432,12 @@
       "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==",
       "dev": true
     },
+    "@types/uuid": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.0.tgz",
+      "integrity": "sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==",
+      "dev": true
+    },
     "@types/vfile": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/vfile/-/vfile-3.0.2.tgz",

package.json

@@ -84,6 +84,7 @@
     "@types/react-redux": "^7.1.9",
     "@types/react-router-dom": "^5.1.5",
     "@types/reactstrap": "^8.5.1",
+    "@types/uuid": "^8.3.0",
     "adm-zip": "^0.4.13",
     "autoprefixer": "^9.6.3",
     "babel-core": "7.0.0-bridge.0",

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 {
+export interface NewServerData {
-  id: string;
   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 {
+export interface ImportServersBtnProps {
-  createServers: (servers: Server[]) => void;
-  fileRef: Ref<HTMLInputElement>;
   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>) =>

test/servers/CreateServer.test.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 import { identity } from 'ramda';
+import { Mock } from 'ts-mockery';
+import { History } from 'history';
 import createServerConstruct from '../../src/servers/CreateServer';
 import { ServerForm } from '../../src/servers/helpers/ServerForm';
 
 describe('<CreateServer />', () => {
-  let wrapper;
+  let wrapper: ShallowWrapper;
-  const ImportServersBtn = () => '';
+  const ImportServersBtn = () => null;
   const createServerMock = jest.fn();
-  const historyMock = {
+  const push = jest.fn();
-    push: jest.fn(),
+  const historyMock = Mock.of<History>({ push });
-  };
   const createWrapper = (serversImported = false) => {
     const CreateServer = createServerConstruct(ImportServersBtn, () => [ serversImported, () => '' ]);
 
@@ -23,7 +24,7 @@ describe('<CreateServer />', () => {
 
   afterEach(() => {
     jest.resetAllMocks();
-    wrapper && wrapper.unmount();
+    wrapper?.unmount();
   });
 
   it('renders components', () => {
@@ -46,6 +47,6 @@ describe('<CreateServer />', () => {
     form.simulate('submit', {});
 
     expect(createServerMock).toHaveBeenCalledTimes(1);
-    expect(historyMock.push).toHaveBeenCalledTimes(1);
+    expect(push).toHaveBeenCalledTimes(1);
   });
 });