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

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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -54,6 +54,7 @@
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.6.2",
"uuid": "^3.3.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",

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

4
yarn.lock
View file

@ -7549,6 +7549,10 @@ uuid@^3.0.0, uuid@^3.1.0:
version "3.2.1"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
uuid@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
validate-npm-package-license@^3.0.1:
version "3.0.3"
resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz#81643bcbef1bdfecd4623793dc4648948ba98338"