mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improved server form

Browse source
This commit is contained in:
Alejandro Celaya 2020-12-12 11:43:16 +01:00
parent d62edb2249
commit 4d969b994e
8 changed files with 55 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/servers/CreateServer.tsx
View file

@ -44,7 +44,7 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
return (
<NoMenuLayout>
<ServerForm onSubmit={handleSubmit}>
<ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={handleSubmit}>
<ImportServersBtn onImport={setServersImported} onImportError={setErrorImporting} />
<button className="btn btn-outline-primary">Create server</button>
</ServerForm>

6
src/servers/EditServer.tsx
View file

@ -23,7 +23,11 @@ export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProp
return (
<NoMenuLayout>
<ServerForm initialValues={selectedServer} onSubmit={handleSubmit}>
<ServerForm
title={<h5 className="mb-0">Edit "{selectedServer.name}"</h5>}
initialValues={selectedServer}
onSubmit={handleSubmit}
>
<Button outline className="mr-2" onClick={goBack}>Cancel</Button>
<Button outline color="primary">Save</Button>
</ServerForm>

3
src/servers/helpers/ServerForm.scss Normal file
View file

@ -0,0 +1,3 @@
.server-form .form-group:last-child {
margin-bottom: 0;
}

19
src/servers/helpers/ServerForm.tsx
View file

@ -1,14 +1,17 @@
import { FC, useEffect, useState } from 'react';
import { HorizontalFormGroup } from '../../utils/HorizontalFormGroup';
import { FC, ReactNode, useEffect, useState } from 'react';
import { FormGroupContainer } from '../../utils/FormGroupContainer';
import { handleEventPreventingDefault } from '../../utils/utils';
import { ServerData } from '../data';
import { SimpleCard } from '../../utils/SimpleCard';
import './ServerForm.scss';
interface ServerFormProps {
onSubmit: (server: ServerData) => void;
initialValues?: ServerData;
title?: ReactNode;
}
export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children }) => {
export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children, title }) => {
const [ name, setName ] = useState('');
const [ url, setUrl ] = useState('');
const [ apiKey, setApiKey ] = useState('');
@ -21,10 +24,12 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
}, [ initialValues ]);
return (
<form onSubmit={handleSubmit}>
<HorizontalFormGroup value={name} onChange={setName}>Name</HorizontalFormGroup>
<HorizontalFormGroup type="url" value={url} onChange={setUrl}>URL</HorizontalFormGroup>
<HorizontalFormGroup value={apiKey} onChange={setApiKey}>API key</HorizontalFormGroup>
<form className="server-form" onSubmit={handleSubmit}>
<SimpleCard className="mb-4" title={title}>
<FormGroupContainer value={name} onChange={setName}>Name</FormGroupContainer>
<FormGroupContainer type="url" value={url} onChange={setUrl}>URL</FormGroupContainer>
<FormGroupContainer value={apiKey} onChange={setApiKey}>API key</FormGroupContainer>
</SimpleCard>
<div className="text-right">{children}</div>
</form>

29
src/utils/FormGroupContainer.tsx Normal file
View file

@ -0,0 +1,29 @@
import { FC } from 'react';
import { v4 as uuid } from 'uuid';
import { InputType } from 'reactstrap/lib/Input';
interface FormGroupContainer {
value: string;
onChange: (newValue: string) => void;
id?: string;
type?: InputType;
required?: boolean;
}
export const FormGroupContainer: FC<FormGroupContainer> = (
{ children, value, onChange, id = uuid(), type = 'text', required = true },
) => (
<div className="form-group">
<label htmlFor={id} className="create-server__label">
{children}:
</label>
<input
className="form-control"
type={type}
id={id}
value={value}
required={required}
onChange={(e) => onChange(e.target.value)}
/>
</div>
);

31
src/utils/HorizontalFormGroup.tsx
View file

@ -1,31 +0,0 @@
import { FC } from 'react';
import { v4 as uuid } from 'uuid';
import { InputType } from 'reactstrap/lib/Input';
interface HorizontalFormGroupProps {
value: string;
onChange: (newValue: string) => void;
id?: string;
type?: InputType;
required?: boolean;
}
export const HorizontalFormGroup: FC<HorizontalFormGroupProps> = (
{ children, value, onChange, id = uuid(), type = 'text', required = true },
) => (
<div className="form-group row">
<label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">
{children}:
</label>
<div className="col-lg-11 col-md-10">
<input
className="form-control"
type={type}
id={id}
value={value}
required={required}
onChange={(e) => onChange(e.target.value)}
/>
</div>
</div>
);

5
src/utils/SimpleCard.tsx
View file

@ -1,8 +1,9 @@
import { CardProps } from 'reactstrap/lib/Card';
import { Card, CardBody, CardHeader } from 'reactstrap';
import { ReactNode } from 'react';
interface SimpleCardProps extends CardProps {
title?: string;
interface SimpleCardProps extends Omit<CardProps, 'title'> {
title?: ReactNode;
}
export const SimpleCard = ({ title, children, ...rest }: SimpleCardProps) => (

4
test/servers/helpers/ServerForm.test.tsx
View file

@ -1,6 +1,6 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { ServerForm } from '../../../src/servers/helpers/ServerForm';
import { HorizontalFormGroup } from '../../../src/utils/HorizontalFormGroup';
import { FormGroupContainer } from '../../../src/utils/FormGroupContainer';
describe('<ServerForm />', () => {
let wrapper: ShallowWrapper;
@ -14,7 +14,7 @@ describe('<ServerForm />', () => {
afterEach(jest.resetAllMocks);
it('renders components', () => {
expect(wrapper.find(HorizontalFormGroup)).toHaveLength(3);
expect(wrapper.find(FormGroupContainer)).toHaveLength(3);
expect(wrapper.find('span')).toHaveLength(1);
});