indicators next to listItems

src/api/firebase.js

@@ -239,3 +239,7 @@ export async function deleteItem() {
 	 * this function must accept!
 	 */
 }
+
+export function comparePurchaseUrgency(arr) {
+	return arr.sort();
+}

src/components/ListItem.jsx

@@ -1,14 +1,15 @@
 import './ListItem.css';
 import { updateItem } from '../api';
 import { useEffect } from 'react';
-import { ONE_DAY_IN_MILLISECONDS } from '../utils/dates';
+import { ONE_DAY_IN_MILLISECONDS, getDaysBetweenDates } from '../utils/dates';
 
 export function ListItem({
 	listPath,
 	name,
 	id,
 	isChecked,
 	dateLastPurchased,
+	dateNextPurchased,
 	totalPurchases,
 	dayInterval,
 	dateCreated,
@@ -26,6 +27,36 @@ export function ListItem({
 		});
 	};
 
+	//We are repeating logic form firebase file, maybe we should extract this into a function?
+
+	const dateLastPurchasedJavaScriptObject = dateLastPurchased
+		? dateLastPurchased.toDate()
+		: dateCreated.toDate();
+
+	const daysSinceLastPurchase = getDaysBetweenDates(
+		new Date(),
+		dateLastPurchasedJavaScriptObject,
+	);
+
+	const daysUntilNextPurchase = getDaysBetweenDates(
+		dateNextPurchased.toDate(),
+		new Date(),
+	);
+
+	//_________
+
+	const getIndicator = () => {
+		if (daysSinceLastPurchase > 60) {
+			return 'Inactive';
+		} else if (daysUntilNextPurchase <= 7) {
+			return 'Soon';
+		} else if (daysUntilNextPurchase > 7 && daysUntilNextPurchase < 30) {
+			return 'Kind of soon';
+		} else if (daysUntilNextPurchase >= 30) {
+			return 'Not soon';
+		}
+	};
+
 	useEffect(() => {
 		const today = new Date().getTime();
 		const datePurchasedInMillis = dateLastPurchased?.toMillis();
@@ -51,6 +82,8 @@ export function ListItem({
 				disabled={isChecked}
 			/>
 			<label htmlFor={`${id}`}>{name}</label>
+			{/* Add CSS to dynamically change bg-color for badges? */}
+			<p className="TimeBadge">{getIndicator()}</p>
 		</li>
 	);
 }

src/components/SingleList.css

@@ -8,3 +8,14 @@
 .SingleList-label {
 	margin-left: 0.2em;
 }
+
+.ListItem {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+}
+
+.TimeBadge {
+	margin: 8px;
+	font-size: small;
+}

src/views/List.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { ListItem, SearchBar } from '../components';
 import { useNavigate } from 'react-router-dom';
+import { comparePurchaseUrgency } from '../api/firebase';
 
 export function List({ data, listPath }) {
 	const [search, setSearch] = useState('');
@@ -11,6 +12,9 @@ export function List({ data, listPath }) {
 		setDisplayData([...data]);
 	}, [data]);
 
+	const test = comparePurchaseUrgency([2, 8, 1, 10, 300, 6, 4]);
+	console.log('test', test);
+
 	return (
 		<>
 			<SearchBar
@@ -31,6 +35,7 @@ export function List({ data, listPath }) {
 						totalPurchases={item.totalPurchases}
 						dayInterval={item.dayInterval}
 						dateCreated={item.dateCreated}
+						dateNextPurchased={item.dateNextPurchased}
 					/>
 				))}
 			</ul>