forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-13 11:03:50 +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);

8
src/servers/reducers/server.js
View File

@@ -8,7 +8,8 @@ export default function reducer(state = {}, action) {
case FETCH_SERVERS:
return action.servers;
case CREATE_SERVER:
return [ ...state, action.server ];
const server = action.server;
return { ...state, [server.id]: server };
default:
return state;
}
@@ -20,3 +21,8 @@ export const listServers = () => {
servers: ServersService.listServers(),
};
};
export const createServer = server => {
ServersService.createServer(server);
return listServers();
};

15
src/servers/services/index.js
View File

@@ -1,4 +1,8 @@
import Storage from '../../utils/Storage';
import { assoc } from 'ramda';
import { v4 as uuid } from 'uuid';
const SERVERS_STORAGE_KEY = 'servers';
export class ServersService {
constructor(storage) {
@@ -6,13 +10,20 @@ export class ServersService {
}
listServers = () => {
return this.storage.get('servers');
return this.storage.get(SERVERS_STORAGE_KEY);
};
findServerById = serverId => {
const servers = this.listServers();
return servers[serverId];
}
};
createServer = server => {
const servers = this.listServers();
server = assoc('id', uuid(), server);
servers[server.id] = server;
this.storage.set(SERVERS_STORAGE_KEY, servers);
};
}
export default new ServersService(Storage);