From 206dd57aacfabf618c0926d21e4b086048b8f015 Mon Sep 17 00:00:00 2001
From: Didem Cakir <didemydn@gmail.com>
Date: Thu, 26 Sep 2024 22:40:23 +0200
Subject: [PATCH 1/2] urgency category colors added

---
 src/api/firebase.js         |  4 ++--
 src/components/AddItem.jsx  |  6 +++---
 src/components/ListItem.css | 24 +++++++++++++++++++++---
 src/components/ListItem.jsx | 33 +++++++++++++++++++++++++++++++--
 src/views/List.jsx          |  5 ++---
 5 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/src/api/firebase.js b/src/api/firebase.js
index 66c8d14..bd826e0 100644
--- 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
index 1157f87..50eb273 100644
--- a/src/components/AddItem.jsx
+++ b/src/components/AddItem.jsx
@@ -74,14 +74,14 @@ 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"
@@ -89,7 +89,7 @@ export function AddItem({ data, listPath }) {
 					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
index 148d3de..d19858e 100644
--- 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
index b1a2dd4..7c7a5e8 100644
--- 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,23 @@ export function ListItem({ name, dateLastPurchased, onCheck, onDelete }) {
 		}
 	};
 
+	const categoryColor = (category) => {
+		switch (category) {
+			case 'soon':
+				return 'purple';
+			case 'kind of soon':
+				return 'orange';
+			case 'not soon':
+				return 'green';
+			case 'overdue':
+				return 'red';
+			case 'inactive':
+				return 'gray';
+			default:
+				return 'black';
+		}
+	};
+
 	return (
 		<li className="ListItem">
 			<label>
@@ -35,8 +58,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
index 0e0d067..f41ac24 100644
--- 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>

From 153c1d1b8d78cd78d5ee9f742ad67080e10e978c Mon Sep 17 00:00:00 2001
From: Didem Cakir <didemydn@gmail.com>
Date: Fri, 27 Sep 2024 23:57:33 +0200
Subject: [PATCH 2/2] ListItem categoryColor is an object

---
 src/components/ListItem.jsx | 23 +++++++----------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index 7c7a5e8..10a1957 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -32,21 +32,12 @@ export function ListItem({
 		}
 	};
 
-	const categoryColor = (category) => {
-		switch (category) {
-			case 'soon':
-				return 'purple';
-			case 'kind of soon':
-				return 'orange';
-			case 'not soon':
-				return 'green';
-			case 'overdue':
-				return 'red';
-			case 'inactive':
-				return 'gray';
-			default:
-				return 'black';
-		}
+	const categoryColor = {
+		soon: 'purple',
+		'kind of soon': 'orange',
+		'not soon': 'green',
+		overdue: 'red',
+		inactive: 'gray',
 	};
 
 	return (
@@ -62,7 +53,7 @@ export function ListItem({
 			</label>
 			<span
 				className="item-category"
-				style={{ color: categoryColor(category) }}
+				style={{ color: categoryColor[category] }}
 			>
 				{category}
 			</span>