feat(#13): apply css to urgency labels

the-collab-lab · Sep 18, 2024 · 6307f89 · 6307f89
1 parent e097d2f
commit 6307f89
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 41 deletions.
diff --git a/src/api/firebase.js b/src/api/firebase.js
@@ -10,11 +10,7 @@ import {
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
-import {
-	getFutureDate,
-	cal,
-	calculateDaysDifferenceFromNowculateDaysDifferenceFromNow,
-} from '../utils';
+import { getFutureDate, calculateDaysDifferenceFromNow } from '../utils';
 import { calculateEstimate } from '@the-collab-lab/shopping-list-utils';
 /**
  * A custom hook that subscribes to the user's shopping lists in our Firestore

diff --git a/src/components/ListItem.css b/src/components/ListItem.css
@@ -29,3 +29,28 @@ th {
 	background-color: #3e27ed;
 	border-bottom: 2px solid #ddd;
 }
+
+.duesoon {
+	color: orange;
+	font-weight: bold;
+}
+
+.duekindofsoon {
+	color: yellow;
+	font-weight: bold;
+}
+
+.notduesoon {
+	color: green;
+	font-weight: bold;
+}
+
+.nolongeractive {
+	color: gray;
+	font-weight: bold;
+}
+
+.overdue {
+	color: red;
+	font-weight: bold;
+}
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -60,6 +60,8 @@ export function ListItem({
 		}
 	};
 
+	const urgencyClass = sortCriteria.tag.toLowerCase().replace(/\s/g, '');
+
 	return (
 		<>
 			<tr className="ListItem">
@@ -76,7 +78,7 @@ export function ListItem({
 				<td>
 					{dateLastPurchased ? dateLastPurchased.toDate().toLocaleString() : ''}
 				</td>
-				<td>{sortCriteria.tag}</td>
+				<td className={urgencyClass}>{sortCriteria.tag}</td>
 			</tr>
 		</>
 	);

diff --git a/src/utils/dates.js b/src/utils/dates.js
@@ -37,7 +37,7 @@ export function comparePurchaseUrgency(list) {
 			};
 			inactive.push(item);
 		} else if (days < 60 && days > 0) {
-			item.sortCriteria = { tag: 'Past due date', daysUntilNextPurchase: days };
+			item.sortCriteria = { tag: 'Overdue', daysUntilNextPurchase: days };
 			overdue.push(item);
 		} else if (days <= 0 && days >= -7) {
 			item.sortCriteria = { tag: 'Due soon', daysUntilNextPurchase: days };
@@ -49,7 +49,7 @@ export function comparePurchaseUrgency(list) {
 			};
 			future.push(item);
 		} else if (days < -30) {
-			item.sortCriteria = { tag: 'Due not soon', daysUntilNextPurchase: days };
+			item.sortCriteria = { tag: 'Not due soon', daysUntilNextPurchase: days };
 			future.push(item);
 		}
 	});

diff --git a/src/views/List.jsx b/src/views/List.jsx
@@ -56,10 +56,10 @@ export function List({ data, listPath }) {
 				<table>
 					<thead>
 						<tr>
-							<th>Product</th>
-							<th>Buy Now</th>
-							<th>Last Purchase Date</th>
-							<th>Urgency</th>
+							<th scope="col">Product</th>
+							<th scope="col">Buy Now</th>
+							<th scope="col">Last Purchase Date</th>
+							<th scope="col">Urgency</th>
 						</tr>
 					</thead>
 					<tbody>
@@ -84,32 +84,3 @@ export function List({ data, listPath }) {
 		</>
 	);
 }
-{
-	/* <ul>
-				{filterList.length ? (
-					filterList.map((item) => {
-						return (
-							<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}
-							/>
-						);
-					})
-				) : (
-					<li>
-						{' '}
-						No items found! <NavLink to="/manage-list"> Add item</NavLink>
-					</li>
-				)}
-			</ul> */
-}
-// 		</>
-// 	);
-// }