Jo qg sort shopping list

src/api/firebase.js

@@ -239,3 +239,24 @@ export async function deleteItem() {
 	 * this function must accept!
 	 */
 }
+
+export function comparePurchaseUrgency(arr) {
+	const soonArray = arr
+		.filter((item) => item.indicator === 'Soon')
+		.sort((a, b) => (a.name > b.name ? 1 : -1));
+	const kindOfSoon = arr
+		.filter((item) => item.indicator === 'Kind of soon')
+		.sort((a, b) => (a.name > b.name ? 1 : -1));
+	const notSoon = arr
+		.filter((item) => item.indicator === 'Not soon')
+		.sort((a, b) => (a.name > b.name ? 1 : -1));
+	const inactive = arr
+		.filter((item) => item.indicator === 'Inactive')
+		.sort((a, b) => (a.name > b.name ? 1 : -1));
+	const overdue = arr
+		.filter((item) => item.indicator === 'Overdue')
+		.sort((a, b) => (a.name > b.name ? 1 : -1));
+	return overdue.length > 0
+		? overdue.concat(soonArray, kindOfSoon, notSoon, inactive)
+		: soonArray.concat(kindOfSoon, notSoon, inactive);
+}

src/components/ListItem.jsx

@@ -12,6 +12,7 @@ export function ListItem({
 	totalPurchases,
 	dayInterval,
 	dateCreated,
+	indicator,
 }) {
 	const handleOnChange = async (event) => {
 		let { checked } = event.target;
@@ -51,6 +52,8 @@ export function ListItem({
 				disabled={isChecked}
 			/>
 			<label htmlFor={`${id}`}>{name}</label>
+			{/* Add CSS to dynamically change bg-color for badges? */}
+			<p className="TimeBadge">{indicator}</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,14 +1,47 @@
 import { useEffect, useState } from 'react';
 import { ListItem, SearchBar } from '../components';
 import { useNavigate } from 'react-router-dom';
+import { comparePurchaseUrgency } from '../api/firebase';
+import { getDaysBetweenDates } from '../utils/dates';
 
 export function List({ data, listPath }) {
 	const [search, setSearch] = useState('');
 	const [displayData, setDisplayData] = useState([]);
 	const navigate = useNavigate();
 
 	useEffect(() => {
-		setDisplayData([...data]);
+		const getIndicator = (item) => {
+			const dateLastPurchasedJavaScriptObject = item.dateLastPurchased
+				? item.dateLastPurchased.toDate()
+				: item.dateCreated.toDate();
+
+			const daysSinceLastPurchase = getDaysBetweenDates(
+				new Date(),
+				dateLastPurchasedJavaScriptObject,
+			);
+
+			const daysUntilNextPurchase = getDaysBetweenDates(
+				item.dateNextPurchased.toDate(),
+				new Date(),
+			);
+
+			if (daysSinceLastPurchase > 60) {
+				return 'Inactive';
+			} else if (daysSinceLastPurchase > 30 && daysSinceLastPurchase < 60) {
+				return 'Overdue';
+			} else if (daysUntilNextPurchase <= 7) {
+				return 'Soon';
+			} else if (daysUntilNextPurchase > 7 && daysUntilNextPurchase < 30) {
+				return 'Kind of soon';
+			} else if (daysUntilNextPurchase >= 30) {
+				return 'Not soon';
+			}
+		};
+		const arrayWithIndicator = data.map((item) => ({
+			...item,
+			indicator: getIndicator(item),
+		}));
+		setDisplayData([...comparePurchaseUrgency(arrayWithIndicator)]);
 	}, [data]);
 
 	return (
@@ -31,6 +64,8 @@ export function List({ data, listPath }) {
 						totalPurchases={item.totalPurchases}
 						dayInterval={item.dayInterval}
 						dateCreated={item.dateCreated}
+						dateNextPurchased={item.dateNextPurchased}
+						indicator={item.indicator}
 					/>
 				))}
 			</ul>