Merge pull request #30 from the-collab-lab/jo-qg-sort-shopping-list

Sort shopping list by urgency

src/api/firebase.js

@@ -15,7 +15,7 @@ import { db } from './config';
 import { getFutureDate } from '../utils';
 import toast from 'react-hot-toast';
 import { calculateEstimate } from '@the-collab-lab/shopping-list-utils';
-import { getDaysBetweenDates } from '../utils/dates';
+import { getDaysSinceLastPurchase } from '../utils/helpers';
 /**
  * A custom hook that subscribes to the user's shopping lists in our Firestore
  * database and returns new data whenever the lists change.
@@ -200,14 +200,8 @@ export async function updateItem(listPath, checked, itemData) {
 	const today = new Date();
 	const currentTotalPurchases = itemData.totalPurchases;
 	const currentDayInterval = itemData.dayInterval;
-	const dateLastPurchasedJavaScriptObject = itemData.dateLastPurchased
-		? itemData.dateLastPurchased.toDate()
-		: itemData.dateCreated.toDate();
 
-	const daysSinceLastPurchase = getDaysBetweenDates(
-		today,
-		dateLastPurchasedJavaScriptObject,
-	);
+	const daysSinceLastPurchase = getDaysSinceLastPurchase(itemData);
 	const estimate = calculateEstimate(
 		currentDayInterval,
 		daysSinceLastPurchase,
@@ -242,3 +236,33 @@ export async function deleteItem(listPath, id) {
 		console.error('Error deleting your item', error);
 	}
 }
+
+export function comparePurchaseUrgency(arr) {
+	const groupedItems = {
+		Overdue: [],
+		Soon: [],
+		'Kind of soon': [],
+		'Not soon': [],
+		Inactive: [],
+	};
+	arr.forEach((item) => {
+		if (groupedItems[item.indicator]) {
+			groupedItems[item.indicator].push(item);
+		}
+	});
+	Object.keys(groupedItems).forEach((key) => {
+		groupedItems[key].sort((a, b) => (a.name > b.name ? 1 : -1));
+	});
+	return groupedItems['Overdue'].length > 0
+		? groupedItems['Overdue'].concat(
+				groupedItems['Soon'],
+				groupedItems['Kind of soon'],
+				groupedItems['Not soon'],
+				groupedItems['Inactive'],
+			)
+		: groupedItems['Soon'].concat(
+				groupedItems['Kind of soon'],
+				groupedItems['Not soon'],
+				groupedItems['Inactive'],
+			);
+}

src/components/ListItem.jsx

@@ -13,6 +13,7 @@ export function ListItem({
 	totalPurchases,
 	dayInterval,
 	dateCreated,
+	indicator,
 }) {
 	const handleOnChange = async (event) => {
 		let { checked } = event.target;
@@ -62,6 +63,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>
 			<button type="button" id={id} onClick={handleDelete}>
 				Delete
 			</button>

src/components/SearchBar.jsx

@@ -1,16 +1,16 @@
-export function SearchBar({ data, setDisplayData, setSearch, search }) {
+export function SearchBar({ allData, setDisplayData, setSearch, search }) {
 	const handleInputChange = (e) => {
 		const searchTerm = e.target.value;
 		setSearch(searchTerm);
 
-		const filteredUsers = data.filter((item) =>
+		const filteredData = allData.filter((item) =>
 			item.name.toLowerCase().includes(searchTerm.trim().toLowerCase()),
 		);
-		setDisplayData(filteredUsers);
-	};
 
+		setDisplayData(filteredData);
+	};
 	const handleClear = () => {
-		setDisplayData(data);
+		setDisplayData(allData);
 		setSearch('');
 	};
 

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/utils/helpers.js

@@ -0,0 +1,30 @@
+import { getDaysBetweenDates } from './dates';
+
+export function getDaysSinceLastPurchase(item) {
+	const dateLastPurchasedJavaScriptObject = item.dateLastPurchased
+		? item.dateLastPurchased.toDate()
+		: item.dateCreated.toDate();
+
+	return getDaysBetweenDates(new Date(), dateLastPurchasedJavaScriptObject);
+}
+
+export function getIndicator(item) {
+	const daysSinceLastPurchase = getDaysSinceLastPurchase(item);
+
+	const daysUntilNextPurchase = getDaysBetweenDates(
+		item.dateNextPurchased.toDate(),
+		new Date(),
+	);
+
+	if (daysSinceLastPurchase > 60) {
+		return 'Inactive';
+	} else if (daysUntilNextPurchase < 0 && 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';
+	}
+}

src/views/List.jsx

@@ -1,21 +1,30 @@
 import { useEffect, useState } from 'react';
 import { ListItem, SearchBar } from '../components';
 import { useNavigate } from 'react-router-dom';
+import { comparePurchaseUrgency } from '../api/firebase';
+import { getIndicator } from '../utils/helpers';
 
 export function List({ data, listPath }) {
 	const [search, setSearch] = useState('');
+	const [allData, setAllData] = useState([]);
 	const [displayData, setDisplayData] = useState([]);
 	const navigate = useNavigate();
 
 	useEffect(() => {
-		setDisplayData([...data]);
+		const arrayWithIndicator = data.map((item) => ({
+			...item,
+			indicator: getIndicator(item),
+		}));
+		const urgencyData = [...comparePurchaseUrgency(arrayWithIndicator)];
+		setAllData(urgencyData);
+		setDisplayData(urgencyData);
 	}, [data]);
 
 	return (
 		<>
 			<SearchBar
 				setDisplayData={setDisplayData}
-				data={data}
+				allData={allData}
 				setSearch={setSearch}
 				search={search}
 			/>
@@ -31,6 +40,8 @@ export function List({ data, listPath }) {
 						totalPurchases={item.totalPurchases}
 						dayInterval={item.dayInterval}
 						dateCreated={item.dateCreated}
+						dateNextPurchased={item.dateNextPurchased}
+						indicator={item.indicator}
 					/>
 				))}
 			</ul>