Added logic to detect duplicated servers when importing a servers list

src/servers/CreateServer.tsx

@@ -8,7 +8,7 @@ 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';
+import { DuplicatedServersModal } from './helpers/DuplicatedServersModal';
 
 const SHOW_IMPORT_MSG_TIME = 4000;
 
@@ -65,10 +65,9 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
       {serversImported && <ImportResult type="success" />}
       {errorImporting && <ImportResult type="error" />}
 
-      <DuplicatedServerModal
+      <DuplicatedServersModal
         isOpen={isConfirmModalOpen}
-        toggle={toggleConfirmModal}
+        duplicatedServers={serverData ? [ serverData ] : []}
-        serverData={serverData}
         onDiscard={goBack}
         onSave={save}
       />

src/servers/helpers/DuplicatedServerModal.tsx

@@ -1,31 +0,0 @@
-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>
-);

src/servers/helpers/DuplicatedServersModal.tsx

@@ -0,0 +1,38 @@
+import { FC, Fragment } from 'react';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { ServerData } from '../data';
+
+interface DuplicatedServersModalProps {
+  duplicatedServers: ServerData[];
+  isOpen: boolean;
+  onDiscard: () => void;
+  onSave: () => void;
+}
+
+export const DuplicatedServersModal: FC<DuplicatedServersModalProps> = (
+  { isOpen, duplicatedServers, onDiscard, onSave },
+) => {
+  const hasMultipleServers = duplicatedServers.length > 1;
+
+  return (
+    <Modal centered isOpen={isOpen}>
+      <ModalHeader>Duplicated server{hasMultipleServers && 's'}</ModalHeader>
+      <ModalBody>
+        <p>{hasMultipleServers ? 'The next servers already exist:' : 'There is already a server with:'}</p>
+        <ul>
+          {duplicatedServers.map(({ url, apiKey }, index) => !hasMultipleServers ? (
+            <Fragment key={index}>
+              <li>URL: <b>{url}</b></li>
+              <li>API key: <b>{apiKey}</b></li>
+            </Fragment>
+          ) : <li key={index}><b>{url}</b> - <b>{apiKey}</b></li>)}
+        </ul>
+        {hasMultipleServers ? 'Do you want to ignore duplicated servers?' : 'Do you want to save this server anyway?'}
+      </ModalBody>
+      <ModalFooter>
+        <Button color="link" onClick={onDiscard}>{hasMultipleServers ? 'Ignore duplicated' : 'Discard'}</Button>
+        <Button color="primary" onClick={onSave}>Save anyway</Button>
+      </ModalFooter>
+    </Modal>
+  );
+};

src/servers/helpers/ImportServersBtn.tsx

@@ -1,10 +1,12 @@
-import { useRef, RefObject, ChangeEvent, MutableRefObject, FC } from 'react';
+import { useRef, RefObject, ChangeEvent, MutableRefObject, FC, useState, useEffect } from 'react';
 import { Button, UncontrolledTooltip } from 'reactstrap';
-import { pipe } from 'ramda';
+import { complement, pipe } from 'ramda';
 import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import ServersImporter from '../services/ServersImporter';
+import { useToggle } from '../../utils/helpers/hooks';
-import { ServerData } from '../data';
+import { ServersImporter } from '../services/ServersImporter';
+import { ServerData, ServersMap } from '../data';
+import { DuplicatedServersModal } from './DuplicatedServersModal';
 import './ImportServersBtn.scss';
 
 type Ref<T> = RefObject<T> | MutableRefObject<T>;
@@ -18,11 +20,16 @@ export interface ImportServersBtnProps {
 
 interface ImportServersBtnConnectProps extends ImportServersBtnProps {
   createServers: (servers: ServerData[]) => void;
+  servers: ServersMap;
   fileRef: Ref<HTMLInputElement>;
 }
 
+const serversFiltering = (servers: ServerData[]) =>
+  ({ url, apiKey }: ServerData) => servers.some((server) => server.url === url && server.apiKey === apiKey);
+
 const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<ImportServersBtnConnectProps> => ({
   createServers,
+  servers,
   fileRef,
   children,
   onImport = () => {},
@@ -31,15 +38,37 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<Import
   className = '',
 }) => {
   const ref = fileRef ?? useRef<HTMLInputElement>();
-  const onChange = async ({ target }: ChangeEvent<HTMLInputElement>) =>
+  const [ serversToCreate, setServersToCreate ] = useState<ServerData[] | undefined>();
+  const [ duplicatedServers, setDuplicatedServers ] = useState<ServerData[]>([]);
+  const [ isModalOpen,, showModal, hideModal ] = useToggle();
+  const create = pipe(createServers, onImport);
+  const createAllServers = pipe(() => create(serversToCreate ?? []), hideModal);
+  const createNonDuplicatedServers = pipe(
+    () => create((serversToCreate ?? []).filter(complement(serversFiltering(duplicatedServers)))),
+    hideModal,
+  );
+  const onFile = async ({ target }: ChangeEvent<HTMLInputElement>) =>
     importServersFromFile(target.files?.[0])
-      .then(pipe(createServers, onImport))
+      .then(setServersToCreate)
       .then(() => {
         // Reset input after processing file
         (target as { value: string | null }).value = null;
       })
       .catch(onImportError);
 
+  useEffect(() => {
+    if (!serversToCreate) {
+      return;
+    }
+
+    const existingServers = Object.values(servers);
+    const duplicatedServers = serversToCreate.filter(serversFiltering(existingServers));
+    const hasDuplicatedServers = !!duplicatedServers.length;
+
+    !hasDuplicatedServers ? create(serversToCreate) : setDuplicatedServers(duplicatedServers);
+    hasDuplicatedServers && showModal();
+  }, [ serversToCreate ]);
+
   return (
     <>
       <Button outline id="importBtn" className={className} onClick={() => ref.current?.click()}>
@@ -49,7 +78,14 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<Import
         You can create servers by importing a CSV file with columns <b>name</b>, <b>apiKey</b> and <b>url</b>.
       </UncontrolledTooltip>
 
-      <input type="file" accept="text/csv" className="import-servers-btn__csv-select" ref={ref} onChange={onChange} />
+      <input type="file" accept="text/csv" className="import-servers-btn__csv-select" ref={ref} onChange={onFile} />
+
+      <DuplicatedServersModal
+        isOpen={isModalOpen}
+        duplicatedServers={duplicatedServers}
+        onDiscard={createNonDuplicatedServers}
+        onSave={createAllServers}
+      />
     </>
   );
 };

src/servers/services/ServersImporter.ts

@@ -7,7 +7,7 @@ const validateServer = (server: any): server is ServerData =>
 const validateServers = (servers: any): servers is ServerData[] =>
   Array.isArray(servers) && servers.every(validateServer);
 
-export default class ServersImporter {
+export class ServersImporter {
   public constructor(private readonly csvJson: CsvJson, private readonly fileReaderFactory: () => FileReader) {}
 
   public readonly importServersFromFile = async (file?: File | null): Promise<ServerData[]> => {

src/servers/services/provideServices.ts

@@ -17,7 +17,7 @@ import { Overview } from '../Overview';
 import { ManageServers } from '../ManageServers';
 import { ManageServersRow } from '../ManageServersRow';
 import { ManageServersRowDropdown } from '../ManageServersRowDropdown';
-import ServersImporter from './ServersImporter';
+import { ServersImporter } from './ServersImporter';
 import ServersExporter from './ServersExporter';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
@@ -54,7 +54,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
   bottle.serviceFactory('DeleteServerButton', DeleteServerButton, 'DeleteServerModal');
 
   bottle.serviceFactory('ImportServersBtn', ImportServersBtn, 'ServersImporter');
-  bottle.decorator('ImportServersBtn', connect(null, [ 'createServers' ]));
+  bottle.decorator('ImportServersBtn', connect([ 'servers' ], [ 'createServers' ]));
 
   bottle.serviceFactory('ForServerVersion', () => ForServerVersion);
   bottle.decorator('ForServerVersion', connect([ 'selectedServer' ]));

test/servers/CreateServer.test.tsx

@@ -4,7 +4,7 @@ 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';
+import { DuplicatedServersModal } from '../../src/servers/helpers/DuplicatedServersModal';
 
 describe('<CreateServer />', () => {
   let wrapper: ShallowWrapper;
@@ -52,20 +52,20 @@ describe('<CreateServer />', () => {
     expect(result.prop('type')).toEqual('error');
   });
 
-  it('creates server data form is submitted', () => {
+  it('creates server data when form is submitted', () => {
     const wrapper = createWrapper();
     const form = wrapper.find(ServerForm);
 
-    expect(wrapper.find(DuplicatedServerModal).prop('serverData')).not.toBeDefined();
+    expect(wrapper.find(DuplicatedServersModal).prop('duplicatedServers')).toEqual([]);
     form.simulate('submit', {});
-    expect(wrapper.find(DuplicatedServerModal).prop('serverData')).toEqual({});
+    expect(wrapper.find(DuplicatedServersModal).prop('duplicatedServers')).toEqual([{}]);
   });
 
   it('saves server and redirects on modal save', () => {
     const wrapper = createWrapper();
 
     wrapper.find(ServerForm).simulate('submit', {});
-    wrapper.find(DuplicatedServerModal).simulate('save');
+    wrapper.find(DuplicatedServersModal).simulate('save');
 
     expect(createServerMock).toHaveBeenCalledTimes(1);
     expect(push).toHaveBeenCalledTimes(1);
@@ -74,7 +74,7 @@ describe('<CreateServer />', () => {
   it('goes back on modal discard', () => {
     const wrapper = createWrapper();
 
-    wrapper.find(DuplicatedServerModal).simulate('discard');
+    wrapper.find(DuplicatedServersModal).simulate('discard');
 
     expect(goBack).toHaveBeenCalledTimes(1);
   });

test/servers/helpers/DuplicatedServersModal.test.tsx

@@ -1,16 +1,16 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import { Button } from 'reactstrap';
-import { DuplicatedServerModal } from '../../../src/servers/helpers/DuplicatedServerModal';
+import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal';
 import { ServerData } from '../../../src/servers/data';
 
-describe('<DuplicatedServerModal />', () => {
+describe('<DuplicatedServersModal />', () => {
   const onDiscard = jest.fn();
   const onSave = jest.fn();
   let wrapper: ShallowWrapper;
-  const createWrapper = (serverData?: ServerData) => {
+  const createWrapper = (duplicatedServers: ServerData[] = []) => {
     wrapper = shallow(
-      <DuplicatedServerModal isOpen serverData={serverData} toggle={jest.fn()} onDiscard={onDiscard} onSave={onSave} />,
+      <DuplicatedServersModal isOpen duplicatedServers={duplicatedServers} onDiscard={onDiscard} onSave={onSave} />,
     );
 
     return wrapper;
@@ -20,14 +20,18 @@ describe('<DuplicatedServerModal />', () => {
   afterEach(() => wrapper?.unmount());
 
   it.each([
-    [ undefined ],
+    [[]],
-    [ Mock.of<ServerData>({ url: 'url', apiKey: 'apiKey' }) ],
+    [[ Mock.of<ServerData>({ url: 'url', apiKey: 'apiKey' }) ]],
-  ])('displays provided server data', (serverData) => {
+  ])('displays provided server data', (duplicatedServers) => {
-    const wrapper = createWrapper(serverData);
+    const wrapper = createWrapper(duplicatedServers);
     const li = wrapper.find('li');
 
-    expect(li.first().find('b').html()).toEqual(`<b>${serverData?.url ?? ''}</b>`);
+    if (duplicatedServers.length === 0) {
-    expect(li.last().find('b').html()).toEqual(`<b>${serverData?.apiKey ?? ''}</b>`);
+      expect(li).toHaveLength(0);
+    } else {
+      expect(li.first().find('b').html()).toEqual(`<b>${duplicatedServers[0].url}</b>`);
+      expect(li.last().find('b').html()).toEqual(`<b>${duplicatedServers[0].apiKey}</b>`);
+    }
   });
 
   it('invokes onDiscard when appropriate button is clicked', () => {

test/servers/helpers/ImportServersBtn.test.tsx

@@ -2,8 +2,9 @@ import { ReactNode } from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { UncontrolledTooltip } from 'reactstrap';
 import { Mock } from 'ts-mockery';
-import importServersBtnConstruct from '../../../src/servers/helpers/ImportServersBtn';
+import importServersBtnConstruct, { ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn';
-import ServersImporter from '../../../src/servers/services/ServersImporter';
+import { ServersImporter } from '../../../src/servers/services/ServersImporter';
+import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal';
 
 describe('<ImportServersBtn />', () => {
   let wrapper: ShallowWrapper;
@@ -12,17 +13,15 @@ describe('<ImportServersBtn />', () => {
   const importServersFromFile = jest.fn().mockResolvedValue([]);
   const serversImporterMock = Mock.of<ServersImporter>({ importServersFromFile });
   const click = jest.fn();
-  const fileRef = {
+  const fileRef = { current: Mock.of<HTMLInputElement>({ click }) };
-    current: Mock.of<HTMLInputElement>({ click }),
-  };
   const ImportServersBtn = importServersBtnConstruct(serversImporterMock);
-  const createWrapper = (className?: string, children?: ReactNode) => {
+  const createWrapper = (props: Partial<ImportServersBtnProps & { children: ReactNode }> = {}) => {
     wrapper = shallow(
       <ImportServersBtn
-        createServers={createServersMock}
+        servers={{}}
-        className={className}
+        {...props}
         fileRef={fileRef}
-        children={children}
+        createServers={createServersMock}
         onImport={onImportMock}
       />,
     );
@@ -46,7 +45,7 @@ describe('<ImportServersBtn />', () => {
     [ 'foo', 'foo' ],
     [ 'bar', 'bar' ],
   ])('allows a class name to be provided', (providedClassName, expectedClassName) => {
-    const wrapper = createWrapper(providedClassName);
+    const wrapper = createWrapper({ className: providedClassName });
 
     expect(wrapper.find('#importBtn').prop('className')).toEqual(expectedClassName);
   });
@@ -56,7 +55,7 @@ describe('<ImportServersBtn />', () => {
     [ 'foo', false ],
     [ 'bar', false ],
   ])('has expected text', (children, expectToHaveDefaultText) => {
-    const wrapper = createWrapper(undefined, children);
+    const wrapper = createWrapper({ children });
 
     if (expectToHaveDefaultText) {
       expect(wrapper.find('#importBtn').html()).toContain('Import from file');
@@ -82,6 +81,16 @@ describe('<ImportServersBtn />', () => {
     await file.simulate('change', { target: { files: [ '' ] } }); // eslint-disable-line @typescript-eslint/await-thenable
 
     expect(importServersFromFile).toHaveBeenCalledTimes(1);
+  });
+
+  it.each([
+    [ 'discard' ],
+    [ 'save' ],
+  ])('invokes callback in DuplicatedServersModal events', (event) => {
+    const wrapper = createWrapper();
+
+    wrapper.find(DuplicatedServersModal).simulate(event);
+
     expect(createServersMock).toHaveBeenCalledTimes(1);
     expect(onImportMock).toHaveBeenCalledTimes(1);
   });

test/servers/services/ServersImporter.test.ts

@@ -1,6 +1,6 @@
 import { Mock } from 'ts-mockery';
 import { CsvJson } from 'csvjson';
-import ServersImporter from '../../../src/servers/services/ServersImporter';
+import { ServersImporter } from '../../../src/servers/services/ServersImporter';
 import { RegularServer } from '../../../src/servers/data';
 
 describe('ServersImporter', () => {