Merge pull request #29 from the-collab-lab/rt-tc-sort-shoppingList-items

Rt tc sort shopping list items

.vscode/settings.json

@@ -0,0 +1 @@
+{}

src/api/firebase.js

@@ -235,3 +235,56 @@ export async function deleteItem(listPath, itemId) {
 		throw new Error('Error deleting the item');
 	}
 }
+/**
+ * Sorts the items in the list according to category using urgencyIndex and inactiveIndex to determine what category an item belongs.
+ * @param {string} data The path to the data object to sort.
+ */
+export async function comparePurchaseUrgency(data) {
+	const now = new Date();
+
+	data.map((item) => {
+		const urgencyIndex = Math.ceil(
+			getDaysBetweenDates(now, item.dateNextPurchased.toDate()), //takes the difference between the current date and the date the item is next purchased
+		);
+
+		const lastPurchase = item.dateLastPurchased
+			? item.dateLastPurchased.toDate()
+			: item.dateCreated.toDate();
+
+		const inactiveItem = getDaysBetweenDates(lastPurchase, now);
+		item.inactiveIndex = inactiveItem;
+		item.urgencyIndex = urgencyIndex;
+
+		if (inactiveItem > 60) {
+			item.category = 'inactive';
+		} else if (urgencyIndex < 0) {
+			item.category = 'Overdue';
+		} else if (urgencyIndex <= 7) {
+			item.category = 'soon';
+		} else if (urgencyIndex < 30) {
+			item.category = 'kind of soon';
+		} else {
+			item.category = 'Not soon';
+		}
+		return item;
+	});
+	/**
+	 * Function to implement custom sort based on inacrtivity, then on urgencyIndex and name
+	 * 1- if urgency of a is inactive and b is not inactive, sort b ontop the top of a
+	 * 2- if urgency of a is not inactive and b is inactive, sort a ontop of b
+	 * 3- if urgency is the same, sort based on UrgencyIndex
+	 * 4- if urgencyIndex is the same, sort based on name
+	 */
+	data.sort((a, b) => {
+		if (a.category === 'inactive' && b.category !== 'inactive') {
+			return 1;
+		} else if (a.category !== 'inactive' && b.category === 'inactive') {
+			return -1;
+		} else if (a.urgencyIndex !== b.urgencyIndex) {
+			return a.urgencyIndex - b.urgencyIndex;
+		} else {
+			return a.name.localeCompare(b.name);
+		}
+	});
+	return data;
+}

src/components/ListItem.jsx

@@ -26,7 +26,7 @@ export function ListItem({ name, dateLastPurchased, onCheck, onDelete }) {
 			onDelete();
 		}
 	};
-
+  
 	return (
 		<li className="ListItem">
 			<label>

src/utils/dates.js

@@ -18,5 +18,5 @@ export function getFutureDate(offset) {
  * @returns {number}
  */
 export function getDaysBetweenDates(lastDate, nextDate) {
-	return Math.abs(nextDate - lastDate) / ONE_DAY_IN_MILLISECONDS;
+	return Math.ceil(nextDate - lastDate) / ONE_DAY_IN_MILLISECONDS;
 }

src/views/List.jsx

@@ -1,12 +1,34 @@
 import { ListItem } from '../components';
-import { useState } from 'react';
-import { updateItem, deleteItem } from '../api/firebase';
+
+import { useEffect, useState } from 'react';
+import {
+	comparePurchaseUrgency,
+	updateItem,
+	deleteItem,
+} from '../api/firebase';
+
 import { Link } from 'react-router-dom';
 
 export function List({ data, listPath, lists }) {
 	const [searchItem, setSearchItem] = useState('');
 	const [errorMsg, setErrorMsg] = useState('');
 
+	const [items, setItems] = useState([]); //to store the sorted items for display
+
+	//Code segment to sort items using the compareUrgency function from firebase.js
+	useEffect(() => {
+		const fetchItems = async () => {
+			try {
+				const sortedItems = await comparePurchaseUrgency(data);
+				setItems(sortedItems);
+			} catch (error) {
+				console.log(error);
+			}
+		};
+
+		fetchItems();
+	}, [data]);
+
 	const handleSearch = (e) => {
 		e.preventDefault();
 		setSearchItem(e.target.value);
@@ -29,6 +51,14 @@ export function List({ data, listPath, lists }) {
 		});
 	};
 
+	const groupedItems = data.reduce((acc, item) => {
+		if (!acc[item.category]) {
+			acc[item.category] = [];
+		}
+		acc[item.category].push(item);
+		return acc;
+	}, {});
+
 	const handleDelete = async (itemId) => {
 		try {
 			await deleteItem(listPath, itemId);
@@ -51,7 +81,6 @@ export function List({ data, listPath, lists }) {
 					organizing your shopping!
 				</p>
 			)}
-
 			{lists.length > 0 && data.length === 0 && (
 				<p>
 					Your list is currently empty. To add items, visit{' '}
@@ -95,18 +124,28 @@ export function List({ data, listPath, lists }) {
 
 					{errorMsg && <p>{errorMsg}</p>}
 
-					<ul>
-						{data.map((item) => (
-							<ListItem
-								key={item.id}
-								name={item.name}
-								id={item.id}
-								dateLastPurchased={item.dateLastPurchased}
-								onCheck={() => handleCheck(item)}
-								onDelete={() => handleDelete(item.id)}
-							/>
-						))}
-					</ul>
+					{
+						<ul>
+							{Object.keys(groupedItems).map((category) => (
+								<li key={category}>
+									<h3>{category}</h3>
+
+									<ul>
+										{groupedItems[category].map((item) => (
+											<ListItem
+												key={item.id}
+												name={item.name}
+												id={item.id}
+												dateLastPurchased={item.dateLastPurchased}
+												onCheck={() => handleCheck(item)}
+												onDelete={() => handleDelete(item.id)}
+											/>
+										))}
+									</ul>
+								</li>
+							))}
+						</ul>
+					}
 				</>
 			)}
 		</>