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>