-
Notifications
You must be signed in to change notification settings - Fork 0
/
AddTodo.tsx
50 lines (42 loc) · 1.33 KB
/
AddTodo.tsx
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
import { FC, useState } from "react";
import styled from "styled-components";
import { useAddTodoMutation } from "../../redux/apiSlice";
import { IconButton, IconCode } from "../IconButton";
export const AddTodo: FC = () => {
const [text, setText] = useState("");
const [addTodo] = useAddTodoMutation();
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setText(e.target.value);
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
const trimmedText = e.currentTarget.value.trim();
if (e.key === "Enter" && trimmedText) {
addTodo(trimmedText);
setText("");
}
};
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
if (text) {
addTodo(text);
setText("");
}
};
return (
<StyledForm>
<StyledInput placeholder="Enter new todo" value={text} onChange={handleChange} onKeyDown={handleKeyDown} />
<IconButton icon={IconCode.plus} onClick={handleClick} />
</StyledForm>
);
};
const StyledForm = styled.form`
display: flex;
flex-direction: row;
margin: 0.75rem 0;
border-bottom: 2px solid black;
`;
const StyledInput = styled.input`
flex-grow: 1;
border: none;
&:focus {
outline: none;
}
`;