diff --git a/src/App.tsx b/src/App.tsx index fd7b152..d317287 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,14 +2,15 @@ import { useState } from 'react'; import { faker } from '@faker-js/faker'; import { TodoItem } from './TodoItem'; import { nanoid } from 'nanoid'; +import { ReactElement } from 'react'; -const generateFakeTodoItem = () => ({ +const generateFakeTodoItem = (): { label: string; status: string; id: string; } => ({ label: faker.hacker.phrase(), status: faker.random.arrayElement(['open', 'done', 'archived']), id: nanoid(), }); -const generateNTodo = (size) => { +const generateNTodo = (size: number): { label: string; status: string; id: string; }[] => { return Array.from(Array(size).keys()).map(generateFakeTodoItem); }; @@ -32,10 +33,10 @@ const initialList = [ ...generateNTodo(10), ]; -function App() { +function App(): ReactElement { const [todoList, setTodoList] = useState(initialList); - const updater = (id, newStatus) => { + const updater = (id: string, newStatus: string): void => { setTodoList((oldList) => oldList.map((it) => { if (it.id !== id) { @@ -57,7 +58,7 @@ function App() { key={item.id} label={item.label} status={item.status} - onChecked={(newState) => updater(item.id, newState)} + onChecked={(newState: string):void => updater(item.id, newState)} /> ))} diff --git a/src/TodoItem.tsx b/src/TodoItem.tsx index d52e923..35ccd60 100644 --- a/src/TodoItem.tsx +++ b/src/TodoItem.tsx @@ -1,6 +1,7 @@ import clsx from 'clsx'; +import { ReactElement } from 'react'; -export const TodoItem = ({ status, label, onChecked }) => { +export const TodoItem = ({ status, label, onChecked }: { status: string; label: string; onChecked:(status: string) => void; }): ReactElement => { return (
{ disabled={status === 'archived'} type="checkbox" className="rounded text-pink-500 ml-8 cursor-pointer disabled:cursor-not-allowed disabled:bg-black disabled:hover:bg-black" - onChange={() => onChecked(status === 'open' ? 'done' : 'open')} + onChange={(): void => onChecked(status === 'open' ? 'done' : 'open')} />
);