Merge pull request #25 from the-collab-lab/ec-hm-issue-7

7. add search list form and function in List

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,
 	});
 }

src/views/List.jsx

@@ -1,13 +1,45 @@
+import { useState } from 'react';
 import { ListItem } from '../components/ListItem';
 
 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 type="button" onClick={handleClear}>
+					x
+				</button>
+			</form>
 			<ul>
-				{data.map((item) => (
+				{filteredData.map((item) => (
 					<ListItem key={item.name} name={item.name} />
 				))}
 			</ul>