From 78bc9950d43d56400e595832d12a36a8130b3ba9 Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Tue, 24 Sep 2024 11:24:36 -0700
Subject: [PATCH 1/5] set up details preview

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

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index 7cfeff1..2199680 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -3,9 +3,12 @@ import './ListItem.css';
 import { updateItem, deleteItem } from '../api';
 
 export function ListItem({ item }) {
-	const { name, dateLastPurchased, id } = item;
+	const { name, dateLastPurchased, dateNextPurchased, totalPurchases, id } =
+		item;
 	const [checked, setChecked] = useState(false);
 
+	const dateNext = new Date(dateNextPurchased?.toDate());
+	const dateLast = dateLastPurchased?.toDate();
 	const handleDelete = async () => {
 		try {
 			if (window.confirm(`Are you sure you want to delete ${name}?`)) {
@@ -57,8 +60,19 @@ export function ListItem({ item }) {
 				onChange={handleChange}
 				disabled={checked}
 			/>
-			{name}
+			<h2>{name}</h2>
+
 			<button onClick={handleDelete}>Delete</button>
+			<div>
+				<ul>
+					<li>
+						Last Purchased:
+						{dateLastPurchased?.toDate().toDateString()}
+					</li>
+					<li> Next Purchased:{dateNextPurchased?.toDate().toDateString()}</li>
+					<li>Total Purchases:{totalPurchases}</li>
+				</ul>
+			</div>
 		</li>
 	);
 }

From 190e3cb6be4216e0b52a28175432a52d5c037309 Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Tue, 24 Sep 2024 11:45:30 -0700
Subject: [PATCH 2/5] added toggle feature with active state

---
 src/components/ListItem.jsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index 2199680..cfd2388 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -6,9 +6,8 @@ export function ListItem({ item }) {
 	const { name, dateLastPurchased, dateNextPurchased, totalPurchases, id } =
 		item;
 	const [checked, setChecked] = useState(false);
+	const [isActive, setIsActive] = useState(false);
 
-	const dateNext = new Date(dateNextPurchased?.toDate());
-	const dateLast = dateLastPurchased?.toDate();
 	const handleDelete = async () => {
 		try {
 			if (window.confirm(`Are you sure you want to delete ${name}?`)) {
@@ -63,14 +62,22 @@ export function ListItem({ item }) {
 			<h2>{name}</h2>
 
 			<button onClick={handleDelete}>Delete</button>
-			<div>
+			<button onClick={() => setIsActive(!isActive)}>
+				View Purchase Details
+			</button>
+
+			<div style={{ display: isActive ? 'block' : 'none' }}>
 				<ul>
 					<li>
 						Last Purchased:
 						{dateLastPurchased?.toDate().toDateString()}
 					</li>
-					<li> Next Purchased:{dateNextPurchased?.toDate().toDateString()}</li>
-					<li>Total Purchases:{totalPurchases}</li>
+					<li>
+						{' '}
+						Next Purchased:
+						{dateNextPurchased?.toDate().toDateString()}
+					</li>
+					<li>Total Purchases: {totalPurchases}</li>
 				</ul>
 			</div>
 		</li>

From 4f5c607f8fbba9f9a008edb0b38f06b781ca70ce Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Tue, 24 Sep 2024 11:49:53 -0700
Subject: [PATCH 3/5] clean up names

---
 src/components/ListItem.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index cfd2388..9e92347 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -69,12 +69,11 @@ export function ListItem({ item }) {
 			<div style={{ display: isActive ? 'block' : 'none' }}>
 				<ul>
 					<li>
-						Last Purchased:
+						Last Purchase:
 						{dateLastPurchased?.toDate().toDateString()}
 					</li>
 					<li>
-						{' '}
-						Next Purchased:
+						Next Purchase:
 						{dateNextPurchased?.toDate().toDateString()}
 					</li>
 					<li>Total Purchases: {totalPurchases}</li>

From b81c9f9cd49fbd3eab5fc64fc89bf5521a17b96e Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Tue, 24 Sep 2024 11:56:49 -0700
Subject: [PATCH 4/5] added check for a null dateLastPurchased value

---
 src/components/ListItem.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index 9e92347..26e71e1 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -70,7 +70,9 @@ export function ListItem({ item }) {
 				<ul>
 					<li>
 						Last Purchase:
-						{dateLastPurchased?.toDate().toDateString()}
+						{dateLastPurchased
+							? dateLastPurchased.toDate().toDateString()
+							: 'N/A'}
 					</li>
 					<li>
 						Next Purchase:

From bf0762de4e1abf8930534a43a87cf5d8fc2be370 Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Wed, 25 Sep 2024 11:36:03 -0700
Subject: [PATCH 5/5] fix font size and spacing

---
 src/components/ListItem.jsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index 26e71e1..3486452 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -59,7 +59,7 @@ export function ListItem({ item }) {
 				onChange={handleChange}
 				disabled={checked}
 			/>
-			<h2>{name}</h2>
+			<h2 style={{ fontSize: '20px' }}>{name}</h2>
 
 			<button onClick={handleDelete}>Delete</button>
 			<button onClick={() => setIsActive(!isActive)}>
@@ -67,16 +67,19 @@ export function ListItem({ item }) {
 			</button>
 
 			<div style={{ display: isActive ? 'block' : 'none' }}>
-				<ul>
+				<ul style={{ fontSize: '15px' }}>
 					<li>
 						Last Purchase:
-						{dateLastPurchased
-							? dateLastPurchased.toDate().toDateString()
-							: 'N/A'}
+						<span>
+							{' '}
+							{dateLastPurchased
+								? dateLastPurchased.toDate().toDateString()
+								: 'N/A'}
+						</span>
 					</li>
 					<li>
 						Next Purchase:
-						{dateNextPurchased?.toDate().toDateString()}
+						<span> {dateNextPurchased?.toDate().toDateString()}</span>
 					</li>
 					<li>Total Purchases: {totalPurchases}</li>
 				</ul>