Created modal to warn when creating a duplicated server

src/servers/CreateServer.tsx

@@ -1,13 +1,14 @@
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 import { RouterProps } from 'react-router';
 import { Button } from 'reactstrap';
 import { Result } from '../utils/Result';
 import { NoMenuLayout } from '../common/NoMenuLayout';
-import { StateFlagTimeout } from '../utils/helpers/hooks';
+import { StateFlagTimeout, useToggle } from '../utils/helpers/hooks';
 import { ServerForm } from './helpers/ServerForm';
 import { ImportServersBtnProps } from './helpers/ImportServersBtn';
 import { ServerData, ServersMap, ServerWithId } from './data';
+import { DuplicatedServerModal } from './helpers/DuplicatedServerModal';
 
 const SHOW_IMPORT_MSG_TIME = 4000;
 
@@ -31,16 +32,30 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
   const hasServers = !!Object.keys(servers).length;
   const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
   const [ errorImporting, setErrorImporting ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
-  const handleSubmit = (serverData: ServerData) => {
+  const [ isConfirmModalOpen, toggleConfirmModal ] = useToggle();
+  const [ serverData, setServerData ] = useState<ServerData | undefined>();
+  const save = () => {
+    if (!serverData) {
+      return;
+    }
+
     const id = uuid();
 
     createServer({ ...serverData, id });
     push(`/server/${id}`);
   };
 
+  useEffect(() => {
+    const serverExists = Object.values(servers).some(
+      ({ url, apiKey }) => serverData?.url === url && serverData?.apiKey === apiKey,
+    );
+
+    serverExists ? toggleConfirmModal() : save();
+  }, [ serverData ]);
+
   return (
     <NoMenuLayout>
-      <ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={handleSubmit}>
+      <ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={setServerData}>
         {!hasServers &&
           <ImportServersBtn tooltipPlacement="top" onImport={setServersImported} onImportError={setErrorImporting} />}
         {hasServers && <Button outline onClick={goBack}>Cancel</Button>}
@@ -49,6 +64,14 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
 
       {serversImported && <ImportResult type="success" />}
       {errorImporting && <ImportResult type="error" />}
+
+      <DuplicatedServerModal
+        isOpen={isConfirmModalOpen}
+        toggle={toggleConfirmModal}
+        serverData={serverData}
+        onDiscard={goBack}
+        onSave={save}
+      />
     </NoMenuLayout>
   );
 };

src/servers/helpers/DuplicatedServerModal.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { ServerData } from '../data';
+
+interface DuplicatedServerModalProps {
+  serverData?: ServerData;
+  isOpen: boolean;
+  toggle: () => void;
+  onDiscard: () => void;
+  onSave: () => void;
+}
+
+export const DuplicatedServerModal: FC<DuplicatedServerModalProps> = (
+  { isOpen, toggle, serverData, onDiscard, onSave },
+) => (
+  <Modal centered isOpen={isOpen} toggle={toggle}>
+    <ModalHeader>Duplicated server</ModalHeader>
+    <ModalBody>
+      <p>There is already a server with:</p>
+      <ul>
+        <li>URL: <b>{serverData?.url}</b></li>
+        <li>API key: <b>{serverData?.apiKey}</b></li>
+      </ul>
+      Do you want to save this server anyway?
+    </ModalBody>
+    <ModalFooter>
+      <Button color="link" onClick={onDiscard}>Discard</Button>
+      <Button color="primary" onClick={onSave}>Save anyway</Button>
+    </ModalFooter>
+  </Modal>
+);

test/servers/CreateServer.test.tsx

@@ -4,18 +4,21 @@ import { History } from 'history';
 import createServerConstruct from '../../src/servers/CreateServer';
 import { ServerForm } from '../../src/servers/helpers/ServerForm';
 import { ServerWithId } from '../../src/servers/data';
+import { DuplicatedServerModal } from '../../src/servers/helpers/DuplicatedServerModal';
 
 describe('<CreateServer />', () => {
   let wrapper: ShallowWrapper;
   const ImportServersBtn = () => null;
   const createServerMock = jest.fn();
   const push = jest.fn();
-  const historyMock = Mock.of<History>({ push });
+  const goBack = jest.fn();
+  const historyMock = Mock.of<History>({ push, goBack });
   const servers = { foo: Mock.all<ServerWithId>() };
   const createWrapper = (serversImported = false, importFailed = false) => {
     const useStateFlagTimeout = jest.fn()
       .mockReturnValueOnce([ serversImported, () => '' ])
-      .mockReturnValueOnce([ importFailed, () => '' ]);
+      .mockReturnValueOnce([ importFailed, () => '' ])
+      .mockReturnValue([]);
     const CreateServer = createServerConstruct(ImportServersBtn, useStateFlagTimeout);
 
     wrapper = shallow(<CreateServer createServer={createServerMock} history={historyMock} servers={servers} />);
@@ -23,10 +26,8 @@ describe('<CreateServer />', () => {
     return wrapper;
   };
 
-  afterEach(() => {
+  beforeEach(jest.clearAllMocks);
-    jest.resetAllMocks();
+  afterEach(() => wrapper?.unmount());
-    wrapper?.unmount();
-  });
 
   it('renders components', () => {
     const wrapper = createWrapper();
@@ -51,13 +52,30 @@ describe('<CreateServer />', () => {
     expect(result.prop('type')).toEqual('error');
   });
 
-  it('creates server and redirects to it when form is submitted', () => {
+  it('creates server data form is submitted', () => {
     const wrapper = createWrapper();
     const form = wrapper.find(ServerForm);
 
+    expect(wrapper.find(DuplicatedServerModal).prop('serverData')).not.toBeDefined();
     form.simulate('submit', {});
+    expect(wrapper.find(DuplicatedServerModal).prop('serverData')).toEqual({});
+  });
+
+  it('saves server and redirects on modal save', () => {
+    const wrapper = createWrapper();
+
+    wrapper.find(ServerForm).simulate('submit', {});
+    wrapper.find(DuplicatedServerModal).simulate('save');
 
     expect(createServerMock).toHaveBeenCalledTimes(1);
     expect(push).toHaveBeenCalledTimes(1);
   });
+
+  it('goes back on modal discard', () => {
+    const wrapper = createWrapper();
+
+    wrapper.find(DuplicatedServerModal).simulate('discard');
+
+    expect(goBack).toHaveBeenCalledTimes(1);
+  });
 });