Merge pull request #42 from the-collab-lab/dc-urgency-categories

As a user, I want to see the items in the selected list displayed with a checkbox, item name, urgency category (in different colors), and a delete button
the-collab-lab · Sep 27, 2024 · 65b1a5d · 65b1a5d
2 parents c062b84 + 153c1d1
commit 65b1a5d
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 13 deletions.
diff --git a/src/api/firebase.js b/src/api/firebase.js
@@ -224,13 +224,13 @@ export async function comparePurchaseUrgency(data) {
 		if (inactiveItem > inactivityPeriod) {
 			item.category = 'inactive';
 		} else if (urgencyIndex < dayOfPurchase) {
-			item.category = 'Overdue';
+			item.category = 'overdue';
 		} else if (urgencyIndex <= soon) {
 			item.category = 'soon';
 		} else if (urgencyIndex < kindOfSoon) {
 			item.category = 'kind of soon';
 		} else {
-			item.category = 'Not soon';
+			item.category = 'not soon';
 		}
 		return item;
 	});

diff --git a/src/components/AddItem.jsx b/src/components/AddItem.jsx
@@ -74,22 +74,22 @@ export function AddItem({ data, listPath }) {
 				<input
 					id="name"
 					type="text"
-					placeholder="Item"
+					placeholder="Enter item name"
 					value={formNewItem.name}
 					onChange={handleNewItemChange}
 					name="name"
 					required
 				/>
 
-				<label htmlFor="nextPurchase">When is your next purchase</label>
+				<label htmlFor="nextPurchase">Urgency</label>
 				<select
 					name="nextPurchase"
 					id="nextPurchase"
 					onChange={handleNewItemChange}
 					value={formNewItem.nextPurchase}
 					required
 				>
-					<option value="">---</option>
+					<option value="">Select Urgency</option>
 					<option value={7}>Soon</option>
 					<option value={14}>Kind of soon</option>
 					<option value={30}>Not soon</option>

diff --git a/src/components/ListItem.css b/src/components/ListItem.css
@@ -1,8 +1,16 @@
 .ListItem {
-	align-items: baseline;
 	display: flex;
-	flex-direction: row;
-	font-size: 1.2em;
+	align-items: center;
+	justify-content: space-between;
+	padding: 5px;
+	background-color: rgb(247, 238, 238);
+	border: 1px solid #b9afaf;
+}
+
+.item-info {
+	display: flex;
+	align-items: center;
+	flex-grow: 1;
 }
 
 .ListItem-checkbox {
@@ -12,3 +20,13 @@
 .ListItem-label {
 	margin-left: 0.2em;
 }
+
+.item-category {
+	font-weight: bold;
+	margin-right: 20px;
+}
+
+ul {
+	list-style-type: none;
+	padding: 0;
+}
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -1,7 +1,13 @@
 import { useState, useEffect } from 'react';
 import './ListItem.css';
 
-export function ListItem({ name, dateLastPurchased, onCheck, onDelete }) {
+export function ListItem({
+	name,
+	dateLastPurchased,
+	onCheck,
+	onDelete,
+	category,
+}) {
 	const [isChecked, setIsChecked] = useState(false);
 
 	useEffect(() => {
@@ -26,6 +32,14 @@ export function ListItem({ name, dateLastPurchased, onCheck, onDelete }) {
 		}
 	};
 
+	const categoryColor = {
+		soon: 'purple',
+		'kind of soon': 'orange',
+		'not soon': 'green',
+		overdue: 'red',
+		inactive: 'gray',
+	};
+
 	return (
 		<li className="ListItem">
 			<label>
@@ -35,8 +49,14 @@ export function ListItem({ name, dateLastPurchased, onCheck, onDelete }) {
 					onChange={onCheck}
 					disabled={isChecked}
 				/>
-				{name}
+				<span className="item-name">{name}</span>
 			</label>
+			<span
+				className="item-category"
+				style={{ color: categoryColor[category] }}
+			>
+				{category}
+			</span>
 			<button onClick={handleDeleteButton}>delete</button>
 		</li>
 	);

diff --git a/src/views/List.jsx b/src/views/List.jsx
@@ -89,7 +89,7 @@ export function List({ data, listPath, lists }) {
 								type="text"
 								id="search-item-in-list"
 								value={searchItem}
-								placeholder="Search item..."
+								placeholder="Search an item..."
 								aria-label="Search for items"
 							/>
 							{searchItem && (
@@ -117,8 +117,6 @@ export function List({ data, listPath, lists }) {
 						<ul>
 							{Object.keys(groupedItems).map((category) => (
 								<li key={category}>
-									<h3>{category}</h3>
-
 									<ul>
 										{groupedItems[category].map((item) => (
 											<ListItem
@@ -128,6 +126,7 @@ export function List({ data, listPath, lists }) {
 												dateLastPurchased={item.dateLastPurchased}
 												onCheck={() => handleCheck(item)}
 												onDelete={() => handleDelete(item.id)}
+												category={item.category}
 											/>
 										))}
 									</ul>