Issue #7 | Filter shopping list to locate item in list (#36)

* replaced console.log on setDoc method; gave the name to getFutureDate func

* Changed setDoc to addDoc

* Added ability to add item to list

* change setDoc to addDoc in addItem function

* update listPath to use a value from useStateWithStorage hook

* cleaned up console.log and changed var names for better readability

* Added edge case in input value for item name

* Added edge case for daysUntilNextPurchase input selection in form

* adjust listPath to use useStateWithStorage value instead of  custom variable

* remove extra react-router-dom import

* remove default value from input in ManageList

* finish filter form

* deleted bug on line 44, adjusted variable names

* addressed comments from pr

---------

Co-authored-by: Nika Kolesnikova <[email protected]>
Co-authored-by: Warren Chan <[email protected]>

src/views/List.jsx

@@ -1,15 +1,45 @@
 import { ListItem } from '../components';
+import { useState } from 'react';
 
 export function List({ data }) {
+	const [searchItem, setSearchItem] = useState('');
+
+	const handleTextChange = (event) => {
+		setSearchItem(event.target.value);
+	};
+
+	const filteredItems = data.filter((item) =>
+		item.name.toLowerCase().includes(searchItem.toLowerCase()),
+	);
+
 	return (
 		<>
-			<p>
-				Hello from the <code>/list</code> page!
-			</p>
+			<form onSubmit={(event) => event.preventDefault()}>
+				<label htmlFor="search-item">Search Item: </label>
+
+				<input
+					id="search-item"
+					type="search"
+					placeholder="Search Item..."
+					onChange={handleTextChange}
+					value={searchItem}
+				/>
+
+				{searchItem && (
+					<button
+						type="button"
+						onClick={() => {
+							setSearchItem('');
+						}}
+					>
+						X
+					</button>
+				)}
+			</form>
 			<ul>
-				{Object.values(data).map((item) => (
-					<ListItem key={item.id} name={item.name} />
-				))}
+				{filteredItems.map((item) => {
+					return <ListItem key={item.id} name={item.name} />;
+				})}
 			</ul>
 		</>
 	);