60 lines
1.4 KiB
JavaScript

import React, { useState, useEffect } from "react"
import PropTypes from "prop-types"
import { FormModal } from "../forms/modal"
import { FormInput } from "../forms/input"
export const PolochonEdit = ({
show,
setShow,
id,
initialName,
initialUrl,
initialToken,
update,
}) => {
const [name, setName] = useState(initialName);
const [url, setUrl] = useState(initialUrl);
const [token, setToken] = useState(initialToken);
useEffect(() => {
setName(initialName);
setUrl(initialUrl);
setToken(initialToken);
}, [id, initialName, initialUrl, initialToken])
const handleSubmit = () => {
update({ id, name, url, token });
setShow(false);
};
return (
<FormModal
show={show}
setShow={setShow}
title="Add a new polochon"
icon="plus"
handleSubmit={handleSubmit}
>
<FormInput label="Name" value={name} updateValue={setName} />
<FormInput label="URL" value={url} updateValue={setUrl} />
<FormInput label="Token" value={token} updateValue={setToken} />
</FormModal>
)
}
PolochonEdit.propTypes = {
show: PropTypes.bool,
setShow: PropTypes.func,
update: PropTypes.func,
id: PropTypes.string,
initialName: PropTypes.string,
initialUrl: PropTypes.string,
initialToken: PropTypes.string,
};
PolochonEdit.defaultProps = {
id: "",
initialName: "",
initialUrl: "",
initialToken: "",
};