From bdec39e18a6947e0b433d14db4310f21af561b11 Mon Sep 17 00:00:00 2001 From: DoribelTerceroParker Date: Mon, 16 Sep 2024 14:45:47 -0400 Subject: [PATCH 1/7] feat(#13): implement sort list by purchase history export function comparePurchaseUrgency dates.js: update param name and logic to handle future and past dates List.jsx: import comparePurchaseUrgency --- src/api/firebase.js | 15 +++++++++++++++ src/utils/dates.js | 9 ++++++--- src/views/List.jsx | 1 + 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 51bcd91..f0c3489 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -176,6 +176,21 @@ export async function shareList(listPath, currentUserId, recipientEmail) { ); } +export function comparePurchaseUrgency(list) { + // Create a copy of the list to avoid mutating original array + const sortedList = [...list].sort((a, b) => { + const daysA = getDaysBetweenDates(a.dateNextPurchased); + const daysB = getDaysBetweenDates(b.dateNextPurchased); + // Inactive items (60 days or more) + // Sort by dats until next purchase + if (daysA < daysB) return -1; + if (daysB < daysA) return 1; + // If days are the same, sort alphabetically + return a.name.localeCompare(b.name); + }); + return sortedList; +} + /** * Add a new item to the user's list in Firestore. * @param {string} listPath The path of the list we're adding to. diff --git a/src/utils/dates.js b/src/utils/dates.js index 513bdac..7601dc9 100644 --- a/src/utils/dates.js +++ b/src/utils/dates.js @@ -10,9 +10,12 @@ 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(); +export function getDaysBetweenDates(dateToCompare) { + const comparisonDate = dateToCompare.toDate(); + console.log(comparisonDate); const presentDate = new Date(); - const diffInMilliseconds = presentDate.getTime() - pastDate.getTime(); + const diffInMilliseconds = Math.abs( + presentDate.getTime() - comparisonDate.getTime(), + ); return Math.round(diffInMilliseconds / ONE_DAY_IN_MILLISECONDS); } diff --git a/src/views/List.jsx b/src/views/List.jsx index 74aed42..cc16037 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { ListItem } from '../components'; import { NavLink } from 'react-router-dom'; +import { comparePurchaseUrgency } from '../api/firebase'; export function List({ data, listPath }) { const [searchInput, setSearchInput] = useState(''); From 69d35e8b43921bd483bc8676fccec668fb30d627 Mon Sep 17 00:00:00 2001 From: NickRoccodev11 Date: Mon, 16 Sep 2024 16:08:33 -0400 Subject: [PATCH 2/7] fix: update comparePurchase urgency function to handle overdue dates filter shopping list to separate out past purchase dates and pending purchase dates into two lists append the lists to eachother so overdue dates come first --- src/api/firebase.js | 47 +++++++++++++++++++++++++++++++++++---------- src/utils/dates.js | 4 +--- src/views/List.jsx | 3 +++ 3 files changed, 41 insertions(+), 13 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index f0c3489..29b14ca 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -178,17 +178,44 @@ export async function shareList(listPath, currentUserId, recipientEmail) { export function comparePurchaseUrgency(list) { // Create a copy of the list to avoid mutating original array - const sortedList = [...list].sort((a, b) => { - const daysA = getDaysBetweenDates(a.dateNextPurchased); - const daysB = getDaysBetweenDates(b.dateNextPurchased); - // Inactive items (60 days or more) - // Sort by dats until next purchase - if (daysA < daysB) return -1; - if (daysB < daysA) return 1; - // If days are the same, sort alphabetically - return a.name.localeCompare(b.name); + const overdueItems = []; + const pendingItems = []; + list.forEach((item) => { + const dateToCompare = item.dateNextPurchased.toDate(); + const now = new Date(); + if (dateToCompare < now) { + overdueItems.push(item); + } else { + pendingItems.push(item); + } }); - return sortedList; + const sortList = (list) => { + const sortedList = [...list].sort((a, b) => { + const daysA = getDaysBetweenDates(a.dateNextPurchased); + const daysB = getDaysBetweenDates(b.dateNextPurchased); + if (daysA < daysB) return -1; + if (daysB < daysA) return 1; + // If days are the same, sort alphabetically + return a.name.localeCompare(b.name); + }); + return sortedList; + }; + return sortList(overdueItems).concat(pendingItems); + // const sortedList = [...list].sort((a, b) => { + // const daysA = getDaysBetweenDates(a.dateNextPurchased); + // const daysB = getDaysBetweenDates(b.dateNextPurchased); + // a.daysUntilPurchase = daysA; + // b.daysUntilPurchase = daysB; + // //if daysA< 7 the call it soon + // //if daysA >7 and < 30 call it + // // Inactive items (60 days or more) + // // Sort by dats until next purchase + // if (daysA < daysB) return -1; + // if (daysB < daysA) return 1; + // // If days are the same, sort alphabetically + // return a.name.localeCompare(b.name); + // }); + // return sortedList; } /** diff --git a/src/utils/dates.js b/src/utils/dates.js index 7601dc9..185c2d9 100644 --- a/src/utils/dates.js +++ b/src/utils/dates.js @@ -14,8 +14,6 @@ export function getDaysBetweenDates(dateToCompare) { const comparisonDate = dateToCompare.toDate(); console.log(comparisonDate); const presentDate = new Date(); - const diffInMilliseconds = Math.abs( - presentDate.getTime() - comparisonDate.getTime(), - ); + const diffInMilliseconds = presentDate.getTime() - comparisonDate.getTime(); return Math.round(diffInMilliseconds / ONE_DAY_IN_MILLISECONDS); } diff --git a/src/views/List.jsx b/src/views/List.jsx index cc16037..d82cdf5 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -9,6 +9,9 @@ export function List({ data, listPath }) { setSearchInput(e.target.value); }; + let sorted = comparePurchaseUrgency(data); + console.log(sorted); + const clearSearchInput = () => { setSearchInput(''); }; From 86518ecb04f47bcf44dd59e5f92490664d2aec68 Mon Sep 17 00:00:00 2001 From: NickRoccodev11 Date: Tue, 17 Sep 2024 14:26:57 -0400 Subject: [PATCH 3/7] fix(#13): refactor comparePurchaseUrgency to categorize and sort shopping list items based on urgency Categories are: inactive, overdue, and future. Overdue items appear first, followed by future dates, and finally inactive items. --- src/api/firebase.js | 64 ++++++++++++++++++++++++--------------------- src/utils/dates.js | 1 - src/views/List.jsx | 7 ++++- 3 files changed, 40 insertions(+), 32 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 29b14ca..48dd589 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -177,45 +177,49 @@ export async function shareList(listPath, currentUserId, recipientEmail) { } export function comparePurchaseUrgency(list) { - // Create a copy of the list to avoid mutating original array - const overdueItems = []; - const pendingItems = []; + const inactive = []; + const overdue = []; + const future = []; + //iterate through the list and categorize each item list.forEach((item) => { - const dateToCompare = item.dateNextPurchased.toDate(); - const now = new Date(); - if (dateToCompare < now) { - overdueItems.push(item); + //positive numbers represent the past, negative numbers represent the future + const days = getDaysBetweenDates(item.dateNextPurchased); + if (days >= 60) { + //flip the days to negative for inactive items + item.sortCriteria = { tag: 'inactive', daysUntilNextPurchase: -days }; + inactive.push(item); + } else if (days < 60 && days > 0) { + item.sortCriteria = { tag: 'overdue', daysUntilNextPurchase: days }; + overdue.push(item); } else { - pendingItems.push(item); + item.sortCriteria = { tag: 'future', daysUntilNextPurchase: days }; + future.push(item); } }); + //function to sort lists by days until next purchase and alphabetically if days are equal const sortList = (list) => { const sortedList = [...list].sort((a, b) => { - const daysA = getDaysBetweenDates(a.dateNextPurchased); - const daysB = getDaysBetweenDates(b.dateNextPurchased); - if (daysA < daysB) return -1; - if (daysB < daysA) return 1; - // If days are the same, sort alphabetically - return a.name.localeCompare(b.name); + if ( + a.sortCriteria.daysUntilNextPurchase === + b.sortCriteria.daysUntilNextPurchase + ) { + //sorts alphabetically if days are the same + return a.name.localeCompare(b.name); + } + return ( + //sort by days until next purchase + b.sortCriteria.daysUntilNextPurchase - + a.sortCriteria.daysUntilNextPurchase + ); }); return sortedList; }; - return sortList(overdueItems).concat(pendingItems); - // const sortedList = [...list].sort((a, b) => { - // const daysA = getDaysBetweenDates(a.dateNextPurchased); - // const daysB = getDaysBetweenDates(b.dateNextPurchased); - // a.daysUntilPurchase = daysA; - // b.daysUntilPurchase = daysB; - // //if daysA< 7 the call it soon - // //if daysA >7 and < 30 call it - // // Inactive items (60 days or more) - // // Sort by dats until next purchase - // if (daysA < daysB) return -1; - // if (daysB < daysA) return 1; - // // If days are the same, sort alphabetically - // return a.name.localeCompare(b.name); - // }); - // return sortedList; + + const sortedOverdue = sortList(overdue); + const sortedFuture = sortList(future); + const sortedInactive = sortList(inactive); + + return sortedOverdue.concat(sortedFuture).concat(sortedInactive); } /** diff --git a/src/utils/dates.js b/src/utils/dates.js index 185c2d9..baeeb28 100644 --- a/src/utils/dates.js +++ b/src/utils/dates.js @@ -12,7 +12,6 @@ export function getFutureDate(offset) { } export function getDaysBetweenDates(dateToCompare) { const comparisonDate = dateToCompare.toDate(); - console.log(comparisonDate); const presentDate = new Date(); const diffInMilliseconds = presentDate.getTime() - comparisonDate.getTime(); return Math.round(diffInMilliseconds / ONE_DAY_IN_MILLISECONDS); diff --git a/src/views/List.jsx b/src/views/List.jsx index d82cdf5..7e4d6e5 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -10,7 +10,11 @@ export function List({ data, listPath }) { }; let sorted = comparePurchaseUrgency(data); - console.log(sorted); + let names = []; + sorted.forEach((item) => { + names.push(item.name); + }); + console.log('names', names); const clearSearchInput = () => { setSearchInput(''); @@ -21,6 +25,7 @@ export function List({ data, listPath }) { ? item.name.toLowerCase().includes(searchInput.toLowerCase()) : item; }); + const listInfo = comparePurchaseUrgency(filterList); return ( <> From 1161bc4bf5c9c19d59e904163c65902a41b95a5d Mon Sep 17 00:00:00 2001 From: DoribelTerceroParker Date: Tue, 17 Sep 2024 15:52:10 -0400 Subject: [PATCH 4/7] feat(#13): display purchaseUrgency on List.jsx and refactor jsx from list to table --- src/api/firebase.js | 20 +++++++++++--- src/components/ListItem.css | 11 +++++++- src/components/ListItem.jsx | 29 +++++++++++-------- src/views/List.jsx | 55 ++++++++++++++++++++++++++++--------- 4 files changed, 85 insertions(+), 30 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 48dd589..0e8c82b 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -186,13 +186,25 @@ export function comparePurchaseUrgency(list) { const days = getDaysBetweenDates(item.dateNextPurchased); if (days >= 60) { //flip the days to negative for inactive items - item.sortCriteria = { tag: 'inactive', daysUntilNextPurchase: -days }; + item.sortCriteria = { + tag: 'No longer active', + daysUntilNextPurchase: -days, + }; inactive.push(item); } else if (days < 60 && days > 0) { - item.sortCriteria = { tag: 'overdue', daysUntilNextPurchase: days }; + item.sortCriteria = { tag: 'Past due date', daysUntilNextPurchase: days }; overdue.push(item); - } else { - item.sortCriteria = { tag: 'future', daysUntilNextPurchase: days }; + } else if (days <= 0 && days >= -7) { + item.sortCriteria = { tag: 'Due soon', daysUntilNextPurchase: days }; + future.push(item); + } else if (days < -7 && days >= -30) { + item.sortCriteria = { + tag: 'Due kind of soon', + daysUntilNextPurchase: days, + }; + future.push(item); + } else if (days < -30) { + item.sortCriteria = { tag: 'Due not soon', daysUntilNextPurchase: days }; future.push(item); } }); diff --git a/src/components/ListItem.css b/src/components/ListItem.css index 492e345..172be81 100644 --- a/src/components/ListItem.css +++ b/src/components/ListItem.css @@ -1,4 +1,4 @@ -.ListItem { +/* .ListItem { display: flex; flex-direction: row; align-items: center; @@ -19,4 +19,13 @@ .item-name { flex-grow: 1; margin-right: 10px; +} */ + +td { + border-bottom: 1px solid whitesmoke; +} + +th { + background-color: #3e27ed; + border-bottom: 2px solid #ddd; } diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index 94eb733..e0513bd 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -12,6 +12,7 @@ export function ListItem({ dateLastPurchased, purchaseInterval, dateCreated, + sortCriteria, }) { const [purchased, setPurchased] = useToggle(false); const [isDisabled, setIsDisabled] = useState(false); @@ -61,18 +62,22 @@ export function ListItem({ return ( <> -
  • -
    {name}
    - - - {dateLastPurchased ? dateLastPurchased.toDate().toLocaleString() : ''} -
    • + + {name} + + + + + {dateLastPurchased ? dateLastPurchased.toDate().toLocaleString() : ''} + + {sortCriteria.tag} + ); } diff --git a/src/views/List.jsx b/src/views/List.jsx index 7e4d6e5..ad2c9dd 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -9,23 +9,17 @@ export function List({ data, listPath }) { setSearchInput(e.target.value); }; - let sorted = comparePurchaseUrgency(data); - let names = []; - sorted.forEach((item) => { - names.push(item.name); - }); - console.log('names', names); - const clearSearchInput = () => { setSearchInput(''); }; - const filterList = data.filter((item) => { + const sortedByUrgency = comparePurchaseUrgency(data); + + const filterList = sortedByUrgency.filter((item) => { return searchInput ? item.name.toLowerCase().includes(searchInput.toLowerCase()) : item; }); - const listInfo = comparePurchaseUrgency(filterList); return ( <> @@ -58,7 +52,40 @@ export function List({ data, listPath }) { )} -
      + {filterList.length ? ( + + + + + + + + + + + {filterList.map((item) => ( + + ))} + +
      ProductBuy NowLast Purchase DateUrgency
      + ) : ( +

      No items to display

      + )} + + ); +} +{ + /*
        {filterList.length ? ( filterList.map((item) => { return ( @@ -71,6 +98,7 @@ export function List({ data, listPath }) { dateLastPurchased={item.dateLastPurchased} purchaseInterval={item.purchaseInterval} dateCreated={item.dateCreated} + sortCriteria={item.sortCriteria} /> ); }) @@ -80,7 +108,8 @@ export function List({ data, listPath }) { No items found! Add item )} -
      - - ); +
    */ } +// +// ); +// } From e097d2f6e3d2c485782e2d5d012771dd539c34d7 Mon Sep 17 00:00:00 2001 From: NickRoccodev11 Date: Wed, 18 Sep 2024 13:22:08 -0400 Subject: [PATCH 5/7] fix: rename getDaysBetweenDates to calculateDaysDifferenceFromNow, relocate comparePurchaseUrgency to dates.jsx --- src/api/firebase.js | 68 +++++---------------------------------------- src/utils/dates.js | 64 +++++++++++++++++++++++++++++++++++++++++- src/views/List.jsx | 2 +- 3 files changed, 71 insertions(+), 63 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 0e8c82b..45daed8 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -10,7 +10,11 @@ import { } from 'firebase/firestore'; import { useEffect, useState } from 'react'; import { db } from './config'; -import { getFutureDate, getDaysBetweenDates } from '../utils'; +import { + getFutureDate, + cal, + calculateDaysDifferenceFromNowculateDaysDifferenceFromNow, +} 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 @@ -176,64 +180,6 @@ export async function shareList(listPath, currentUserId, recipientEmail) { ); } -export function comparePurchaseUrgency(list) { - const inactive = []; - const overdue = []; - const future = []; - //iterate through the list and categorize each item - list.forEach((item) => { - //positive numbers represent the past, negative numbers represent the future - const days = getDaysBetweenDates(item.dateNextPurchased); - if (days >= 60) { - //flip the days to negative for inactive items - item.sortCriteria = { - tag: 'No longer active', - daysUntilNextPurchase: -days, - }; - inactive.push(item); - } else if (days < 60 && days > 0) { - item.sortCriteria = { tag: 'Past due date', daysUntilNextPurchase: days }; - overdue.push(item); - } else if (days <= 0 && days >= -7) { - item.sortCriteria = { tag: 'Due soon', daysUntilNextPurchase: days }; - future.push(item); - } else if (days < -7 && days >= -30) { - item.sortCriteria = { - tag: 'Due kind of soon', - daysUntilNextPurchase: days, - }; - future.push(item); - } else if (days < -30) { - item.sortCriteria = { tag: 'Due not soon', daysUntilNextPurchase: days }; - future.push(item); - } - }); - //function to sort lists by days until next purchase and alphabetically if days are equal - const sortList = (list) => { - const sortedList = [...list].sort((a, b) => { - if ( - a.sortCriteria.daysUntilNextPurchase === - b.sortCriteria.daysUntilNextPurchase - ) { - //sorts alphabetically if days are the same - return a.name.localeCompare(b.name); - } - return ( - //sort by days until next purchase - b.sortCriteria.daysUntilNextPurchase - - a.sortCriteria.daysUntilNextPurchase - ); - }); - return sortedList; - }; - - const sortedOverdue = sortList(overdue); - const sortedFuture = sortList(future); - const sortedInactive = sortList(inactive); - - return sortedOverdue.concat(sortedFuture).concat(sortedInactive); -} - /** * Add a new item to the user's list in Firestore. * @param {string} listPath The path of the list we're adding to. @@ -267,9 +213,9 @@ export async function updateItem( let daysSinceLastPurchase; if (dateLastPurchased) { - daysSinceLastPurchase = getDaysBetweenDates(dateLastPurchased); + daysSinceLastPurchase = calculateDaysDifferenceFromNow(dateLastPurchased); } else { - daysSinceLastPurchase = getDaysBetweenDates(dateCreated); + daysSinceLastPurchase = calculateDaysDifferenceFromNow(dateCreated); } // Calculate days until next purchase diff --git a/src/utils/dates.js b/src/utils/dates.js index baeeb28..0611881 100644 --- a/src/utils/dates.js +++ b/src/utils/dates.js @@ -10,9 +10,71 @@ const ONE_DAY_IN_MILLISECONDS = 86400000; export function getFutureDate(offset) { return new Date(Date.now() + offset * ONE_DAY_IN_MILLISECONDS); } -export function getDaysBetweenDates(dateToCompare) { +export function calculateDaysDifferenceFromNow(dateToCompare) { const comparisonDate = dateToCompare.toDate(); const presentDate = new Date(); const diffInMilliseconds = presentDate.getTime() - comparisonDate.getTime(); return Math.round(diffInMilliseconds / ONE_DAY_IN_MILLISECONDS); } + +export function comparePurchaseUrgency(list) { + const inactive = []; + const overdue = []; + const future = []; + //iterate through the list and categorize each item + list.forEach((item) => { + //positive numbers represent the past, negative numbers represent the future + const days = calculateDaysDifferenceFromNow(item.dateNextPurchased); + if (days >= 60) { + /* + -If sixty or more days have passed since the last purchase, we consider the item inactive. + -We flip the days to negative* to represent inactivity because inactive items should be sorted in reverse order from overdue and future items. + -For instance, an item that is 62 days overdue will be placed below an item that is 61 days overdue. It is less relevant to the user because more time has elapsed since they engaged with it. + */ + item.sortCriteria = { + tag: 'No longer active', + daysUntilNextPurchase: -days, // * flip the days to negative + }; + inactive.push(item); + } else if (days < 60 && days > 0) { + item.sortCriteria = { tag: 'Past due date', daysUntilNextPurchase: days }; + overdue.push(item); + } else if (days <= 0 && days >= -7) { + item.sortCriteria = { tag: 'Due soon', daysUntilNextPurchase: days }; + future.push(item); + } else if (days < -7 && days >= -30) { + item.sortCriteria = { + tag: 'Due kind of soon', + daysUntilNextPurchase: days, + }; + future.push(item); + } else if (days < -30) { + item.sortCriteria = { tag: 'Due not soon', daysUntilNextPurchase: days }; + future.push(item); + } + }); + //function to sort lists by days until next purchase and alphabetically if days are equal + const sortList = (list) => { + const sortedList = [...list].sort((a, b) => { + if ( + a.sortCriteria.daysUntilNextPurchase === + b.sortCriteria.daysUntilNextPurchase + ) { + //sorts alphabetically if days are the same + return a.name.localeCompare(b.name); + } + return ( + //sort by days until next purchase + b.sortCriteria.daysUntilNextPurchase - + a.sortCriteria.daysUntilNextPurchase + ); + }); + return sortedList; + }; + + const sortedOverdue = sortList(overdue); + const sortedFuture = sortList(future); + const sortedInactive = sortList(inactive); + + return sortedOverdue.concat(sortedFuture).concat(sortedInactive); +} diff --git a/src/views/List.jsx b/src/views/List.jsx index ad2c9dd..08b6cad 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { ListItem } from '../components'; import { NavLink } from 'react-router-dom'; -import { comparePurchaseUrgency } from '../api/firebase'; +import { comparePurchaseUrgency } from '../utils/dates.js'; export function List({ data, listPath }) { const [searchInput, setSearchInput] = useState(''); From 6307f89d2df775116c708a880035ca6aeb04efbe Mon Sep 17 00:00:00 2001 From: DoribelTerceroParker Date: Wed, 18 Sep 2024 13:53:08 -0400 Subject: [PATCH 6/7] feat(#13): apply css to urgency labels --- src/api/firebase.js | 6 +----- src/components/ListItem.css | 25 +++++++++++++++++++++++++ src/components/ListItem.jsx | 4 +++- src/utils/dates.js | 4 ++-- src/views/List.jsx | 37 ++++--------------------------------- 5 files changed, 35 insertions(+), 41 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 45daed8..5b3fa10 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -10,11 +10,7 @@ import { } from 'firebase/firestore'; import { useEffect, useState } from 'react'; import { db } from './config'; -import { - getFutureDate, - cal, - calculateDaysDifferenceFromNowculateDaysDifferenceFromNow, -} from '../utils'; +import { getFutureDate, calculateDaysDifferenceFromNow } 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 diff --git a/src/components/ListItem.css b/src/components/ListItem.css index 172be81..d034cfc 100644 --- a/src/components/ListItem.css +++ b/src/components/ListItem.css @@ -29,3 +29,28 @@ th { background-color: #3e27ed; border-bottom: 2px solid #ddd; } + +.duesoon { + color: orange; + font-weight: bold; +} + +.duekindofsoon { + color: yellow; + font-weight: bold; +} + +.notduesoon { + color: green; + font-weight: bold; +} + +.nolongeractive { + color: gray; + font-weight: bold; +} + +.overdue { + color: red; + font-weight: bold; +} diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index e0513bd..e956eef 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -60,6 +60,8 @@ export function ListItem({ } }; + const urgencyClass = sortCriteria.tag.toLowerCase().replace(/\s/g, ''); + return ( <> @@ -76,7 +78,7 @@ export function ListItem({ {dateLastPurchased ? dateLastPurchased.toDate().toLocaleString() : ''} - {sortCriteria.tag} + {sortCriteria.tag} ); diff --git a/src/utils/dates.js b/src/utils/dates.js index 0611881..020da79 100644 --- a/src/utils/dates.js +++ b/src/utils/dates.js @@ -37,7 +37,7 @@ export function comparePurchaseUrgency(list) { }; inactive.push(item); } else if (days < 60 && days > 0) { - item.sortCriteria = { tag: 'Past due date', daysUntilNextPurchase: days }; + item.sortCriteria = { tag: 'Overdue', daysUntilNextPurchase: days }; overdue.push(item); } else if (days <= 0 && days >= -7) { item.sortCriteria = { tag: 'Due soon', daysUntilNextPurchase: days }; @@ -49,7 +49,7 @@ export function comparePurchaseUrgency(list) { }; future.push(item); } else if (days < -30) { - item.sortCriteria = { tag: 'Due not soon', daysUntilNextPurchase: days }; + item.sortCriteria = { tag: 'Not due soon', daysUntilNextPurchase: days }; future.push(item); } }); diff --git a/src/views/List.jsx b/src/views/List.jsx index 08b6cad..fc72180 100644 --- a/src/views/List.jsx +++ b/src/views/List.jsx @@ -56,10 +56,10 @@ export function List({ data, listPath }) { - - - - + + + + @@ -84,32 +84,3 @@ export function List({ data, listPath }) { ); } -{ - /*
      - {filterList.length ? ( - filterList.map((item) => { - return ( - - ); - }) - ) : ( -
    • - {' '} - No items found! Add item -
      • - )} -
    */ -} -// -// ); -// } From 783557425999a8dc82288722d4933f1bd1c4a930 Mon Sep 17 00:00:00 2001 From: DoribelTerceroParker Date: Sat, 21 Sep 2024 09:12:15 -0400 Subject: [PATCH 7/7] fix(#13): delete unused CSS from ListItem.css --- src/components/ListItem.css | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/src/components/ListItem.css b/src/components/ListItem.css index d034cfc..6a4200d 100644 --- a/src/components/ListItem.css +++ b/src/components/ListItem.css @@ -1,26 +1,3 @@ -/* .ListItem { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - padding: 8px; - border-bottom: 1px solid var(--color-border); - font-size: 1.2em; -} - -.ListItem-checkbox { - accent-color: var(--color-accent); -} - -.ListItem-label { - margin-left: 0.2em; -} - -.item-name { - flex-grow: 1; - margin-right: 10px; -} */ - td { border-bottom: 1px solid whitesmoke; }
    ProductBuy NowLast Purchase DateUrgencyProductBuy NowLast Purchase DateUrgency