forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-18 13:33:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Linked CreateServer component with redux

Browse Source
This commit is contained in:
Alejandro Celaya
2018-07-16 18:25:37 +02:00
parent 554248c376
commit ebb94a17ab
5 changed files with 74 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/servers/CreateServer.js
View File

@@ -1,41 +1,62 @@
import React from 'react';
import { connect } from 'react-redux';
import { createServer } from './reducers/server';
import './CreateServer.scss';
export const CreateServer = () => {
const submit = e => e.preventDefault();
export class CreateServer extends React.Component {
state = {
name: '',
url: '',
apiKey: '',
};
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">
<input type="text" className="form-control" id="name" placeholder="Name" />
render() {
const submit = e => {
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 })}
/>;
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>
<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">
<input type="url" className="form-control" id="url" placeholder="URL" />
<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>
<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">
<input type="text" className="form-control" id="apiKey" placeholder="API key" />
<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>
</div>
<div className="text-right">
<button className="btn btn-primary btn-outline-primary">Create</button>
</div>
</form>
</div>
);
};
<div className="text-right">
<button className="btn btn-primary btn-outline-primary">Create server</button>
</div>
</form>
</div>
);
}
}
export default connect()(CreateServer);
export default connect(null, { createServer })(CreateServer);