mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-04-30 17:02:11 +03:00
Code Issues Projects Releases Packages Wiki Activity

Simplified EditServer component by wrapping ServerForm

Browse source
This commit is contained in:
Alejandro Celaya 2020-03-15 12:02:19 +01:00
parent 6d44ac1e0c
commit 5d8af1a0e5
1 changed files with 7 additions and 23 deletions

30
src/servers/EditServer.js
View file

@ -1,8 +1,8 @@
import React, { useState, useEffect } from 'react'; import React, { useEffect } from 'react';
import PropTypes, { serverType } from 'prop-types'; import PropTypes, { serverType } from 'prop-types';
import { HorizontalFormGroup } from '../utils/HorizontalFormGroup';
import './CreateServer.scss'; import './CreateServer.scss';
import Message from '../utils/Message'; import Message from '../utils/Message';
import { ServerForm } from './helpers/ServerForm';
const propTypes = { const propTypes = {
editServer: PropTypes.func, editServer: PropTypes.func,
@ -16,25 +16,15 @@ const propTypes = {
export const EditServer = (ServerError) => { export const EditServer = (ServerError) => {
const EditServerComp = ({ editServer, selectServer, selectedServer, match, history: { push } }) => { const EditServerComp = ({ editServer, selectServer, selectedServer, match, history: { push } }) => {
const [ name, setName ] = useState('');
const [ url, setUrl ] = useState('');
const [ apiKey, setApiKey ] = useState('');
const { params: { serverId } } = match; const { params: { serverId } } = match;
const handleSubmit = (e) => { const handleSubmit = (serverData) => {
e.preventDefault(); editServer(serverId, serverData);
editServer(serverId, { name, url, apiKey });
push(`/server/${serverId}/list-short-urls/1`); push(`/server/${serverId}/list-short-urls/1`);
}; };
useEffect(() => { useEffect(() => {
selectServer(serverId); selectServer(serverId);
}, [ serverId ]); }, [ serverId ]);
useEffect(() => {
selectedServer && setName(selectedServer.name);
selectedServer && setUrl(selectedServer.url);
selectedServer && setApiKey(selectedServer.apiKey);
}, [ selectedServer ]);
if (!selectedServer) { if (!selectedServer) {
return <Message loading />; return <Message loading />;
@ -46,15 +36,9 @@ export const EditServer = (ServerError) => {
return ( return (
<div className="create-server"> <div className="create-server">
<form onSubmit={handleSubmit}> <ServerForm initialValues={selectedServer} onSubmit={handleSubmit}>
<HorizontalFormGroup value={name} onChange={setName}>Name</HorizontalFormGroup> <button className="btn btn-outline-primary">Save</button>
<HorizontalFormGroup type="url" value={url} onChange={setUrl}>URL</HorizontalFormGroup> </ServerForm>
<HorizontalFormGroup value={apiKey} onChange={setApiKey}>API key</HorizontalFormGroup>
<div className="text-right">
<button className="btn btn-outline-primary">Save</button>
</div>
</form>
</div> </div>
); );
}; };