From da0009a5d4da5d55daf1da14b3e994103617612c Mon Sep 17 00:00:00 2001 From: Falak Zahra Date: Wed, 28 Aug 2024 09:54:55 -0600 Subject: [PATCH 01/24] 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> + setSearchTerm: (term: string) => void; +} + +export function FilterList({ searchTerm, setSearchTerm }: FilterListProps) { + const handleChange = (e: ChangeEvent) => { + setSearchTerm(e.target.value); + }; + return ( + <> +
+ +
+ + ); +} 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(""); + + const filteredData = data.filter((item) => + item.name.toLowerCase().includes(searchTerm.toLowerCase()), + ); + console.log(filteredData); + + const hasItem = filteredData.length !== 0; return ( <>

Hello from the /list page!

+ + +
    {hasItem && - data.map((item) => ( + filteredData.map((item) => ( ))}
From ce8ab9307ea8c1036c5777b4b6f24f428ed1ac7f Mon Sep 17 00:00:00 2001 From: Falak Zahra Date: Wed, 28 Aug 2024 09:56:34 -0600 Subject: [PATCH 02/24] 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 Date: Wed, 28 Aug 2024 10:03:28 -0600 Subject: [PATCH 03/24] 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> setSearchTerm: (term: string) => void; } @@ -15,13 +14,12 @@ export function FilterList({ searchTerm, setSearchTerm }: FilterListProps) { <>