From a3819134340bb2c067a2fa37c0a1b48120f685a4 Mon Sep 17 00:00:00 2001
From: Andres <andres99.dev@gmail.com>
Date: Thu, 18 Apr 2024 21:35:39 +0200
Subject: [PATCH] feat: add search for podcasts list

---
 src/pages/home.tsx | 17 ++++++++++++++++-
 todo.md            |  4 ++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 9ebc524..59ce16c 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -1,14 +1,29 @@
 import { PodcastPreviewCard } from "../components/podcast-preview-card";
 import { podcastsService } from "../services/podcasts/podcasts.service";
 import { useQuery } from "../hooks/useQuery";
+import { useState } from "react";
 
 export function Home() {
   const { data } = useQuery(() => podcastsService.getTopPodcasts());
+  const [search, setSearch] = useState("");
+
+  const filteredData = data?.filter((podcast) => {
+    return (
+      podcast.title.toLowerCase().includes(search.toLowerCase()) ||
+      podcast.author.toLowerCase().includes(search.toLowerCase())
+    );
+  });
 
   return (
     <main>
+      <input
+        type="text"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        placeholder="Search..."
+      />
       <div className={"grid grid-cols-4"}>
-        {data?.map((podcast) => (
+        {filteredData?.map((podcast) => (
           <PodcastPreviewCard
             detailUrl={`/podcast/${podcast.id}`}
             key={podcast.id}
diff --git a/todo.md b/todo.md
index b3d54a9..1ff4cdc 100644
--- a/todo.md
+++ b/todo.md
@@ -18,8 +18,8 @@
 
   - [x] Shows a list of 100 most popular podcasts from iTunes
   - [ ] Caches the list for 24 hours
-  - [ ] Has filtering by name and author
-  - [ ] Filters are applied in real time
+  - [x] Has filtering by name and author
+  - [x] Filters are applied in real time
   - [x] Clicking on a podcast navigates to the podcast page
 
 - [ ] Podcast