Часть 7: Добавьте значок UI материала и удалите функцию с помощью Firebase Firestore.

В этой части мы собираемся добавить в приложение функцию удаления. И прежде чем мы добавим функцию удаления, мы должны добавить <DeleteIcon /> и <MoreVertIcon />.

Видеоуроки и Исходный код

Итак, сначала вернемся к Todo.js.

Импортируйте <DeleteIcon /> и <MoreVertIcon />.

import DeleteIcon from '@mui/icons-material/Delete';
import MoreVertIcon from '@mui/icons-material/MoreVert';
<ListItem
sx={{ mt: 3, boxShadow: 3 }}
style={{ backgroundColor: '#FAFAFA' }}
secondaryAction={
<>
<IconButton sx={{ m: 1 }} >
<DeleteIcon />
</IconButton>
<IconButton>
<MoreVertIcon />
</IconButton>
</>
}
>

Создайте функцию удаления

Поскольку нам нужно передать идентификатор в функцию удаления, нам также необходимо передать эту информацию из <TodoList>. Итак, в TodoList.js не забудьте добавить id = {todo.id}.

<div>
{todos.map(todo => <Todo key={todo.id}
id={todo.id}
title={todo.title}
detail={todo.detail}
timestamp={todo.timestamp}
/>)}
</div>

В Todo.js создайте функцию deleteTodo, она передаст в функцию идентификатор и событие.

Мы должны использовать метод stopPropagation, потому что <DeleteIcon /> находится наверху элемента списка дел.

Мы указываем, какой документ по идентификатору, а затем удаляем этот документ, показываем предупреждение.

Чтобы использовать функции doc и deleteDoc, мы должны импортировать их из хранилища Firebase. Также импортируйте db из файла конфигурации firebase.

import { doc, deleteDoc } from “firebase/firestore”;
import { db } from "../firebase";

Чтобы использовать функцию showAlert, мы также должны импортировать ее сверху, используя useContext(TodoContext.

const { showAlert } = useContext(TodoContext);
const deleteTodo = async (id, e) => {
e.stopPropagation();
const docRef = doc(db, "todos", id);
await deleteDoc(docRef)
showAlert('error', `Todo with id ${id} is deleted successfully`)
}

Привяжите функцию к значку удаления

Наконец, мы привязываем функцию deleteTodo к IconButton.

<>
<IconButton sx={{ m: 1 }}
onClick={(e) => deleteTodo(id, e)}
>
<DeleteIcon />
</IconButton>
<IconButton>
<MoreVertIcon />
</IconButton>
</>

Следуйте за нами: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad

Больше контента на plainenglish.io