mirror of
https://github.com/ershisan99/podcaster.git
synced 2025-12-16 20:59:26 +00:00
feat: add search for podcasts list
This commit is contained in:
@@ -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}
|
||||
|
||||
4
todo.md
4
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
|
||||
|
||||
Reference in New Issue
Block a user