blob: 1160ab56aa503289e2a16db4a9fd821520811703 (
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
import { useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link, useLocation } from "react-router-dom";
import { updateTodo } from "../../store/todos/todos.slice";
import useToggle from "../../utilities/hooks";
import "./Todo.scss";
function Todo() {
const [isTitleEditable, setIsTitleEditable] = useToggle();
const [isBodyEditable, setIsBodyEditable] = useToggle();
const titleRef = useRef(null);
const bodyRef = useRef(null);
const location = useLocation();
const todoId = location.state.todoId;
const currentTodo = useSelector((state) => state.todos).find(
(todo) => todo.id === todoId
);
const { title, body } = currentTodo;
const dispatch = useDispatch();
useEffect(() => {
titleRef.current && titleRef.current.focus();
bodyRef.current && bodyRef.current.focus();
});
const handleSubmit = (e) => {
console.log(e);
};
return (
<>
<Link to="/">Back to your todo list</Link>
<div className="todo">
{isTitleEditable ? (
<form
action="#"
method="post"
className="todo-form todo__title"
onSubmit={handleSubmit}
>
<input
ref={titleRef}
className="todo-form__field"
type="text"
name="title"
value={title}
onChange={(e) =>
dispatch(updateTodo({ ...currentTodo, title: e.target.value }))
}
onBlur={setIsTitleEditable}
/>
</form>
) : (
<div className="todo__title" onClick={setIsTitleEditable}>
{title}
</div>
)}
{isBodyEditable ? (
<form
action="#"
method="post"
className="todo-form todo__body"
onSubmit={handleSubmit}
>
<textarea
ref={bodyRef}
className="todo-form__field todo-form__field--textarea"
name="body"
value={body}
onChange={(e) =>
dispatch(updateTodo({ ...currentTodo, body: e.target.value }))
}
onBlur={setIsBodyEditable}
/>
</form>
) : (
<div className="todo__body" onClick={setIsBodyEditable}>
{body}
</div>
)}
</div>
</>
);
}
export default Todo;
|
