Связь в реальном времени с Firebase: структура данных и работа с CRUD (продолжение)
Коллекция Продукты
После настройки страницы Категории вам необходимо разрешить пользователям добавлять и удалять продукты в любых доступных категориях.
Создайте страницу Продукты, похожую на изображение выше, и выполните приведённый ниже фрагмент кода, когда пользователь добавляет новый продукт.
export const addProduct = async (name: string, price: number, category: string) => {
try {
await addDoc(collection(db, "products"), {
name, price, category
})
successMessage(`${name} product added! ��`)
} catch (err) {
errorMessage("Error! ❌")
console.error(err)
}
}
Приведённый выше фрагмент кода принимает название продукта, цену и категорию из поля формы и добавляет его в коллекцию Продукты.
Запустите эту функцию для отображения продуктов при загрузке страницы.
export const getProducts = async (setProducts: any) => {
try {
const unsub = onSnapshot(collection(db, "products"), doc => {
const docs: any = []
doc.forEach((d: any) => {
docs.unshift( { ...d.data(), id: d.id })
});
setProducts(docs)
})
} catch (err) {
console.error(err)
setProducts([])
}
}
Наконец, разрешите пользователю удалять продукты из коллекции продуктов. Поэтому выполняйте приведённую ниже функцию, когда пользователь нажимает кнопку удаления.
export const deleteProduct = async (id: string, name:string) => {
try {
await deleteDoc(doc(db, "products", id));
successMessage(`${name} deleted 🎉`)
} catch (err) {
errorMessage("Encountered an error ❌")
console.log(err)
}
}
Функция принимает имя и идентификатор продукта, затем удаляет продукт из коллекции по его идентификатору.
Продолжение следует...
Перевод с некоторыми авторскими заголовками. Автор оригинала: David Asaolu.
