feat(#13): display purchaseUrgency on List.jsx and refactor jsx from …

…list to table
the-collab-lab · Sep 17, 2024 · 1161bc4 · 1161bc4
1 parent 86518ec
commit 1161bc4
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 30 deletions.
diff --git a/src/api/firebase.js b/src/api/firebase.js
@@ -186,13 +186,25 @@ export function comparePurchaseUrgency(list) {
 		const days = getDaysBetweenDates(item.dateNextPurchased);
 		if (days >= 60) {
 			//flip the days to negative for inactive items
-			item.sortCriteria = { tag: 'inactive', daysUntilNextPurchase: -days };
+			item.sortCriteria = {
+				tag: 'No longer active',
+				daysUntilNextPurchase: -days,
+			};
 			inactive.push(item);
 		} else if (days < 60 && days > 0) {
-			item.sortCriteria = { tag: 'overdue', daysUntilNextPurchase: days };
+			item.sortCriteria = { tag: 'Past due date', daysUntilNextPurchase: days };
 			overdue.push(item);
-		} else {
-			item.sortCriteria = { tag: 'future', daysUntilNextPurchase: days };
+		} else if (days <= 0 && days >= -7) {
+			item.sortCriteria = { tag: 'Due soon', daysUntilNextPurchase: days };
+			future.push(item);
+		} else if (days < -7 && days >= -30) {
+			item.sortCriteria = {
+				tag: 'Due kind of soon',
+				daysUntilNextPurchase: days,
+			};
+			future.push(item);
+		} else if (days < -30) {
+			item.sortCriteria = { tag: 'Due not soon', daysUntilNextPurchase: days };
 			future.push(item);
 		}
 	});

diff --git a/src/components/ListItem.css b/src/components/ListItem.css
@@ -1,4 +1,4 @@
-.ListItem {
+/* .ListItem {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -19,4 +19,13 @@
 .item-name {
 	flex-grow: 1;
 	margin-right: 10px;
+} */
+
+td {
+	border-bottom: 1px solid whitesmoke;
+}
+
+th {
+	background-color: #3e27ed;
+	border-bottom: 2px solid #ddd;
 }
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -12,6 +12,7 @@ export function ListItem({
 	dateLastPurchased,
 	purchaseInterval,
 	dateCreated,
+	sortCriteria,
 }) {
 	const [purchased, setPurchased] = useToggle(false);
 	const [isDisabled, setIsDisabled] = useState(false);
@@ -61,18 +62,22 @@ export function ListItem({
 
 	return (
 		<>
-			<li className="ListItem">
-				<div className="item-name">{name}</div>
-				<Toggle
-					toggle={handleToggle}
-					on={purchased}
-					name={name}
-					isDisabled={isDisabled}
-					dateLastPurchased={dateLastPurchased}
-				/>
-
-				{dateLastPurchased ? dateLastPurchased.toDate().toLocaleString() : ''}
-			</li>
+			<tr className="ListItem">
+				<td>{name}</td>
+				<td>
+					<Toggle
+						toggle={handleToggle}
+						on={purchased}
+						name={name}
+						isDisabled={isDisabled}
+						dateLastPurchased={dateLastPurchased}
+					/>
+				</td>
+				<td>
+					{dateLastPurchased ? dateLastPurchased.toDate().toLocaleString() : ''}
+				</td>
+				<td>{sortCriteria.tag}</td>
+			</tr>
 		</>
 	);
 }
diff --git a/src/views/List.jsx b/src/views/List.jsx
@@ -9,23 +9,17 @@ export function List({ data, listPath }) {
 		setSearchInput(e.target.value);
 	};
 
-	let sorted = comparePurchaseUrgency(data);
-	let names = [];
-	sorted.forEach((item) => {
-		names.push(item.name);
-	});
-	console.log('names', names);
-
 	const clearSearchInput = () => {
 		setSearchInput('');
 	};
 
-	const filterList = data.filter((item) => {
+	const sortedByUrgency = comparePurchaseUrgency(data);
+
+	const filterList = sortedByUrgency.filter((item) => {
 		return searchInput
 			? item.name.toLowerCase().includes(searchInput.toLowerCase())
 			: item;
 	});
-	const listInfo = comparePurchaseUrgency(filterList);
 
 	return (
 		<>
@@ -58,7 +52,40 @@ export function List({ data, listPath }) {
 					</button>
 				)}
 			</div>
-			<ul>
+			{filterList.length ? (
+				<table>
+					<thead>
+						<tr>
+							<th>Product</th>
+							<th>Buy Now</th>
+							<th>Last Purchase Date</th>
+							<th>Urgency</th>
+						</tr>
+					</thead>
+					<tbody>
+						{filterList.map((item) => (
+							<ListItem
+								key={item.id}
+								name={item.name}
+								itemId={item.id}
+								listPath={listPath}
+								totalPurchases={item.totalPurchases}
+								dateLastPurchased={item.dateLastPurchased}
+								purchaseInterval={item.purchaseInterval}
+								dateCreated={item.dateCreated}
+								sortCriteria={item.sortCriteria}
+							/>
+						))}
+					</tbody>
+				</table>
+			) : (
+				<p>No items to display</p>
+			)}
+		</>
+	);
+}
+{
+	/* <ul>
 				{filterList.length ? (
 					filterList.map((item) => {
 						return (
@@ -71,6 +98,7 @@ export function List({ data, listPath }) {
 								dateLastPurchased={item.dateLastPurchased}
 								purchaseInterval={item.purchaseInterval}
 								dateCreated={item.dateCreated}
+								sortCriteria={item.sortCriteria}
 							/>
 						);
 					})
@@ -80,7 +108,8 @@ export function List({ data, listPath }) {
 						No items found! <NavLink to="/manage-list"> Add item</NavLink>
 					</li>
 				)}
-			</ul>
-		</>
-	);
+			</ul> */
 }
+// 		</>
+// 	);
+// }