feat: add search for podcasts list

This commit is contained in:
2024-04-18 21:35:39 +02:00
parent 8ac7bf2bbf
commit a381913434
2 changed files with 18 additions and 3 deletions

View File

@@ -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}

View File

@@ -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