) => {\n if (e.currentTarget.textContent) {\n setActiveTab(TabsFooter[e.currentTarget.textContent as TabsFooter\n || TabsFooter.All]);\n }\n };\n\n const handleError = () => {\n setHiddenError(false);\n setTimeout(() => setHiddenError(true), 3000);\n setErrorMessage('Unable to delete a todo');\n };\n\n const handleClear = () => {\n const completed = todos.filter(todo => todo.completed);\n\n setLoading(true);\n setItemId(completed.map(el => el.id));\n\n completed.forEach(todo => deleteTodos(todo.id)\n .then(() => setTodos(todos.filter(t => !t.completed)))\n .catch(handleError)\n .finally(() => setLoading(false)));\n };\n\n return (\n <>\n {Boolean(todos.length) && (\n \n )}\n \n );\n};\n","type Props = {\n hiddenError: boolean,\n setHiddenError: React.Dispatch>,\n errorMessage: string,\n};\n\nexport const ShowError: React.FC = ({\n hiddenError,\n setHiddenError,\n errorMessage,\n}) => {\n return (\n \n setHiddenError(true)}\n />\n {errorMessage}\n \n );\n};\n","import classNames from 'classnames';\nimport React, { useState, useEffect } from 'react';\nimport { Todo } from '../types/Todo';\nimport { TabsFooter } from '../enums/TabsFooter';\nimport { deleteTodos, updateTodos } from '../api/todos';\n\ntype Props = {\n todos: Todo[],\n activeTab: TabsFooter,\n setTodos: React.Dispatch>,\n loading: boolean,\n setLoading: (v: boolean) => void,\n setErrorMessage: (v: string) => void,\n setHiddenError: (v: boolean) => void,\n setItemId: React.Dispatch>,\n itemId: number[],\n tempTodo: null | Todo,\n};\n\nexport const ShowTodos: React.FC = ({\n todos,\n activeTab,\n setTodos,\n loading,\n setLoading,\n setErrorMessage,\n setHiddenError,\n setItemId,\n itemId,\n tempTodo,\n}) => {\n const [renameTodo, setRenameTodo] = useState(null);\n const [prevRenameTitle, setPrevRenameTitle] = useState('');\n\n const handleKeyPress = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n setRenameTodo(null);\n }\n };\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyPress);\n\n return () => {\n document.removeEventListener('keydown', handleKeyPress);\n };\n }, []);\n const getVisibleTodos = (t: Todo[], at: TabsFooter) => {\n switch (at) {\n case TabsFooter.Active:\n return t.filter((el) => !el.completed);\n case TabsFooter.Completed:\n return t.filter((el) => el.completed);\n default:\n return t;\n }\n };\n\n const handleError = (message: string) => {\n setHiddenError(false);\n setTimeout(() => setHiddenError(true), 3000);\n setErrorMessage(message);\n };\n\n const resetLoadingState = () => {\n setItemId([0]);\n setLoading(false);\n };\n\n const visibleTodos = getVisibleTodos(todos, activeTab);\n\n const handleDelete = (postId: number) => {\n setItemId((prev) => [...prev, postId]);\n setLoading(true);\n\n deleteTodos(postId).then(() => {\n setTodos(prev => (\n prev.filter(todo => todo.id !== postId)\n ));\n })\n .catch(() => handleError('Unable to delete a todo'))\n .finally(resetLoadingState);\n };\n\n const handleUpdate = (todo: Todo) => {\n setItemId((prev) => [...prev, todo.id]);\n setLoading(true);\n\n updateTodos({ ...todo, completed: !todo.completed }).then((res) => {\n setTodos(prev => {\n const updateTodo = [...prev];\n const indexTodo = updateTodo.findIndex(el => el.id === todo.id);\n\n updateTodo.splice(indexTodo, 1, res);\n\n return updateTodo;\n });\n })\n .catch(() => handleError('Unable to update a todo'))\n .finally(resetLoadingState);\n };\n\n const getRenameElement = (todo: Todo) => {\n setRenameTodo(todo);\n setPrevRenameTitle(todo.title);\n };\n\n const handleChange = (e: React.ChangeEvent) => {\n if (renameTodo) {\n const { value } = e.target;\n\n setRenameTodo({ ...renameTodo, title: value });\n }\n };\n\n const handleRename = (todo: Todo) => {\n setItemId((prev) => [...prev, todo.id]);\n setLoading(true);\n\n updateTodos({ ...todo }).then((res) => {\n setTodos(prev => {\n const updateTodo = [...prev];\n const indexTodo = updateTodo.findIndex(el => el.id === todo.id);\n\n updateTodo.splice(indexTodo, 1, res);\n\n return updateTodo;\n });\n })\n .catch(() => handleError('Unable to update a todo'))\n .finally(resetLoadingState);\n };\n\n const baseSubmit = () => {\n if (renameTodo\n && renameTodo.title !== prevRenameTitle\n && renameTodo.title.trim() !== '') {\n handleRename(renameTodo);\n } else if (renameTodo && renameTodo.title.trim() === '') {\n handleDelete(renameTodo.id);\n }\n\n setRenameTodo(null);\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n baseSubmit();\n };\n\n return (\n \n {visibleTodos.map((todo) => (\n \n \n\n {renameTodo && renameTodo.id === todo.id\n ? (\n \n )\n : (\n <>\n getRenameElement(todo)}\n >\n {todo.title}\n \n\n handleDelete(todo.id)}\n >\n ×\n \n \n )}\n\n {loading && itemId.some((el) => el === todo.id) && (\n \n )}\n \n ))}\n\n {tempTodo?.title && (\n \n
\n\n
{tempTodo.title}\n\n
\n\n
\n
\n
todos
\n\n
\n \n\n \n\n \n
\n\n
\n