Implement future purcahse date tracker

package.json

@@ -7,6 +7,7 @@
 		"npm": ">=8.19.0"
 	},
 	"dependencies": {
+		"@the-collab-lab/shopping-list-utils": "^2.2.0",
 		"@uidotdev/usehooks": "^2.4.1",
 		"firebase": "^10.12.5",
 		"react": "^18.3.1",

src/api/firebase.js

@@ -10,8 +10,8 @@ import {
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
-import { getFutureDate } from '../utils';
-
+import { getFutureDate, getDaysBetweenDates } from '../utils';
+import { calculateEstimate } from '@the-collab-lab/shopping-list-utils';
 /**
  * A custom hook that subscribes to the user's shopping lists in our Firestore
  * database and returns new data whenever the lists change.
@@ -186,6 +186,7 @@ export async function shareList(listPath, currentUserId, recipientEmail) {
 export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
 	const listCollectionRef = collection(db, listPath, 'items');
 	// TODO: Replace this call to console.log with the appropriate
+	console.log('hello', daysUntilNextPurchase);
 	// Firebase function, so this information is sent to your database!
 	return await addDoc(listCollectionRef, {
 		dateCreated: new Date(),
@@ -195,12 +196,20 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
 		dateNextPurchased: getFutureDate(daysUntilNextPurchase),
 		name: itemName,
 		totalPurchases: 0,
+		interval: daysUntilNextPurchase,
 	});
 }
 
 export async function updateItem(
 	listPath,
-	{ itemId, totalPurchases, dateLastPurchased },
+	{
+		itemId,
+		totalPurchases,
+		dateLastPurchased,
+		previousLastPurchaseDate,
+		interval,
+		dateCreated,
+	},
 ) {
 	/**
 	 * TODO: Fill this out so that it uses the correct Firestore function
@@ -209,9 +218,29 @@ export async function updateItem(
 	 */
 	const itemDocRef = doc(db, `${listPath}/items`, itemId);
 
+	let daysSinceLastPurchase;
+
+	if (previousLastPurchaseDate) {
+		daysSinceLastPurchase = getDaysBetweenDates(previousLastPurchaseDate);
+	} else {
+		daysSinceLastPurchase = getDaysBetweenDates(dateCreated);
+	}
+	console.log('daysSinceLastPurchase', daysSinceLastPurchase);
+	const daysUntilNextPurchase = calculateEstimate(
+		interval,
+		daysSinceLastPurchase,
+		totalPurchases,
+	);
+	console.log('days until NEXT purcahse', daysUntilNextPurchase);
+	interval = daysUntilNextPurchase;
+
+	const dateNextPurchased = getFutureDate(daysUntilNextPurchase);
+
 	await updateDoc(itemDocRef, {
 		totalPurchases,
 		dateLastPurchased,
+		dateNextPurchased,
+		interval,
 	});
 }
 

src/components/ListItem.jsx

@@ -10,6 +10,8 @@ export function ListItem({
 	itemId,
 	totalPurchases,
 	dateLastPurchased,
+	interval,
+	dateCreated,
 }) {
 	const [purchased, setPurchased] = useToggle(false);
 	const [isDisabled, setIsDisabled] = useState(false);
@@ -41,10 +43,15 @@ export function ListItem({
 
 		if (isPurchasing) {
 			try {
+				const previousLastPurchaseDate = dateLastPurchased;
+
 				await updateItem(listPath, {
 					itemId,
 					totalPurchases: totalPurchases + 1,
 					dateLastPurchased: new Date(),
+					previousLastPurchaseDate,
+					interval,
+					dateCreated,
 				});
 				console.log(`${name} updated successfully`);
 				alert(`${name} is purchased successfully`);

src/utils/dates.js

@@ -10,3 +10,14 @@ const ONE_DAY_IN_MILLISECONDS = 86400000;
 export function getFutureDate(offset) {
 	return new Date(Date.now() + offset * ONE_DAY_IN_MILLISECONDS);
 }
+export function getDaysBetweenDates(previousPurchaseDate) {
+	const pastDate = previousPurchaseDate.toDate();
+	console.log('past date', pastDate);
+	const presentDate = new Date();
+
+	const diffInMilliseconds = presentDate.getTime() - pastDate.getTime();
+	console.log('diff', diffInMilliseconds);
+	const days = Math.round(diffInMilliseconds / ONE_DAY_IN_MILLISECONDS);
+	console.log('days', days);
+	return days;
+}

src/views/List.jsx

@@ -1,12 +1,10 @@
 import { useState } from 'react';
 import { ListItem } from '../components';
-// import { useNavigate } from 'react-router-dom';
 import { NavLink } from 'react-router-dom';
 
 export function List({ data, listPath }) {
 	const [searchInput, setSearchInput] = useState('');
-	//const navigate = useNavigate();
-
+	console.log(data);
 	const handleInputChange = (e) => {
 		setSearchInput(e.target.value);
 	};
@@ -63,6 +61,8 @@ export function List({ data, listPath }) {
 								listPath={listPath}
 								totalPurchases={item.totalPurchases}
 								dateLastPurchased={item.dateLastPurchased}
+								interval={item.interval}
+								dateCreated={item.dateCreated}
 							/>
 						);
 					})