From 67d9c017bf5610ea70a5950b2ca78c77fef558ac Mon Sep 17 00:00:00 2001 From: Huda Mabkhoot Date: Tue, 3 Sep 2024 14:10:38 +0300 Subject: [PATCH 1/5] Added the checkbox and update dateLastPurchased --- src/App.jsx | 5 ++++- src/api/firebase.js | 27 +++++++++++++++++++++------ src/components/ListItem.jsx | 15 +++++++++++++-- src/views/List.jsx | 9 +++++++-- 4 files changed, 45 insertions(+), 11 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index c9532ed..3d945b1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -50,7 +50,10 @@ export function App() { } /> - } /> + } + /> } diff --git a/src/api/firebase.js b/src/api/firebase.js index 7d404a2..965f61f 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -7,6 +7,7 @@ import { onSnapshot, updateDoc, addDoc, + FieldValue, } from 'firebase/firestore'; import { useEffect, useState } from 'react'; import { db } from './config'; @@ -186,12 +187,26 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) { }); } -export async function updateItem() { - /** - * TODO: Fill this out so that it uses the correct Firestore function - * to update an existing item. You'll need to figure out what arguments - * this function must accept! - */ +export async function updateItem(listPath, id) { + //console.log(itemName) + //const listCollectionRef = collection(db, listPath, 'items'); + const itemRef = doc(collection(db, listPath, 'items'), id); + //const itemtDoc = await getDoc(itemRef); + //console.log(parseInt(itemtDoc._document.data.value.mapValue.fields.totalPurchases.integerValue) + 1) + try { + await updateDoc(itemRef, { + dateLastPurchased: new Date(), + //totalPurchases is undefiend to be debugged + totalPurchases: { + ...prevFields, + integerValue: parseInt(totalPurchases.integerValue) + 1, + }, + }); + + console.log('item updated'); + } catch (error) { + console.log(error); + } } export async function deleteItem() { diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index d047322..11780c8 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -1,5 +1,16 @@ import './ListItem.css'; +import { updateItem } from '../api'; -export function ListItem({ name }) { - return
  • {name}
    • ; +export function ListItem({ name, listPath, id }) { + //console.log(listPath) + const handleOnChange = async () => { + await updateItem(listPath, id); + }; + + return ( +
  • + + +
    • + ); } diff --git a/src/views/List.jsx b/src/views/List.jsx index a8ac38c..b0f0011 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import { ListItem, SearchBar } from '../components'; -export function List({ data }) { +export function List({ data, listPath }) { const [search, setSearch] = useState(''); const [displayData, setDisplayData] = useState([]); @@ -19,7 +19,12 @@ export function List({ data }) { />
      {displayData.map((item) => ( - + ))}
    From 0e9b5d058e1e124ed0abf6aba7bc18d2d39fd932 Mon Sep 17 00:00:00 2001 From: Huda Mabkhoot Date: Wed, 4 Sep 2024 12:10:41 +0300 Subject: [PATCH 2/5] Fix total purchases not undefined --- src/api/firebase.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 965f61f..1cb193d 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -7,7 +7,6 @@ import { onSnapshot, updateDoc, addDoc, - FieldValue, } from 'firebase/firestore'; import { useEffect, useState } from 'react'; import { db } from './config'; @@ -188,19 +187,18 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) { } export async function updateItem(listPath, id) { - //console.log(itemName) //const listCollectionRef = collection(db, listPath, 'items'); const itemRef = doc(collection(db, listPath, 'items'), id); - //const itemtDoc = await getDoc(itemRef); - //console.log(parseInt(itemtDoc._document.data.value.mapValue.fields.totalPurchases.integerValue) + 1) try { + const itemDoc = await getDoc(itemRef); + const data = itemDoc.data(); + const currentTotalPurchases = data.totalPurchases; + //console.log(currentTotalPurchases) + await updateDoc(itemRef, { dateLastPurchased: new Date(), //totalPurchases is undefiend to be debugged - totalPurchases: { - ...prevFields, - integerValue: parseInt(totalPurchases.integerValue) + 1, - }, + totalPurchases: currentTotalPurchases + 1, }); console.log('item updated'); From 0d186759fe4f3f67e9ba8c2c44c040f91db5b02a Mon Sep 17 00:00:00 2001 From: wyna Date: Wed, 4 Sep 2024 12:16:50 +0200 Subject: [PATCH 3/5] 24h c heck in progress --- src/api/firebase.js | 4 +++- src/components/ListItem.jsx | 33 ++++++++++++++++++++++++++++----- src/views/List.jsx | 1 + 3 files changed, 32 insertions(+), 6 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 1cb193d..7aaa118 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -183,10 +183,11 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) { dateNextPurchased: getFutureDate(daysUntilNextPurchase), name: itemName, totalPurchases: 0, + checked: false, }); } -export async function updateItem(listPath, id) { +export async function updateItem(listPath, id, checked) { //const listCollectionRef = collection(db, listPath, 'items'); const itemRef = doc(collection(db, listPath, 'items'), id); try { @@ -199,6 +200,7 @@ export async function updateItem(listPath, id) { dateLastPurchased: new Date(), //totalPurchases is undefiend to be debugged totalPurchases: currentTotalPurchases + 1, + checked: checked, }); console.log('item updated'); diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index 11780c8..3874406 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -1,15 +1,38 @@ import './ListItem.css'; import { updateItem } from '../api'; +import { useEffect } from 'react'; -export function ListItem({ name, listPath, id }) { - //console.log(listPath) - const handleOnChange = async () => { - await updateItem(listPath, id); +export function ListItem({ name, listPath, id, isChecked }) { + const handleOnChange = async (event) => { + //console.log(event); + let { value, checked } = event.target; + console.log('value before update', value); + await updateItem(listPath, id, !checked); + if (value) { + console.log('value inside if block', value); + setTimeout(async () => { + await updateItem(listPath, id, !checked); + //checked = isChecked; + console.log('fjkdsvhjkfdsh', value); + }, 5000); + } + console.log(value); }; + // useEffect(() => { + // setTimeout(async () => { + // await updateItem(listPath, id, !checked); + // }, 1000); + // }, [checked]); return (
  • - +
    • ); diff --git a/src/views/List.jsx b/src/views/List.jsx index b0f0011..26b5b14 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -24,6 +24,7 @@ export function List({ data, listPath }) { name={item.name} listPath={listPath} id={item.id} + isChecked={item.checked} /> ))} From 14727dedc38a40f3c71848b7ce493d6c44cf0d0a Mon Sep 17 00:00:00 2001 From: Huda Mabkhoot Date: Thu, 5 Sep 2024 12:10:21 +0300 Subject: [PATCH 4/5] Refactored the updating functionality --- src/api/firebase.js | 23 ++++++++++++++--------- src/components/ListItem.jsx | 36 ++++++++++++++++-------------------- src/utils/dates.js | 2 +- src/views/List.jsx | 1 + 4 files changed, 32 insertions(+), 30 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 7aaa118..f6e67b4 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -188,20 +188,25 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) { } export async function updateItem(listPath, id, checked) { - //const listCollectionRef = collection(db, listPath, 'items'); - const itemRef = doc(collection(db, listPath, 'items'), id); + const listCollectionRef = collection(db, listPath, 'items'); + const itemRef = doc(listCollectionRef, id); + try { const itemDoc = await getDoc(itemRef); const data = itemDoc.data(); const currentTotalPurchases = data.totalPurchases; - //console.log(currentTotalPurchases) - await updateDoc(itemRef, { - dateLastPurchased: new Date(), - //totalPurchases is undefiend to be debugged - totalPurchases: currentTotalPurchases + 1, - checked: checked, - }); + if (checked) { + await updateDoc(itemRef, { + dateLastPurchased: new Date(), + totalPurchases: currentTotalPurchases + 1, + checked: checked, + }); + } else { + await updateDoc(itemRef, { + checked: checked, + }); + } console.log('item updated'); } catch (error) { diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index 3874406..ebf7d11 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -1,37 +1,33 @@ import './ListItem.css'; import { updateItem } from '../api'; import { useEffect } from 'react'; +import { ONE_DAY_IN_MILLISECONDS } from '../utils/dates'; -export function ListItem({ name, listPath, id, isChecked }) { +export function ListItem({ name, listPath, id, isChecked, datePurchased }) { const handleOnChange = async (event) => { - //console.log(event); - let { value, checked } = event.target; - console.log('value before update', value); - await updateItem(listPath, id, !checked); - if (value) { - console.log('value inside if block', value); - setTimeout(async () => { - await updateItem(listPath, id, !checked); - //checked = isChecked; - console.log('fjkdsvhjkfdsh', value); - }, 5000); - } - console.log(value); + let { checked } = event.target; + if (!checked) return; + + await updateItem(listPath, id, checked); }; - // useEffect(() => { - // setTimeout(async () => { - // await updateItem(listPath, id, !checked); - // }, 1000); - // }, [checked]); + + useEffect(() => { + const today = new Date().getTime(); + const datePurchasedInMillis = datePurchased.toMillis(); + + if (isChecked && today - datePurchasedInMillis >= ONE_DAY_IN_MILLISECONDS) { + updateItem(listPath, id, !isChecked); + } + }, []); return (
    • diff --git a/src/utils/dates.js b/src/utils/dates.js index 9331fda..dc66d95 100644 --- a/src/utils/dates.js +++ b/src/utils/dates.js @@ -1,4 +1,4 @@ -const ONE_DAY_IN_MILLISECONDS = 86400000; +export const ONE_DAY_IN_MILLISECONDS = 86400000; /** * Get a new JavaScript Date that is `offset` days in the future. diff --git a/src/views/List.jsx b/src/views/List.jsx index 26b5b14..dfcaa3c 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -25,6 +25,7 @@ export function List({ data, listPath }) { listPath={listPath} id={item.id} isChecked={item.checked} + datePurchased={item.dateLastPurchased} /> ))} From 44635e0db1db85f1941ccf442ac39fcc99fc9e10 Mon Sep 17 00:00:00 2001 From: wyna Date: Thu, 5 Sep 2024 11:41:20 +0200 Subject: [PATCH 5/5] removed console logs --- src/api/firebase.js | 4 +--- src/views/Home.jsx | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index f6e67b4..1cc9c22 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -207,10 +207,8 @@ export async function updateItem(listPath, id, checked) { checked: checked, }); } - - console.log('item updated'); } catch (error) { - console.log(error); + console.error('There was an error updating the item state: ', error); } } diff --git a/src/views/Home.jsx b/src/views/Home.jsx index a60d268..955854d 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -3,7 +3,6 @@ import './Home.css'; import CreateShoppingList from '../components/CreateShoppingList'; export function Home({ user, data, setListPath }) { - //console.log(user) return (