Sm ar items in order issue 13

src/api/firebase.js

@@ -235,3 +235,56 @@ export async function deleteItem() {
 	 * this function must accept!
 	 */
 }
+
+export function comparePurchaseUrgency(list) {
+	const currentDate = new Date();
+	const soon = [];
+	const kindOfSoon = [];
+	const notSoon = [];
+	const inactive = [];
+	const overdue = [];
+
+	const sortedList = list.sort((a, b) => {
+		const dateNextPurchasedAsDateA = a.dateNextPurchased?.toDate();
+		const dateNextPurchasedAsDateB = b.dateNextPurchased?.toDate();
+
+		const daysUntilNextPurchaseA = getDaysBetweenDates(
+			currentDate,
+			dateNextPurchasedAsDateA,
+		);
+		const daysUntilNextPurchaseB = getDaysBetweenDates(
+			currentDate,
+			dateNextPurchasedAsDateB,
+		);
+
+		return daysUntilNextPurchaseB > daysUntilNextPurchaseA ? -1 : 1;
+	});
+
+	sortedList.forEach((x) => {
+		const dateNextPurchasedAsDate = x.dateNextPurchased?.toDate();
+
+		const daysUntilNextPurchase = getDaysBetweenDates(
+			currentDate,
+			dateNextPurchasedAsDate,
+		);
+		if (daysUntilNextPurchase < 0) {
+			overdue.push(x);
+		} else if (daysUntilNextPurchase >= 0 && daysUntilNextPurchase <= 7) {
+			soon.push(x);
+		} else if (daysUntilNextPurchase > 7 && daysUntilNextPurchase < 30) {
+			kindOfSoon.push(x);
+		} else if (daysUntilNextPurchase >= 30 && daysUntilNextPurchase < 60) {
+			notSoon.push(x);
+		} else if (daysUntilNextPurchase >= 60) {
+			inactive.push(x);
+		}
+	});
+
+	return {
+		overdue,
+		soon,
+		kindOfSoon,
+		notSoon,
+		inactive,
+	};
+}

src/views/List.jsx

@@ -1,10 +1,12 @@
 import { ListItem } from '../components';
 import { useState, useEffect } from 'react';
 import BasicModal from './Modal';
+import { comparePurchaseUrgency } from '../api';
 
 export function List({ data, userId }) {
 	const [filterVal, setFilterVal] = useState('');
-	const [filteredList, setFilteredList] = useState([]);
+	const [filteredObject, setFilteredObject] = useState({});
+	const [sortedList, setSortedList] = useState([]);
 	const [showModal, setShowModal] = useState(false);
 
 	const dataEmpty = userId && !data.length;
@@ -28,12 +30,26 @@ export function List({ data, userId }) {
 	};
 
 	useEffect(() => {
-		setFilteredList(
-			data.filter((item) =>
+		setSortedList(comparePurchaseUrgency(data));
+	}, [data]);
+
+	const labels = {
+		overdue: 'Overdue (!!!!)',
+		soon: 'Soon (!!!)',
+		kindOfSoon: 'Kind of soon (!!)',
+		notSoon: 'Not soon (!)',
+		inactive: 'Inactive Items',
+	};
+
+	useEffect(() => {
+		const filteredObject = {};
+		Object.entries(sortedList).forEach(([timeBucket, list]) => {
+			filteredObject[timeBucket] = list.filter((item) =>
 				item.name.toLowerCase().includes(filterVal.toLowerCase()),
-			),
-		);
-	}, [filterVal, data]);
+			);
+		});
+		setFilteredObject(filteredObject);
+	}, [filterVal, sortedList]);
 
 	return (
 		<>
@@ -45,7 +61,7 @@ export function List({ data, userId }) {
 			)}
 
 			<form onSubmit={clearInput}>
-				<label htmlFor="item-name"> Item name:</label>
+				<label htmlFor="item-name">Item name:</label>
 				<input
 					id="item-name"
 					name="item-name"
@@ -57,10 +73,17 @@ export function List({ data, userId }) {
 			</form>
 
 			<ul>
-				{filteredList &&
-					filteredList.map((item) => {
-						return <ListItem key={item.id} item={item} />;
-					})}
+				{filteredObject &&
+					Object.entries(filteredObject).map(([timeBucket, list]) => (
+						<>
+							<div>
+								<h3>{labels[timeBucket]}</h3>
+							</div>
+							{list.map((item) => (
+								<ListItem key={item.id} item={item} />
+							))}
+						</>
+					))}
 			</ul>
 		</>
 	);