From aeb02fbe821a313e99c2497e8cbf1f4a440b1aa7 Mon Sep 17 00:00:00 2001
From: GrannyYetta <you@example.com>
Date: Wed, 28 Aug 2024 22:36:42 +0200
Subject: [PATCH 1/9] added the SearchForm Component and passed it to the List
 view

---
 src/components/SearchForm.jsx | 36 +++++++++++++++++++++++++++++++++++
 src/views/List.jsx            | 15 +++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 src/components/SearchForm.jsx

diff --git a/src/components/SearchForm.jsx b/src/components/SearchForm.jsx
new file mode 100644
index 0000000..2ac2742
--- /dev/null
+++ b/src/components/SearchForm.jsx
@@ -0,0 +1,36 @@
+import { useState } from 'react';
+
+export default function searchForm({ onSearch }) {
+	const [searchItem, setSearchItem] = useState('');
+
+	const handleSearch = (e) => {
+		e.preventDefault();
+		const value = e.target.value;
+		setSearchItem(value);
+		onSearch(value);
+	};
+
+	const clearSearch = () => {
+		setSearchTerm('');
+		onSearch('');
+	};
+
+	return;
+	<form onSubmit={handleSearch}>
+		<div className="search-input-container">
+			<label htmlFor="search-input">Search items:</label>
+			<input
+				type="text"
+				id="search-input"
+				value={searchItem}
+				placeholder="Item from list"
+				required
+			/>
+			{searchItem && (
+				<button type="button" onClick={clearSearch} className="clear-button">
+					x
+				</button>
+			)}
+		</div>
+	</form>;
+}
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 4b341e3..c51c6de 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -1,11 +1,26 @@
 import { ListItem } from '../components';
+import { SearchForm } from '../components/SearchForm';
 
 export function List({ data }) {
+	const [filteredItems, setFilteredItems] = useState(data);
+
+	const handleSearch = (searchItem) => {
+		if (searchItem === '') {
+			setFilteredItems(data);
+		} else {
+			const filtered = data.filter((item) =>
+				item.name.toLowerCase().includes(searchTerm.toLowerCase()),
+			);
+			setFilteredItems(filtered);
+		}
+	};
+
 	return (
 		<>
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
+			<SearchForm onSearch={handleSearch} />
 			<ul>
 				{data.map((item) => (
 					<ListItem key={item.id} name={item.name} />

From d247f3c9308209ad794239be64cefbc7e49b48a8 Mon Sep 17 00:00:00 2001
From: GrannyYetta <you@example.com>
Date: Thu, 29 Aug 2024 14:53:37 +0200
Subject: [PATCH 2/9] debugged SearchForm and List view

---
 src/components/SearchForm.jsx | 40 ++++++++++++++++-------------------
 src/views/List.jsx            | 19 ++++++++++++-----
 2 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/components/SearchForm.jsx b/src/components/SearchForm.jsx
index 2ac2742..fcc583c 100644
--- a/src/components/SearchForm.jsx
+++ b/src/components/SearchForm.jsx
@@ -1,36 +1,32 @@
-import { useState } from 'react';
-
-export default function searchForm({ onSearch }) {
-	const [searchItem, setSearchItem] = useState('');
-
+function SearchForm({ onSearch }) {
 	const handleSearch = (e) => {
 		e.preventDefault();
 		const value = e.target.value;
-		setSearchItem(value);
+
 		onSearch(value);
 	};
 
 	const clearSearch = () => {
-		setSearchTerm('');
 		onSearch('');
 	};
 
-	return;
-	<form onSubmit={handleSearch}>
-		<div className="search-input-container">
-			<label htmlFor="search-input">Search items:</label>
-			<input
-				type="text"
-				id="search-input"
-				value={searchItem}
-				placeholder="Item from list"
-				required
-			/>
-			{searchItem && (
+	return (
+		<form onSubmit={handleSearch}>
+			<div className="search-input-container">
+				<label htmlFor="search-input">Search items:</label>
+				<input
+					type="search"
+					id="search-input"
+					placeholder="Item from list"
+					onChange={handleSearch}
+					required
+				/>
 				<button type="button" onClick={clearSearch} className="clear-button">
 					x
 				</button>
-			)}
-		</div>
-	</form>;
+			</div>
+		</form>
+	);
 }
+
+export default SearchForm;
diff --git a/src/views/List.jsx b/src/views/List.jsx
index c51c6de..68cebf0 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -1,15 +1,22 @@
 import { ListItem } from '../components';
-import { SearchForm } from '../components/SearchForm';
+import SearchForm from '../components/SearchForm';
+import { useState } from 'react';
 
 export function List({ data }) {
 	const [filteredItems, setFilteredItems] = useState(data);
 
+	const [searchTerm, setSearchTerm] = useState('');
+
+	console.log(data);
+
 	const handleSearch = (searchItem) => {
+		console.log(searchItem);
+		setSearchTerm(searchItem);
 		if (searchItem === '') {
 			setFilteredItems(data);
 		} else {
 			const filtered = data.filter((item) =>
-				item.name.toLowerCase().includes(searchTerm.toLowerCase()),
+				item.name.toLowerCase().includes(searchItem.toLowerCase()),
 			);
 			setFilteredItems(filtered);
 		}
@@ -22,9 +29,11 @@ export function List({ data }) {
 			</p>
 			<SearchForm onSearch={handleSearch} />
 			<ul>
-				{data.map((item) => (
-					<ListItem key={item.id} name={item.name} />
-				))}
+				{searchTerm
+					? filteredItems.map((item) => (
+							<ListItem key={item.id} name={item.name} />
+						))
+					: data.map((item) => <ListItem key={item.id} name={item.name} />)}
 			</ul>
 		</>
 	);

From 7d31273a33f305f1c8fdac2bf559ec76b135df28 Mon Sep 17 00:00:00 2001
From: GrannyYetta <you@example.com>
Date: Fri, 30 Aug 2024 12:06:12 +0200
Subject: [PATCH 3/9] eliminated onSearch and simplified the filtering funciton
 in the List view

---
 src/components/SearchForm.jsx | 13 ++++++++-----
 src/views/List.jsx            | 19 ++++---------------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/components/SearchForm.jsx b/src/components/SearchForm.jsx
index fcc583c..901d5ad 100644
--- a/src/components/SearchForm.jsx
+++ b/src/components/SearchForm.jsx
@@ -1,13 +1,15 @@
-function SearchForm({ onSearch }) {
+import { useState } from 'react';
+
+function SearchForm() {
+	const [searchItem, setSearchItem] = useState('');
+
 	const handleSearch = (e) => {
 		e.preventDefault();
-		const value = e.target.value;
-
-		onSearch(value);
+		setSearchItem(e.target.value);
 	};
 
 	const clearSearch = () => {
-		onSearch('');
+		setSearchItem('');
 	};
 
 	return (
@@ -15,6 +17,7 @@ function SearchForm({ onSearch }) {
 			<div className="search-input-container">
 				<label htmlFor="search-input">Search items:</label>
 				<input
+					value={searchItem}
 					type="search"
 					id="search-input"
 					placeholder="Item from list"
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 68cebf0..b9ce78a 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -7,27 +7,16 @@ export function List({ data }) {
 
 	const [searchTerm, setSearchTerm] = useState('');
 
-	console.log(data);
-
-	const handleSearch = (searchItem) => {
-		console.log(searchItem);
-		setSearchTerm(searchItem);
-		if (searchItem === '') {
-			setFilteredItems(data);
-		} else {
-			const filtered = data.filter((item) =>
-				item.name.toLowerCase().includes(searchItem.toLowerCase()),
-			);
-			setFilteredItems(filtered);
-		}
-	};
+	const filteredData = data.filter((item) =>
+		item.name.toLowerCase().includes(searchTerm.toLowerCase()),
+	);
 
 	return (
 		<>
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
-			<SearchForm onSearch={handleSearch} />
+			<SearchForm onClick={handleSearch} />
 			<ul>
 				{searchTerm
 					? filteredItems.map((item) => (

From c9878741cac60d31cc482ea15c25436b5b930a7d Mon Sep 17 00:00:00 2001
From: tataw-cl <127490325+tataw-cl@users.noreply.github.com>
Date: Fri, 30 Aug 2024 11:40:10 +0100
Subject: [PATCH 4/9] attempt to resolve seach functionality issues

---
 src/components/SearchForm.jsx |  5 +++--
 src/views/List.jsx            | 27 ++++++++++++++++++---------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/SearchForm.jsx b/src/components/SearchForm.jsx
index 901d5ad..b19d04e 100644
--- a/src/components/SearchForm.jsx
+++ b/src/components/SearchForm.jsx
@@ -1,11 +1,12 @@
 import { useState } from 'react';
 
-function SearchForm() {
+function SearchForm({ entry }) {
 	const [searchItem, setSearchItem] = useState('');
 
 	const handleSearch = (e) => {
 		e.preventDefault();
 		setSearchItem(e.target.value);
+		entry = searchItem;
 	};
 
 	const clearSearch = () => {
@@ -17,7 +18,7 @@ function SearchForm() {
 			<div className="search-input-container">
 				<label htmlFor="search-input">Search items:</label>
 				<input
-					value={searchItem}
+					value={entry}
 					type="search"
 					id="search-input"
 					placeholder="Item from list"
diff --git a/src/views/List.jsx b/src/views/List.jsx
index b9ce78a..f394133 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -3,7 +3,7 @@ import SearchForm from '../components/SearchForm';
 import { useState } from 'react';
 
 export function List({ data }) {
-	const [filteredItems, setFilteredItems] = useState(data);
+	// const [filteredItems, setFilteredItems] = useState(data);
 
 	const [searchTerm, setSearchTerm] = useState('');
 
@@ -16,14 +16,23 @@ export function List({ data }) {
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
-			<SearchForm onClick={handleSearch} />
-			<ul>
-				{searchTerm
-					? filteredItems.map((item) => (
-							<ListItem key={item.id} name={item.name} />
-						))
-					: data.map((item) => <ListItem key={item.id} name={item.name} />)}
-			</ul>
+			<SearchForm value={searchTerm} />
+			{/* <ul>
+				<li> data.map((item) => <ListItem key={item.id} name={item.name} />)}
+				</li>
+			</ul> */}
 		</>
 	);
 }
+
+// {filteredData.map((item)=>(
+// 	<li key={item.id}>{item.name}</li>
+// ))}
+// </ul>}
+
+{
+	/* {searchTerm
+					? filteredData.map((item) => (
+							<ListItem key={item.id} name={item.name} />
+						)) */
+}

From 26e7688699e49e242f8b0cea7823df1774375ebc Mon Sep 17 00:00:00 2001
From: GrannyYetta <you@example.com>
Date: Fri, 30 Aug 2024 14:50:27 +0200
Subject: [PATCH 5/9] simplified the structure and reorganized the rendering in
 the List view

---
 src/components/SearchForm.jsx |  4 +--
 src/views/List.jsx            | 51 +++++++++++++++++++++++++++--------
 2 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/components/SearchForm.jsx b/src/components/SearchForm.jsx
index 901d5ad..acfbbfd 100644
--- a/src/components/SearchForm.jsx
+++ b/src/components/SearchForm.jsx
@@ -17,12 +17,12 @@ function SearchForm() {
 			<div className="search-input-container">
 				<label htmlFor="search-input">Search items:</label>
 				<input
-					value={searchItem}
 					type="search"
 					id="search-input"
-					placeholder="Item from list"
+					placeholder="Search list..."
 					onChange={handleSearch}
 					required
+					name="search-input"
 				/>
 				<button type="button" onClick={clearSearch} className="clear-button">
 					x
diff --git a/src/views/List.jsx b/src/views/List.jsx
index b9ce78a..327c69e 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -1,14 +1,21 @@
 import { ListItem } from '../components';
-import SearchForm from '../components/SearchForm';
+// import SearchForm from '../components/SearchForm';
 import { useState } from 'react';
 
 export function List({ data }) {
-	const [filteredItems, setFilteredItems] = useState(data);
+	const [searchItem, setSearchItem] = useState('');
 
-	const [searchTerm, setSearchTerm] = useState('');
+	const handleSearch = (e) => {
+		e.preventDefault();
+		setSearchItem(e.target.value);
+	};
 
-	const filteredData = data.filter((item) =>
-		item.name.toLowerCase().includes(searchTerm.toLowerCase()),
+	const clearSearch = () => {
+		setSearchItem('');
+	};
+
+	const filterItems = data.filter((item) =>
+		item.name.toLowerCase().includes(searchItem.toLocaleLowerCase()),
 	);
 
 	return (
@@ -16,13 +23,35 @@ export function List({ data }) {
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
-			<SearchForm onClick={handleSearch} />
+			<form onSubmit={handleSearch}>
+				<div>
+					<label htmlFor="search-input"> Search items:</label>
+					<input
+						onChange={handleSearch}
+						type="search"
+						id="search-item-in-list"
+						value={searchItem}
+						placeholder="Search item..."
+					/>
+					{searchItem && (
+						<button type="button" onClick={clearSearch}>
+							x
+						</button>
+					)}
+					{searchItem && (
+						<ul>
+							{filterItems.map((item) => (
+								<ListItem key={item.id} name={item.name} />
+							))}
+						</ul>
+					)}
+				</div>
+			</form>
+
 			<ul>
-				{searchTerm
-					? filteredItems.map((item) => (
-							<ListItem key={item.id} name={item.name} />
-						))
-					: data.map((item) => <ListItem key={item.id} name={item.name} />)}
+				{data.map((item) => (
+					<ListItem key={item.id} name={item.name} />
+				))}
 			</ul>
 		</>
 	);

From e67f4b6b122151d3821c2ed89fea8993c715147f Mon Sep 17 00:00:00 2001
From: GrannyYetta <you@example.com>
Date: Fri, 30 Aug 2024 20:14:53 +0200
Subject: [PATCH 6/9] deleted SearchForm

---
 src/components/SearchForm.jsx | 35 -----------------------------------
 1 file changed, 35 deletions(-)
 delete mode 100644 src/components/SearchForm.jsx

diff --git a/src/components/SearchForm.jsx b/src/components/SearchForm.jsx
deleted file mode 100644
index acfbbfd..0000000
--- a/src/components/SearchForm.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useState } from 'react';
-
-function SearchForm() {
-	const [searchItem, setSearchItem] = useState('');
-
-	const handleSearch = (e) => {
-		e.preventDefault();
-		setSearchItem(e.target.value);
-	};
-
-	const clearSearch = () => {
-		setSearchItem('');
-	};
-
-	return (
-		<form onSubmit={handleSearch}>
-			<div className="search-input-container">
-				<label htmlFor="search-input">Search items:</label>
-				<input
-					type="search"
-					id="search-input"
-					placeholder="Search list..."
-					onChange={handleSearch}
-					required
-					name="search-input"
-				/>
-				<button type="button" onClick={clearSearch} className="clear-button">
-					x
-				</button>
-			</div>
-		</form>
-	);
-}
-
-export default SearchForm;

From 3b123dc83350a7b7b9a3d5ec44c6d589890c8d1d Mon Sep 17 00:00:00 2001
From: GrannyYetta <you@example.com>
Date: Fri, 30 Aug 2024 20:18:57 +0200
Subject: [PATCH 7/9] deleted SearchForm import

---
 src/views/List.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/List.jsx b/src/views/List.jsx
index 327c69e..7834ba8 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -1,5 +1,4 @@
 import { ListItem } from '../components';
-// import SearchForm from '../components/SearchForm';
 import { useState } from 'react';
 
 export function List({ data }) {

From e963ef5a3077cbd4b368326104745cc0f33ac285 Mon Sep 17 00:00:00 2001
From: tataw-cl <127490325+tataw-cl@users.noreply.github.com>
Date: Fri, 30 Aug 2024 19:41:06 +0100
Subject: [PATCH 8/9] deleted some comments

---
 src/views/List.jsx | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/views/List.jsx b/src/views/List.jsx
index 464e257..7834ba8 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -55,15 +55,3 @@ export function List({ data }) {
 		</>
 	);
 }
-
-// {filteredData.map((item)=>(
-// 	<li key={item.id}>{item.name}</li>
-// ))}
-// </ul>}
-
-{
-	/* {searchTerm
-					? filteredData.map((item) => (
-							<ListItem key={item.id} name={item.name} />
-						)) */
-}

From db8ee22b5b9e27d3704820b56a23883cffc7b423 Mon Sep 17 00:00:00 2001
From: GrannyYetta <you@example.com>
Date: Sat, 31 Aug 2024 14:59:21 +0200
Subject: [PATCH 9/9] matched label htmlFor attribute with id of input

---
 src/views/List.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/List.jsx b/src/views/List.jsx
index 7834ba8..5e7f01c 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -24,7 +24,7 @@ export function List({ data }) {
 			</p>
 			<form onSubmit={handleSearch}>
 				<div>
-					<label htmlFor="search-input"> Search items:</label>
+					<label htmlFor="search-item-in-list"> Search items:</label>
 					<input
 						onChange={handleSearch}
 						type="search"