Sorting implemented

src/api/firebase.js

@@ -241,5 +241,22 @@ export async function deleteItem() {
 }
 
 export function comparePurchaseUrgency(arr) {
-	return arr.sort();
+	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

@@ -1,18 +1,18 @@
 import './ListItem.css';
 import { updateItem } from '../api';
 import { useEffect } from 'react';
-import { ONE_DAY_IN_MILLISECONDS, getDaysBetweenDates } from '../utils/dates';
+import { ONE_DAY_IN_MILLISECONDS } from '../utils/dates';
 
 export function ListItem({
 	listPath,
 	name,
 	id,
 	isChecked,
 	dateLastPurchased,
-	dateNextPurchased,
 	totalPurchases,
 	dayInterval,
 	dateCreated,
+	indicator,
 }) {
 	const handleOnChange = async (event) => {
 		let { checked } = event.target;
@@ -27,36 +27,6 @@ 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();
@@ -83,7 +53,7 @@ export function ListItem({
 			/>
 			<label htmlFor={`${id}`}>{name}</label>
 			{/* Add CSS to dynamically change bg-color for badges? */}
-			<p className="TimeBadge">{getIndicator()}</p>
+			<p className="TimeBadge">{indicator}</p>
 		</li>
 	);
 }

src/views/List.jsx

@@ -2,18 +2,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]);
-	}, [data]);
+		const getIndicator = (item) => {
+			const dateLastPurchasedJavaScriptObject = item.dateLastPurchased
+				? item.dateLastPurchased.toDate()
+				: item.dateCreated.toDate();
+
+			const daysSinceLastPurchase = getDaysBetweenDates(
+				new Date(),
+				dateLastPurchasedJavaScriptObject,
+			);
 
-	const test = comparePurchaseUrgency([2, 8, 1, 10, 300, 6, 4]);
-	console.log('test', test);
+			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 (
 		<>
@@ -36,6 +65,7 @@ export function List({ data, listPath }) {
 						dayInterval={item.dayInterval}
 						dateCreated={item.dateCreated}
 						dateNextPurchased={item.dateNextPurchased}
+						indicator={item.indicator}
 					/>
 				))}
 			</ul>