Merge pull request #23 from the-collab-lab/jo-qg-shopping-list-filter

Added SearchBar file to components folder

src/components/SearchBar.jsx

@@ -0,0 +1,32 @@
+export function SearchBar({ data, setDisplayData, setSearch, search }) {
+	const handleInputChange = (e) => {
+		const searchTerm = e.target.value;
+		setSearch(searchTerm);
+
+		const filteredUsers = data.filter((item) =>
+			item.name.toLowerCase().includes(searchTerm.trim().toLowerCase()),
+		);
+		setDisplayData(filteredUsers);
+	};
+
+	const handleClear = () => {
+		setDisplayData(data);
+		setSearch('');
+	};
+
+	return (
+		<form>
+			<label htmlFor="item-filter">Search for an item here: </label>
+			<input
+				type="text"
+				id="item-filter"
+				value={search}
+				placeholder="Search here"
+				onChange={handleInputChange}
+			/>
+			<button type="button" onClick={handleClear}>
+				Clear Input
+			</button>
+		</form>
+	);
+}

src/components/index.js

@@ -1,2 +1,3 @@
 export * from './ListItem';
 export * from './SingleList';
+export * from './SearchBar';

src/views/Layout.jsx

@@ -1,10 +1,9 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { Outlet } from 'react-router-dom';
+import { Outlet, NavLink } from 'react-router-dom';
 
 import './Layout.css';
 import { useAuth } from '../api';
 import { SignInButton, SignOutButton } from '../api/useAuth';
-import { NavLink } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 
 /**

src/views/List.jsx

@@ -1,13 +1,24 @@
-import { ListItem } from '../components';
+import { useEffect, useState } from 'react';
+import { ListItem, SearchBar } from '../components';
 
 export function List({ data }) {
+	const [search, setSearch] = useState('');
+	const [displayData, setDisplayData] = useState([]);
+
+	useEffect(() => {
+		setDisplayData([...data]);
+	}, [data]);
+
 	return (
 		<>
-			<p>
-				Hello from the <code>/list</code> page!
-			</p>
+			<SearchBar
+				setDisplayData={setDisplayData}
+				data={data}
+				setSearch={setSearch}
+				search={search}
+			/>
 			<ul>
-				{data.map((item) => (
+				{displayData.map((item) => (
 					<ListItem key={item.id} name={item.name} />
 				))}
 			</ul>