mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-22 17:10:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Reduced the amount of duplicated code in CreateServer component

Browse source
This commit is contained in:
Alejandro Celaya 2018-07-16 18:29:14 +02:00
parent ebb94a17ab
commit be30d62f6f
2 changed files with 19 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/servers/CreateServer.js
View file

@ -16,39 +16,28 @@ export class CreateServer extends React.Component {
e.preventDefault();
this.props.createServer(this.state);
};
const renderInput = (id, placeholder, type = 'text') =>
<input
type={type}
className="form-control"
id={id}
placeholder={placeholder}
value={this.state[id]}
onChange={e => this.setState({ [id]: e.target.value })}
/>;
const renderInputGroup = (id, placeholder, type = 'text') =>
<div className="form-group row">
<label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">{placeholder}:</label>
<div className="col-lg-11 col-md-10">
<input
type={type}
className="form-control"
id={id}
placeholder={placeholder}
value={this.state[id]}
onChange={e => this.setState({ [id]: e.target.value })}
required
/>
</div>
</div>;
return (
<div className="create-server">
<form onSubmit={submit}>
<div className="form-group row">
<label htmlFor="name" className="col-lg-1 col-md-2 col-form-label create-server__label">Name:</label>
<div className="col-lg-11 col-md-10">
{renderInput('name', 'Name')}
</div>
</div>
<div className="form-group row">
<label htmlFor="url" className="col-lg-1 col-md-2 col-form-label create-server__label">URL:</label>
<div className="col-lg-11 col-md-10">
{renderInput('url', 'URL', 'url')}
</div>
</div>
<div className="form-group row">
<label htmlFor="apiKey" className="col-lg-1 col-md-2 col-form-label create-server__label">API key:</label>
<div className="col-lg-11 col-md-10">
{renderInput('apiKey', 'API key')}
</div>
</div>
{renderInputGroup('name', 'Name')}
{renderInputGroup('url', 'URL', 'url')}
{renderInputGroup('apiKey', 'API key')}
<div className="text-right">
<button className="btn btn-primary btn-outline-primary">Create server</button>

1
src/servers/CreateServer.scss
View file

@ -6,6 +6,7 @@
.create-server__label {
font-weight: bold;
cursor: pointer;
@media (min-width: $mdMin) {
text-align: right;