From a4a8033ed54a710b4672c794eae4a8e0e83692d2 Mon Sep 17 00:00:00 2001 From: Hannah Machado Date: Tue, 12 Mar 2024 15:23:21 -0400 Subject: [PATCH 01/12] started comparePurchaseUrgency function --- src/api/firebase.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/api/firebase.js b/src/api/firebase.js index 7b1b65f..3e6e099 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -209,3 +209,5 @@ export async function deleteItem() { * this function must accept! */ } + +export function comparePurchaseUrgency(array) {} From 1007683be0a31aced5ecf15d0a95a34acd7d7ebe Mon Sep 17 00:00:00 2001 From: Hannah Machado Date: Tue, 12 Mar 2024 15:24:00 -0400 Subject: [PATCH 02/12] started logic for displaying items sorted --- src/components/ListItem.jsx | 64 +++++++++++++++++++++++++++++++------ 1 file changed, 55 insertions(+), 9 deletions(-) diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index 8bebaf9..6372ddf 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -1,5 +1,5 @@ import { updateItem } from '../api'; -import { subtractDates } from '../utils'; +import { getDifferenceBetweenDates } from '../utils'; import { Timestamp } from 'firebase/firestore'; import { calculateEstimate } from '@the-collab-lab/shopping-list-utils'; import './ListItem.css'; @@ -17,16 +17,27 @@ export function ListItem({ // if dateLastPurchased is true subtract it from dateNextPurchased, else subtract dateCreated from dateNextPurchased to get the estimated number of days till next purchase const previousEstimate = Math.ceil( - (dateNextPurchased.toDate() - - (dateLastPurchased ? dateLastPurchased.toDate() : dateCreated.toDate())) / - (24 * 60 * 60 * 1000), + getDifferenceBetweenDates( + dateNextPurchased.toDate(), + dateLastPurchased ? dateLastPurchased.toDate() : dateCreated.toDate(), + ), ); // if dateLastPurchased is true subtract it from todaysDate, else subtract dateCreated from todaysDate to get the number of days since the last transaction const daysSinceLastTransaction = Math.floor( - (todaysDate.toDate() - - (dateLastPurchased ? dateLastPurchased.toDate() : dateCreated.toDate())) / - (24 * 60 * 60 * 1000), + getDifferenceBetweenDates( + todaysDate.toDate(), + dateLastPurchased ? dateLastPurchased.toDate() : dateCreated.toDate(), + ), + ); + + const daysTillNextPurchase = Math.floor( + Math.floor( + getDifferenceBetweenDates( + dateNextPurchased.toDate(), + todaysDate.toDate(), + ), + ), ); const nextPurchaseEstimate = calculateEstimate( @@ -43,16 +54,51 @@ export function ListItem({ } }; + const isChecked = () => { + if (dateLastPurchased) { + return ( + getDifferenceBetweenDates( + todaysDate.toDate(), + dateLastPurchased.toDate(), + ) < 1 + ); + } + + return false; + }; + + let urgency; + if (daysTillNextPurchase < 0) { + urgency = 'overdue'; + } else if (daysTillNextPurchase <= 7) { + urgency = 'soon'; + } else if (daysTillNextPurchase <= 30) { + urgency = 'kind of soon'; + } else { + urgency = 'not so soon'; + } + + if (daysSinceLastTransaction >= 60) { + urgency = 'inactive'; + } + return (
    • From 2204113c06c020e29b0f6a9e0fae4799663bed19 Mon Sep 17 00:00:00 2001 From: Hannah Machado Date: Tue, 12 Mar 2024 15:24:34 -0400 Subject: [PATCH 03/12] removed subtractDates function and replaced with getDifferenceBetweenDates function --- src/utils/dates.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/utils/dates.js b/src/utils/dates.js index 1ff42e0..020a6f3 100644 --- a/src/utils/dates.js +++ b/src/utils/dates.js @@ -11,10 +11,6 @@ export function getFutureDate(offset) { return new Date(Date.now() + offset * ONE_DAY_IN_MILLISECONDS); } -export function subtractDates(todaysDate, dateLastPurchased) { - if (dateLastPurchased) { - return (todaysDate - dateLastPurchased) * 1000 < ONE_DAY_IN_MILLISECONDS; - } - - return false; +export function getDifferenceBetweenDates(date1, date2) { + return (date1 - date2) / (24 * 60 * 60 * 1000); } From 1cb81caf6fb2366ef3962243706d3c3f1c0486d0 Mon Sep 17 00:00:00 2001 From: Hannah Machado Date: Tue, 12 Mar 2024 15:24:55 -0400 Subject: [PATCH 04/12] started sorting logic --- src/views/List.jsx | 60 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 59 insertions(+), 1 deletion(-) diff --git a/src/views/List.jsx b/src/views/List.jsx index 77589f9..c41c7db 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -1,5 +1,6 @@ import { Link } from 'react-router-dom'; import { useState } from 'react'; +import { getDifferenceBetweenDates } from '../utils'; import { ListItem } from '../components/ListItem'; export function List({ data, listPath, loading }) { @@ -22,6 +23,63 @@ export function List({ data, listPath, loading }) { item.name.toLowerCase().includes(search.toLowerCase()), ); + const todaysDate = new Date(); + + const sorted = filteredData.sort((a, b) => { + const date1 = Math.floor( + getDifferenceBetweenDates(a.dateNextPurchased.toDate(), todaysDate), + ); + const date2 = Math.floor( + getDifferenceBetweenDates(b.dateNextPurchased.toDate(), todaysDate), + ); + + const item1 = a.name.toLowerCase(); + + const item2 = b.name.toLowerCase(); + + const daysSinceLastTransaction1 = Math.floor( + getDifferenceBetweenDates( + todaysDate, + a.dateLastPurchased + ? a.dateLastPurchased.toDate() + : a.dateCreated.toDate(), + ), + ); + + const daysSinceLastTransaction2 = Math.floor( + getDifferenceBetweenDates( + todaysDate, + b.dateLastPurchased + ? b.dateLastPurchased.toDate() + : b.dateCreated.toDate(), + ), + ); + + // sort by value of days since last purchased + if (daysSinceLastTransaction1 >= 60 && daysSinceLastTransaction2 < 60) { + return 1; + } else if ( + daysSinceLastTransaction1 < 60 && + daysSinceLastTransaction2 >= 60 + ) { + return -1; + } + + // if dates are not equal sort by difference of dates + if (date1 !== date2) { + return date1 - date2; + } + + // if dates are equal sort by character value + if (item1 < item2) { + return -1; + } else if (item1 > item2) { + return 1; + } + + return 0; + }); + return ( <>

    @@ -45,7 +103,7 @@ export function List({ data, listPath, loading }) {

      - {filteredData.map((item) => ( + {sorted.map((item) => ( Date: Tue, 12 Mar 2024 15:49:03 -0500 Subject: [PATCH 05/12] add switch function for urgency text color to ListItem --- src/api/firebase.js | 57 ++++++++++++++++++++++++++++++++-- src/components/ListItem.jsx | 62 +++++++++++++++++++++++-------------- src/utils/dates.js | 2 ++ src/views/List.jsx | 61 ++---------------------------------- 4 files changed, 98 insertions(+), 84 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 3e6e099..02470b7 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -10,7 +10,7 @@ import { } from 'firebase/firestore'; import { useEffect, useState } from 'react'; import { db } from './config'; -import { getFutureDate } from '../utils'; +import { getFutureDate, getDifferenceBetweenDates, todaysDate } from '../utils'; /** * A custom hook that subscribes to the user's shopping lists in our Firestore @@ -210,4 +210,57 @@ export async function deleteItem() { */ } -export function comparePurchaseUrgency(array) {} +export function comparePurchaseUrgency(array) { + const sorted = array.sort((a, b) => { + const dateA = Math.floor( + getDifferenceBetweenDates(a.dateNextPurchased.toDate(), todaysDate), + ); + const dateB = Math.floor( + getDifferenceBetweenDates(b.dateNextPurchased.toDate(), todaysDate), + ); + + const itemA = a.name.toLowerCase(); + + const itemB = b.name.toLowerCase(); + + const daysSinceLastPurchaseA = Math.floor( + getDifferenceBetweenDates( + todaysDate, + a.dateLastPurchased + ? a.dateLastPurchased.toDate() + : a.dateCreated.toDate(), + ), + ); + + const daysSinceLastPurchaseB = Math.floor( + getDifferenceBetweenDates( + todaysDate, + b.dateLastPurchased + ? b.dateLastPurchased.toDate() + : b.dateCreated.toDate(), + ), + ); + + // sort by value of days since last purchased + if (daysSinceLastPurchaseA >= 60 && daysSinceLastPurchaseB < 60) { + return 1; + } else if (daysSinceLastPurchaseA < 60 && daysSinceLastPurchaseB >= 60) { + return -1; + } + + // if dates are not equal sort by difference of dates + if (dateA !== dateB) { + return dateA - dateB; + } + + // if dates are equal sort by character value + if (itemA < itemB) { + return -1; + } else if (itemA > itemB) { + return 1; + } + + return 0; + }); + return sorted; +} diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index 6372ddf..2dd4748 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -1,5 +1,5 @@ import { updateItem } from '../api'; -import { getDifferenceBetweenDates } from '../utils'; +import { getDifferenceBetweenDates, todaysDate } from '../utils'; import { Timestamp } from 'firebase/firestore'; import { calculateEstimate } from '@the-collab-lab/shopping-list-utils'; import './ListItem.css'; @@ -13,8 +13,6 @@ export function ListItem({ totalPurchases, dateCreated, }) { - const todaysDate = Timestamp.now(); - // if dateLastPurchased is true subtract it from dateNextPurchased, else subtract dateCreated from dateNextPurchased to get the estimated number of days till next purchase const previousEstimate = Math.ceil( getDifferenceBetweenDates( @@ -24,29 +22,27 @@ export function ListItem({ ); // if dateLastPurchased is true subtract it from todaysDate, else subtract dateCreated from todaysDate to get the number of days since the last transaction - const daysSinceLastTransaction = Math.floor( + const daysSinceLastPurchase = Math.floor( getDifferenceBetweenDates( - todaysDate.toDate(), + todaysDate, dateLastPurchased ? dateLastPurchased.toDate() : dateCreated.toDate(), ), ); const daysTillNextPurchase = Math.floor( Math.floor( - getDifferenceBetweenDates( - dateNextPurchased.toDate(), - todaysDate.toDate(), - ), + getDifferenceBetweenDates(dateNextPurchased.toDate(), todaysDate), ), ); const nextPurchaseEstimate = calculateEstimate( previousEstimate, - daysSinceLastTransaction, + daysSinceLastPurchase, totalPurchases, ); const handleChecked = async () => { + const todaysDate = Timestamp.now(); try { await updateItem(listPath, id, todaysDate, nextPurchaseEstimate); } catch (err) { @@ -57,10 +53,7 @@ export function ListItem({ const isChecked = () => { if (dateLastPurchased) { return ( - getDifferenceBetweenDates( - todaysDate.toDate(), - dateLastPurchased.toDate(), - ) < 1 + getDifferenceBetweenDates(todaysDate, dateLastPurchased.toDate()) < 1 ); } @@ -68,31 +61,52 @@ export function ListItem({ }; let urgency; - if (daysTillNextPurchase < 0) { + if ( + daysTillNextPurchase < 0 && + daysSinceLastPurchase > daysTillNextPurchase + ) { urgency = 'overdue'; } else if (daysTillNextPurchase <= 7) { urgency = 'soon'; - } else if (daysTillNextPurchase <= 30) { + } else if (daysTillNextPurchase < 30) { urgency = 'kind of soon'; - } else { + } else if (daysTillNextPurchase >= 30) { urgency = 'not so soon'; } - if (daysSinceLastTransaction >= 60) { + if (daysSinceLastPurchase >= 60) { urgency = 'inactive'; } + let textColor = ''; + switch (urgency) { + case 'overdue': + textColor = 'red'; + break; + case 'soon': + textColor = 'orange'; + break; + case 'kind of soon': + textColor = 'yellow'; + break; + case 'not so soon': + textColor = 'green'; + break; + case 'inactive': + textColor = 'grey'; + break; + default: + textColor = 'black'; + } + return (