Merge pull request #29 from the-collab-lab/fz-bb-filter-shopping-list

Issue 7: Adding list filtering

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",

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";

src/components/FilterListInput.tsx

@@ -0,0 +1,35 @@
+import { ChangeEvent, FormEvent } from "react";
+
+interface FilterListProps {
+	searchTerm: string;
+	setSearchTerm: (term: string) => void;
+}
+
+export function FilterListInput({
+	searchTerm,
+	setSearchTerm,
+}: FilterListProps) {
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		setSearchTerm(e.target.value);
+	};
+
+	const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+	};
+
+	return (
+		<form onSubmit={handleSubmit}>
+			<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>
+	);
+}

src/views/List.tsx

@@ -1,23 +1,38 @@
-import React from 'react';
-import { ListItem as ListItemComponent } from '../components/ListItem';
-import { ListItem } from '../api';
+import { useState, useMemo } from "react";
+import { ListItem as ListItemComponent } from "../components/ListItem";
+import { FilterListInput as FilterListComponent } from "../components/FilterListInput";
+import { ListItem } from "../api";
 
 interface Props {
 	data: ListItem[];
 }
 
-export function List({ data }: Props) {
-	const hasItem = data.length !== 0;
+export function List({ data: unfilteredListItems }: Props) {
+	const [searchTerm, setSearchTerm] = useState<string>("");
+
+	const filteredListItems = useMemo(() => {
+		return unfilteredListItems.filter((item) =>
+			item.name.toLowerCase().includes(searchTerm.toLowerCase()),
+		);
+	}, [searchTerm, unfilteredListItems]);
+
 	return (
 		<>
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
+
+			{unfilteredListItems.length > 0 && (
+				<FilterListComponent
+					searchTerm={searchTerm}
+					setSearchTerm={setSearchTerm}
+				/>
+			)}
+
 			<ul>
-				{hasItem &&
-					data.map((item) => (
-						<ListItemComponent key={item.id} name={item.name} />
-					))}
+				{filteredListItems.map((item) => (
+					<ListItemComponent key={item.id} name={item.name} />
+				))}
 			</ul>
 		</>
 	);