diff --git a/package-lock.json b/package-lock.json index f1535a30..0cb292a7 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e84df9f7..d7fc43da 100644 --- a/package.json +++ b/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", diff --git a/src/servers/CreateServer.js b/src/servers/CreateServer.js deleted file mode 100644 index 91e11862..00000000 --- a/src/servers/CreateServer.js +++ /dev/null @@ -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 ( - - - - Create server - - - {serversImported && ( - - - - Servers properly imported. You can now select one from the list :) - - - - )} - - ); - }; - - CreateServerComp.propTypes = propTypes; - - return CreateServerComp; -}; - -export default CreateServer; diff --git a/src/servers/CreateServer.tsx b/src/servers/CreateServer.tsx new file mode 100644 index 00000000..2dff13d8 --- /dev/null +++ b/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, 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 ( + + + + Create server + + + {serversImported && ( + + + + Servers properly imported. You can now select one from the list :) + + + + )} + + ); +}; + +export default CreateServer; diff --git a/src/servers/data/index.ts b/src/servers/data/index.ts index 5d699c39..448ab6c6 100644 --- a/src/servers/data/index.ts +++ b/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 { diff --git a/src/servers/helpers/ImportServersBtn.tsx b/src/servers/helpers/ImportServersBtn.tsx index e77d69d2..53e448b7 100644 --- a/src/servers/helpers/ImportServersBtn.tsx +++ b/src/servers/helpers/ImportServersBtn.tsx @@ -5,14 +5,17 @@ import { Server } from '../data'; type Ref = RefObject | MutableRefObject; -interface ImportServersBtnProps { - createServers: (servers: Server[]) => void; - fileRef: Ref; +export interface ImportServersBtnProps { onImport?: () => void; } +interface ImportServersBtnConnectProps { + createServers: (servers: Server[]) => void; + fileRef: Ref; +} + const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ( - { createServers, fileRef, onImport = () => {} }: ImportServersBtnProps, + { createServers, fileRef, onImport = () => {} }: ImportServersBtnConnectProps & ImportServersBtnProps, ) => { const ref = fileRef ?? useRef(); const onChange = async ({ target }: ChangeEvent) => diff --git a/test/servers/CreateServer.test.js b/test/servers/CreateServer.test.tsx similarity index 79% rename from test/servers/CreateServer.test.js rename to test/servers/CreateServer.test.tsx index 98863b2f..4d7b46ed 100644 --- a/test/servers/CreateServer.test.js +++ b/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('', () => { - let wrapper; - const ImportServersBtn = () => ''; + let wrapper: ShallowWrapper; + const ImportServersBtn = () => null; const createServerMock = jest.fn(); - const historyMock = { - push: jest.fn(), - }; + const push = jest.fn(); + const historyMock = Mock.of({ push }); const createWrapper = (serversImported = false) => { const CreateServer = createServerConstruct(ImportServersBtn, () => [ serversImported, () => '' ]); @@ -23,7 +24,7 @@ describe('', () => { afterEach(() => { jest.resetAllMocks(); - wrapper && wrapper.unmount(); + wrapper?.unmount(); }); it('renders components', () => { @@ -46,6 +47,6 @@ describe('', () => { form.simulate('submit', {}); expect(createServerMock).toHaveBeenCalledTimes(1); - expect(historyMock.push).toHaveBeenCalledTimes(1); + expect(push).toHaveBeenCalledTimes(1); }); });