From cc9bd4f931fdc79212da0a6c085e336957137207 Mon Sep 17 00:00:00 2001 From: Huda Mabkhoot Date: Mon, 16 Sep 2024 14:17:17 +0300 Subject: [PATCH 1/4] Button and prompt added --- src/components/ListItem.jsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index 051e336..09a5273 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -26,6 +26,14 @@ export function ListItem({ }); }; + const deleteItem = async (id) => { + const confirm = window.confirm(`are you sure you want to delete ${name}?`); + + if (confirm) { + console.log(confirm, id); + } + }; + useEffect(() => { const today = new Date().getTime(); const datePurchasedInMillis = dateLastPurchased?.toMillis(); @@ -43,6 +51,9 @@ export function ListItem({ return (
  • + Date: Mon, 16 Sep 2024 13:46:49 +0100 Subject: [PATCH 2/4] add: delete functionality to firebase deleteItem function --- src/api/firebase.js | 11 ++++++++++- src/components/ListItem.jsx | 13 ++++++++----- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 6f650de..4804149 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -8,6 +8,7 @@ import { updateDoc, addDoc, Timestamp, + deleteDoc, } from 'firebase/firestore'; import { useEffect, useState } from 'react'; import { db } from './config'; @@ -232,7 +233,15 @@ export async function updateItem(listPath, checked, itemData) { } } -export async function deleteItem() { +export async function deleteItem(listPath, id) { + const listCollectionRef = collection(db, listPath, 'items'); + const itemRef = doc(listCollectionRef, id); + try { + await deleteDoc(itemRef); + } catch (error) { + console.error('Error deleting your item', error); + } + /** * TODO: Fill this out so that it uses the correct Firestore function * to delete an existing item. You'll need to figure out what arguments diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index 09a5273..9116ff3 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -1,7 +1,8 @@ import './ListItem.css'; -import { updateItem } from '../api'; +import { updateItem, deleteItem } from '../api'; import { useEffect } from 'react'; import { ONE_DAY_IN_MILLISECONDS } from '../utils/dates'; +import toast from 'react-hot-toast'; export function ListItem({ listPath, @@ -26,11 +27,13 @@ export function ListItem({ }); }; - const deleteItem = async (id) => { + const handleDelete = async () => { const confirm = window.confirm(`are you sure you want to delete ${name}?`); - if (confirm) { - console.log(confirm, id); + await deleteItem(listPath, id); + toast.success(`${name} was deleted from the list`); + } else { + toast.error('Deletion canceled'); } }; @@ -51,7 +54,7 @@ export function ListItem({ return (
  • - Date: Mon, 16 Sep 2024 14:09:02 +0100 Subject: [PATCH 3/4] fix: Moved the button behind the item so that the checkbox, item, and delete button are individually more visible. --- src/components/ListItem.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index 9116ff3..baa3c92 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -54,9 +54,6 @@ export function ListItem({ return (
  • - +
    • ); } From e21a51204512c62424d09e01cb6a516ffc780ecb Mon Sep 17 00:00:00 2001 From: marshjaja <114920895+marshjaja@users.noreply.github.com> Date: Mon, 16 Sep 2024 14:17:08 +0100 Subject: [PATCH 4/4] fix:deleted redundant comments from the deleteItem function --- src/api/firebase.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 4804149..4d703ed 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -241,10 +241,4 @@ export async function deleteItem(listPath, id) { } catch (error) { console.error('Error deleting your item', error); } - - /** - * TODO: Fill this out so that it uses the correct Firestore function - * to delete an existing item. You'll need to figure out what arguments - * this function must accept! - */ }