From da0009a5d4da5d55daf1da14b3e994103617612c Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Wed, 28 Aug 2024 09:54:55 -0600
Subject: [PATCH 01/14] Filter the list based on user search input

---
 src/components/FilterList.tsx | 32 ++++++++++++++++++++++++++++++++
 src/views/List.tsx            | 24 +++++++++++++++++++-----
 2 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 src/components/FilterList.tsx

diff --git a/src/components/FilterList.tsx b/src/components/FilterList.tsx
new file mode 100644
index 0000000..cf4e15c
--- /dev/null
+++ b/src/components/FilterList.tsx
@@ -0,0 +1,32 @@
+import { ChangeEvent } from "react";
+import { ListItem } from "../api";
+
+interface FilterListProps {
+	searchTerm: string;
+	// setSearchTerm: React.Dispatch<React.SetStateAction<string>>
+	setSearchTerm: (term: string) => void;
+}
+
+export function FilterList({ searchTerm, setSearchTerm }: FilterListProps) {
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		setSearchTerm(e.target.value);
+	};
+	return (
+		<>
+			<form>
+				<label htmlFor="filterList">
+					{" "}
+					Filter List:
+					<input
+						type="text"
+						onChange={handleChange}
+						value={searchTerm}
+						id="filerList"
+						aria-label="Filter Shopping List"
+						placeholder="Search items..."
+					/>
+				</label>
+			</form>
+		</>
+	);
+}
diff --git a/src/views/List.tsx b/src/views/List.tsx
index bfd5a8b..b0631e1 100644
--- a/src/views/List.tsx
+++ b/src/views/List.tsx
@@ -1,21 +1,35 @@
-import React from 'react';
-import { ListItem as ListItemComponent } from '../components/ListItem';
-import { ListItem } from '../api';
+import { useState } from "react";
+import { ListItem as ListItemComponent } from "../components/ListItem";
+import { FilterList as FilterListComponent } from "../components/FilterList";
+import { ListItem } from "../api";
 
 interface Props {
 	data: ListItem[];
 }
 
 export function List({ data }: Props) {
-	const hasItem = data.length !== 0;
+	const [searchTerm, setSearchTerm] = useState<string>("");
+
+	const filteredData = data.filter((item) =>
+		item.name.toLowerCase().includes(searchTerm.toLowerCase()),
+	);
+	console.log(filteredData);
+
+	const hasItem = filteredData.length !== 0;
 	return (
 		<>
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
+
+			<FilterListComponent
+				searchTerm={searchTerm}
+				setSearchTerm={setSearchTerm}
+			/>
+
 			<ul>
 				{hasItem &&
-					data.map((item) => (
+					filteredData.map((item) => (
 						<ListItemComponent key={item.id} name={item.name} />
 					))}
 			</ul>

From ce8ab9307ea8c1036c5777b4b6f24f428ed1ac7f Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Wed, 28 Aug 2024 09:56:34 -0600
Subject: [PATCH 02/14] Filter the list based on user search input

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 src/App.tsx       | 2 --
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 45aa58c..3ba2965 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,7 @@
 				"eslint-plugin-react": "^7.35.0",
 				"husky": "^9.1.4",
 				"jsdom": "^24.1.1",
-				"lint-staged": "^15.2.8",
+				"lint-staged": "^15.2.9",
 				"prettier": "^3.3.3",
 				"typescript-eslint": "^8.2.0",
 				"vite": "^5.3.5",
diff --git a/package.json b/package.json
index f8906fe..7e3d6a8 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
 		"eslint-plugin-react": "^7.35.0",
 		"husky": "^9.1.4",
 		"jsdom": "^24.1.1",
-		"lint-staged": "^15.2.8",
+		"lint-staged": "^15.2.9",
 		"prettier": "^3.3.3",
 		"typescript-eslint": "^8.2.0",
 		"vite": "^5.3.5",
diff --git a/src/App.tsx b/src/App.tsx
index 6a7e0f0..f0df29a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 import { Home, Layout, List, ManageList } from "./views";

From 89c30b47ba11dc2f0f785de6e7206b78903146aa Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Wed, 28 Aug 2024 10:03:28 -0600
Subject: [PATCH 03/14] Remove unneccesary console logs and comments

---
 src/components/FilterList.tsx | 4 +---
 src/views/List.tsx            | 1 -
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/FilterList.tsx b/src/components/FilterList.tsx
index cf4e15c..a2e142a 100644
--- a/src/components/FilterList.tsx
+++ b/src/components/FilterList.tsx
@@ -3,7 +3,6 @@ import { ListItem } from "../api";
 
 interface FilterListProps {
 	searchTerm: string;
-	// setSearchTerm: React.Dispatch<React.SetStateAction<string>>
 	setSearchTerm: (term: string) => void;
 }
 
@@ -15,13 +14,12 @@ export function FilterList({ searchTerm, setSearchTerm }: FilterListProps) {
 		<>
 			<form>
 				<label htmlFor="filterList">
-					{" "}
 					Filter List:
 					<input
 						type="text"
 						onChange={handleChange}
 						value={searchTerm}
-						id="filerList"
+						id="filterList"
 						aria-label="Filter Shopping List"
 						placeholder="Search items..."
 					/>
diff --git a/src/views/List.tsx b/src/views/List.tsx
index b0631e1..f1ca222 100644
--- a/src/views/List.tsx
+++ b/src/views/List.tsx
@@ -13,7 +13,6 @@ export function List({ data }: Props) {
 	const filteredData = data.filter((item) =>
 		item.name.toLowerCase().includes(searchTerm.toLowerCase()),
 	);
-	console.log(filteredData);
 
 	const hasItem = filteredData.length !== 0;
 	return (

From 3c9f64b0bd0cadd5b7027edfc3893ad91591992d Mon Sep 17 00:00:00 2001
From: bbland1 <104288486+bbland1@users.noreply.github.com>
Date: Wed, 28 Aug 2024 12:28:32 -0400
Subject: [PATCH 04/14] remove unuse import in FilterList

---
 src/components/FilterList.tsx | 2 +-
 src/views/List.tsx            | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/FilterList.tsx b/src/components/FilterList.tsx
index a2e142a..96153a7 100644
--- a/src/components/FilterList.tsx
+++ b/src/components/FilterList.tsx
@@ -1,5 +1,4 @@
 import { ChangeEvent } from "react";
-import { ListItem } from "../api";
 
 interface FilterListProps {
 	searchTerm: string;
@@ -10,6 +9,7 @@ export function FilterList({ searchTerm, setSearchTerm }: FilterListProps) {
 	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
 		setSearchTerm(e.target.value);
 	};
+
 	return (
 		<>
 			<form>
diff --git a/src/views/List.tsx b/src/views/List.tsx
index f1ca222..c2c8d14 100644
--- a/src/views/List.tsx
+++ b/src/views/List.tsx
@@ -15,6 +15,7 @@ export function List({ data }: Props) {
 	);
 
 	const hasItem = filteredData.length !== 0;
+
 	return (
 		<>
 			<p>

From c3ac579cbe775fad33fa2e28de8a1dc7c8c18876 Mon Sep 17 00:00:00 2001
From: bbland1 <104288486+bbland1@users.noreply.github.com>
Date: Wed, 28 Aug 2024 22:08:45 -0400
Subject: [PATCH 05/14] changed input to search type to get clearing x

Co-authored-by: Falak  <zahrafalak@users.noreply.github.com>
---
 src/components/FilterList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FilterList.tsx b/src/components/FilterList.tsx
index 96153a7..92997aa 100644
--- a/src/components/FilterList.tsx
+++ b/src/components/FilterList.tsx
@@ -16,7 +16,7 @@ export function FilterList({ searchTerm, setSearchTerm }: FilterListProps) {
 				<label htmlFor="filterList">
 					Filter List:
 					<input
-						type="text"
+						type="search"
 						onChange={handleChange}
 						value={searchTerm}
 						id="filterList"

From b37e870bc2fb9cac33ca0c18cac136f9647fdc7c Mon Sep 17 00:00:00 2001
From: bbland1 <104288486+bbland1@users.noreply.github.com>
Date: Wed, 28 Aug 2024 22:15:32 -0400
Subject: [PATCH 06/14] update the search aria-label

Co-authored-by: Falak  <zahrafalak@users.noreply.github.com>
---
 src/components/FilterList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FilterList.tsx b/src/components/FilterList.tsx
index 92997aa..7a42798 100644
--- a/src/components/FilterList.tsx
+++ b/src/components/FilterList.tsx
@@ -20,7 +20,7 @@ export function FilterList({ searchTerm, setSearchTerm }: FilterListProps) {
 						onChange={handleChange}
 						value={searchTerm}
 						id="filterList"
-						aria-label="Filter Shopping List"
+						aria-label="Filter items in the list"
 						placeholder="Search items..."
 					/>
 				</label>

From 352fcf41d3d388134a664d0b846782409abf1d95 Mon Sep 17 00:00:00 2001
From: bbland1 <104288486+bbland1@users.noreply.github.com>
Date: Sat, 31 Aug 2024 22:28:58 -0400
Subject: [PATCH 07/14] removed unneeded fragment in FilterList component

---
 src/components/FilterList.tsx | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/FilterList.tsx b/src/components/FilterList.tsx
index 7a42798..c2049b7 100644
--- a/src/components/FilterList.tsx
+++ b/src/components/FilterList.tsx
@@ -11,20 +11,18 @@ export function FilterList({ searchTerm, setSearchTerm }: FilterListProps) {
 	};
 
 	return (
-		<>
-			<form>
-				<label htmlFor="filterList">
-					Filter List:
-					<input
-						type="search"
-						onChange={handleChange}
-						value={searchTerm}
-						id="filterList"
-						aria-label="Filter items in the list"
-						placeholder="Search items..."
-					/>
-				</label>
-			</form>
-		</>
+		<form>
+			<label htmlFor="filterList">
+				Filter List:
+				<input
+					type="search"
+					onChange={handleChange}
+					value={searchTerm}
+					id="filterList"
+					aria-label="Filter items in the list"
+					placeholder="Search items..."
+				/>
+			</label>
+		</form>
 	);
 }

From 29fbad3db3ab8f295fe6ee62a02dd1cad310008b Mon Sep 17 00:00:00 2001
From: bbland1 <104288486+bbland1@users.noreply.github.com>
Date: Sat, 31 Aug 2024 22:42:11 -0400
Subject: [PATCH 08/14] update the name of filterList to filterListInput to
 reflect function

---
 src/components/{FilterList.tsx => FilterListInput.tsx} | 5 ++++-
 src/views/List.tsx                                     | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)
 rename src/components/{FilterList.tsx => FilterListInput.tsx} (85%)

diff --git a/src/components/FilterList.tsx b/src/components/FilterListInput.tsx
similarity index 85%
rename from src/components/FilterList.tsx
rename to src/components/FilterListInput.tsx
index c2049b7..ca24b62 100644
--- a/src/components/FilterList.tsx
+++ b/src/components/FilterListInput.tsx
@@ -5,7 +5,10 @@ interface FilterListProps {
 	setSearchTerm: (term: string) => void;
 }
 
-export function FilterList({ searchTerm, setSearchTerm }: FilterListProps) {
+export function FilterListInput({
+	searchTerm,
+	setSearchTerm,
+}: FilterListProps) {
 	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
 		setSearchTerm(e.target.value);
 	};
diff --git a/src/views/List.tsx b/src/views/List.tsx
index c2c8d14..5132c30 100644
--- a/src/views/List.tsx
+++ b/src/views/List.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { ListItem as ListItemComponent } from "../components/ListItem";
-import { FilterList as FilterListComponent } from "../components/FilterList";
+import { FilterListInput as FilterListComponent } from "../components/FilterListInput";
 import { ListItem } from "../api";
 
 interface Props {

From 43cd0b065f216b02cace1438cccabf66eff677d8 Mon Sep 17 00:00:00 2001
From: bbland1 <104288486+bbland1@users.noreply.github.com>
Date: Sat, 31 Aug 2024 23:43:06 -0400
Subject: [PATCH 09/14] update ListItem variable names & updated the
 conditional checks for rending list and the filtering input

---
 src/views/List.tsx | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/views/List.tsx b/src/views/List.tsx
index 5132c30..3ebb7a1 100644
--- a/src/views/List.tsx
+++ b/src/views/List.tsx
@@ -7,31 +7,30 @@ interface Props {
 	data: ListItem[];
 }
 
-export function List({ data }: Props) {
+export function List({ data: unfilteredListItems }: Props) {
 	const [searchTerm, setSearchTerm] = useState<string>("");
 
-	const filteredData = data.filter((item) =>
+	const filteredListItems = unfilteredListItems.filter((item) =>
 		item.name.toLowerCase().includes(searchTerm.toLowerCase()),
 	);
 
-	const hasItem = filteredData.length !== 0;
-
 	return (
 		<>
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
 
-			<FilterListComponent
-				searchTerm={searchTerm}
-				setSearchTerm={setSearchTerm}
-			/>
+			{filteredListItems.length > 0 && (
+				<FilterListComponent
+					searchTerm={searchTerm}
+					setSearchTerm={setSearchTerm}
+				/>
+			)}
 
 			<ul>
-				{hasItem &&
-					filteredData.map((item) => (
-						<ListItemComponent key={item.id} name={item.name} />
-					))}
+				{filteredListItems.map((item) => (
+					<ListItemComponent key={item.id} name={item.name} />
+				))}
 			</ul>
 		</>
 	);

From f2c18b43c0e79c89781bac2d8510ca2a200e3ea3 Mon Sep 17 00:00:00 2001
From: bbland1 <104288486+bbland1@users.noreply.github.com>
Date: Sun, 1 Sep 2024 00:31:18 -0400
Subject: [PATCH 10/14] use unfilteredListItems to conditionally render filter
 input so it stays if filter list is empty

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

diff --git a/src/views/List.tsx b/src/views/List.tsx
index 3ebb7a1..4fa3a47 100644
--- a/src/views/List.tsx
+++ b/src/views/List.tsx
@@ -20,7 +20,7 @@ export function List({ data: unfilteredListItems }: Props) {
 				Hello from the <code>/list</code> page!
 			</p>
 
-			{filteredListItems.length > 0 && (
+			{unfilteredListItems.length > 0 && (
 				<FilterListComponent
 					searchTerm={searchTerm}
 					setSearchTerm={setSearchTerm}

From 2678b2b01f816267f4e7146206c4fb8a24e51bde Mon Sep 17 00:00:00 2001
From: bbland1 <104288486+bbland1@users.noreply.github.com>
Date: Sun, 1 Sep 2024 00:58:19 -0400
Subject: [PATCH 11/14] adding useMemo to list filtering to better performance
 by reducing unnecessary  re-renders

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

diff --git a/src/views/List.tsx b/src/views/List.tsx
index 4fa3a47..b81d596 100644
--- a/src/views/List.tsx
+++ b/src/views/List.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { ListItem as ListItemComponent } from "../components/ListItem";
 import { FilterListInput as FilterListComponent } from "../components/FilterListInput";
 import { ListItem } from "../api";
@@ -10,9 +10,11 @@ interface Props {
 export function List({ data: unfilteredListItems }: Props) {
 	const [searchTerm, setSearchTerm] = useState<string>("");
 
-	const filteredListItems = unfilteredListItems.filter((item) =>
-		item.name.toLowerCase().includes(searchTerm.toLowerCase()),
-	);
+	const filteredListItems = useMemo(() => {
+		return unfilteredListItems.filter((item) =>
+			item.name.toLowerCase().includes(searchTerm.toLowerCase()),
+		);
+	}, [searchTerm, unfilteredListItems]);
 
 	return (
 		<>

From 8d403d91a29533f52f0757deebe03a39efea5fb4 Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Sat, 31 Aug 2024 23:24:02 -0600
Subject: [PATCH 12/14] Remove unfilteredListItems from the dependency array
 for useMemo

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

diff --git a/src/views/List.tsx b/src/views/List.tsx
index b81d596..f9cd476 100644
--- a/src/views/List.tsx
+++ b/src/views/List.tsx
@@ -14,7 +14,7 @@ export function List({ data: unfilteredListItems }: Props) {
 		return unfilteredListItems.filter((item) =>
 			item.name.toLowerCase().includes(searchTerm.toLowerCase()),
 		);
-	}, [searchTerm, unfilteredListItems]);
+	}, [searchTerm]);
 
 	return (
 		<>

From 959c10a7dfa6118a766b81fe0aeb354fdbcb20c2 Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Sat, 31 Aug 2024 23:32:22 -0600
Subject: [PATCH 13/14] Add unfilteredListItems back to the dependency array
 for useMemo

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

diff --git a/src/views/List.tsx b/src/views/List.tsx
index f9cd476..b81d596 100644
--- a/src/views/List.tsx
+++ b/src/views/List.tsx
@@ -14,7 +14,7 @@ export function List({ data: unfilteredListItems }: Props) {
 		return unfilteredListItems.filter((item) =>
 			item.name.toLowerCase().includes(searchTerm.toLowerCase()),
 		);
-	}, [searchTerm]);
+	}, [searchTerm, unfilteredListItems]);
 
 	return (
 		<>

From 243b675f32baf3efcb2736740bbe1d9465ba8c96 Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Sat, 31 Aug 2024 23:44:48 -0600
Subject: [PATCH 14/14] Prevent form refresh if user presses Enter key during
 filtering process

---
 src/components/FilterListInput.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/FilterListInput.tsx b/src/components/FilterListInput.tsx
index ca24b62..6ebe5ef 100644
--- a/src/components/FilterListInput.tsx
+++ b/src/components/FilterListInput.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, FormEvent } from "react";
 
 interface FilterListProps {
 	searchTerm: string;
@@ -13,8 +13,12 @@ export function FilterListInput({
 		setSearchTerm(e.target.value);
 	};
 
+	const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+	};
+
 	return (
-		<form>
+		<form onSubmit={handleSubmit}>
 			<label htmlFor="filterList">
 				Filter List:
 				<input