From 409a3003327497f4645e0bbd3a562f7f445eec31 Mon Sep 17 00:00:00 2001
From: Hannah Machado <hannahmachado@yahoo.ca>
Date: Wed, 21 Feb 2024 13:46:06 -0500
Subject: [PATCH 1/3] add search list form and function in List

---
 src/views/List.jsx | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/views/List.jsx b/src/views/List.jsx
index 1ca80de..026909a 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -1,13 +1,43 @@
 import { ListItem } from '../components/ListItem';
+import { useState } from 'react';
 
 export function List({ data }) {
+	const [search, setSearch] = useState('');
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+	};
+
+	const handleChange = (e) => {
+		setSearch(e.target.value);
+	};
+
+	const handleClear = () => {
+		setSearch('');
+	};
+
+	const filteredData = data.filter((item) =>
+		item.name.includes(search.toLowerCase()),
+	);
+
 	return (
 		<>
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
+			<form onSubmit={handleSubmit}>
+				<label htmlFor="search">Search:</label>
+				<input
+					type="text"
+					id="search"
+					name="search"
+					onChange={handleChange}
+					value={search}
+				/>
+				<button onClick={handleClear}>x</button>
+			</form>
 			<ul>
-				{data.map((item) => (
+				{filteredData.map((item) => (
 					<ListItem key={item.name} name={item.name} />
 				))}
 			</ul>

From faeee9399ec1df0e84f3806d2f3b5b81bfe1cb5b Mon Sep 17 00:00:00 2001
From: ecampos <ecampos.jr54@gmail.com>
Date: Thu, 22 Feb 2024 17:42:03 -0600
Subject: [PATCH 2/3] add toLowerCase method for grocery item names in
 firebase.js

---
 src/api/firebase.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/firebase.js b/src/api/firebase.js
index acbc342..f374b9c 100644
--- a/src/api/firebase.js
+++ b/src/api/firebase.js
@@ -172,7 +172,7 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
 		// We'll use updateItem to put a Date here when the item is purchased!
 		dateLastPurchased: null,
 		dateNextPurchased: getFutureDate(daysUntilNextPurchase),
-		name: itemName,
+		name: itemName.toLowerCase(),
 		totalPurchases: 0,
 	});
 }

From eda466498e7de260ec90e57e113ed55fa543eac2 Mon Sep 17 00:00:00 2001
From: ecampos <ecampos.jr54@gmail.com>
Date: Fri, 23 Feb 2024 10:17:02 -0600
Subject: [PATCH 3/3] move library import location up and add type to button in
 List

---
 src/views/List.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/List.jsx b/src/views/List.jsx
index 026909a..30f1bc6 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -1,5 +1,5 @@
-import { ListItem } from '../components/ListItem';
 import { useState } from 'react';
+import { ListItem } from '../components/ListItem';
 
 export function List({ data }) {
 	const [search, setSearch] = useState('');
@@ -34,7 +34,9 @@ export function List({ data }) {
 					onChange={handleChange}
 					value={search}
 				/>
-				<button onClick={handleClear}>x</button>
+				<button type="button" onClick={handleClear}>
+					x
+				</button>
 			</form>
 			<ul>
 				{filteredData.map((item) => (