blob: bc6ed97d3eeafd6191350b904c93c835c6a513a2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
import { useState } from "react";
import { useDispatch } from "react-redux";
import { Button, Fieldset, Input, TextArea } from "../../components/forms";
import { addTodo } from "../../store/todos/todos.slice";
function TodoForm({ userId, closeForm }) {
const [titleValue, setTitleValue] = useState("");
const [bodyValue, setBodyValue] = useState("");
const dispatch = useDispatch();
const handleSubmit = (e) => {
e.preventDefault();
closeForm((prev) => !prev);
};
const handleSave = () => {
const newTodo = { userId, title: titleValue, body: bodyValue };
dispatch(addTodo(newTodo));
};
return (
<form onSubmit={handleSubmit} className="form form--todo">
<Fieldset legend="Add a new todo">
<Input label="Title" value={titleValue} updateValue={setTitleValue} />
<TextArea
label="Details"
value={bodyValue}
updateValue={setBodyValue}
/>
<Button
type="submit"
modifiers={["submit"]}
onClickHandler={handleSave}
>
Save
</Button>
</Fieldset>
</form>
);
}
export default TodoForm;
|
