Display items in categories

src/api/firebase.js

@@ -222,3 +222,52 @@ export async function deleteItem() {
 	 * this function must accept!
 	 */
 }
+
+export function comparePurchaseUrgency(data) {
+	const dayItemIsInactive = -60;
+	const dayOfExpectedPurchase = 0;
+	const dayItemIsBuySoon = 7;
+	const dayItemIsBuySoonish = 14;
+
+	const now = new Date();
+	const newData = data.map((item) => {
+		const daysBeforePurchase = getDaysBetweenDates(
+			item.dateNextPurchased.toDate(),
+			now,
+		);
+
+		item.daysBeforePurchase = daysBeforePurchase;
+
+		if (daysBeforePurchase < dayItemIsInactive) {
+			item.category = 'Inactive';
+		} else if (
+			daysBeforePurchase >= dayItemIsInactive &&
+			daysBeforePurchase < dayOfExpectedPurchase
+		) {
+			item.category = 'Overdue';
+		} else if (
+			daysBeforePurchase >= dayOfExpectedPurchase &&
+			daysBeforePurchase <= dayItemIsBuySoon
+		) {
+			item.category = 'Buy Soon';
+		} else if (
+			daysBeforePurchase > dayItemIsBuySoon &&
+			daysBeforePurchase <= dayItemIsBuySoonish
+		) {
+			item.category = 'Buy Soonish';
+		} else {
+			item.category = 'Buy Not Soon';
+		}
+
+		return item;
+	});
+
+	const dataSortedByDaysLeft = newData.sort((itemA, itemB) => {
+		if (itemA.daysBeforePurchase === itemB.daysBeforePurchase) {
+			return itemA.name.localeCompare(itemB.name);
+		}
+
+		return itemA.daysBeforePurchase - itemB.daysBeforePurchase;
+	});
+	return dataSortedByDaysLeft;
+}

src/components/ContainerItems.jsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { ListItem } from './ListItem';
+import { Fragment } from 'react';
+
+export const ContainerItems = ({
+	category,
+	newList,
+	wasRecentlyPurchased,
+	listPath,
+	updatePurchaseDate,
+}) => {
+	const [filteredItemsList, setFilteredItemsList] = useState([]);
+
+	useEffect(() => {
+		const newItemList = newList.filter((item) => {
+			if (item.category === category) {
+				return true;
+			} else return false;
+		});
+		setFilteredItemsList(newItemList);
+	}, [newList, category]);
+
+	return filteredItemsList[0] ? (
+		<section>
+			<h2>{category}</h2>
+			<ul>
+				{filteredItemsList.map((item, i) => {
+					if (item.category === category) {
+						return (
+							<ListItem
+								key={item.id}
+								dateLastPurchased={item.dateLastPurchased}
+								isRecentlyPurchased={wasRecentlyPurchased(item)}
+								itemId={item.id}
+								listPath={listPath}
+								name={item.name}
+								purchaseDate={item.dateLastPurchased}
+								updatePurchaseDate={updatePurchaseDate}
+							/>
+						);
+					} else return <Fragment key={i} />;
+				})}
+			</ul>
+		</section>
+	) : (
+		<> </>
+	);
+};

src/components/SearchList.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-const SearchList = ({ data, setNewList }) => {
+export const SearchList = ({ data, setNewList }) => {
 	const [value, setValue] = useState('');
 
 	const handleFiltering = (e) => {
@@ -37,4 +37,4 @@ const SearchList = ({ data, setNewList }) => {
 	);
 };
 
-export default SearchList;
+// export default SearchList;

src/components/index.js

@@ -1,2 +1,4 @@
 export * from './ListItem';
 export * from './SingleList';
+export * from './ContainerItems';
+export * from './SearchList';

src/views/List.jsx

@@ -1,19 +1,29 @@
 import { useState, useEffect } from 'react';
-import { ListItem } from '../components';
-import SearchList from '../components/SearchList';
+import { ContainerItems } from '../components';
+import { SearchList } from '../components';
 import { useParams, useNavigate } from 'react-router-dom';
-import { updateItem } from '../api/firebase';
+import { updateItem, comparePurchaseUrgency } from '../api/firebase';
 import { isMoreThanADayAgo } from '../utils';
 import './List.css';
 import addFirstItem from '../pictures/addFirstItem.png';
 
 export function List({ data, lists, listPath }) {
 	const [newList, setNewList] = useState([]);
+	const [sortedList, setSortedList] = useState([]);
 	const { path } = useParams();
 	const navigate = useNavigate();
+	const categoryArray = [
+		'Overdue',
+		'Buy Soon',
+		'Buy Soonish',
+		'Buy Not Soon',
+		'Inactive',
+	];
 
 	useEffect(() => {
-		setNewList(data);
+		const getDataSorted = comparePurchaseUrgency(data);
+		setNewList(getDataSorted);
+		setSortedList(getDataSorted);
 	}, [data]);
 
 	const wasRecentlyPurchased = (item) => {
@@ -64,23 +74,20 @@ export function List({ data, lists, listPath }) {
 					</button>
 				</div>
 			)}
+
 			{data.length > 0 && (
 				<div>
-					<SearchList data={data} setNewList={setNewList} />
-					<ul>
-						{newList.map((item) => (
-							<ListItem
-								dateLastPurchased={item.dateLastPurchased}
-								isRecentlyPurchased={wasRecentlyPurchased(item)}
-								itemId={item.id}
-								key={item.id}
-								listPath={listPath}
-								name={item.name}
-								purchaseDate={item.dateLastPurchased}
-								updatePurchaseDate={updatePurchaseDate}
-							/>
-						))}
-					</ul>
+					<SearchList data={sortedList} setNewList={setNewList} />
+					{categoryArray.map((category, i) => (
+						<ContainerItems
+							key={i}
+							category={category}
+							newList={newList}
+							wasRecentlyPurchased={wasRecentlyPurchased}
+							listPath={listPath}
+							updatePurchaseDate={updatePurchaseDate}
+						/>
+					))}
 				</div>
 			)}
 		</>