Created modal to warn when creating a duplicated server

This commit is contained in:
Alejandro Celaya 2021-12-30 21:21:30 +01:00
parent f07e7fd31c
commit 1f9356cc21
3 changed files with 83 additions and 11 deletions

View file

@ -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>
);
};

View file

@ -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>
);

View file

@ -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(() => {
jest.resetAllMocks();
wrapper?.unmount();
});
beforeEach(jest.clearAllMocks);
afterEach(() => 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);
});
});