chore: add react-query

src/pages/home.tsx

@@ -1,10 +1,9 @@
 import { PodcastPreviewCard } from "../components/podcast-preview-card";
-import { podcastsService } from "../services/podcasts/podcasts.service";
-import { useQuery } from "../hooks/useQuery";
 import { useState } from "react";
+import { useTopPodcastsQuery } from "../services/podcasts/podcast.hooks";
 
 export function Home() {
-  const { data } = useQuery(() => podcastsService.getTopPodcasts());
+  const { data, isLoading } = useTopPodcastsQuery();
   const [search, setSearch] = useState("");
 
   const filteredData = data?.filter((podcast) => {
@@ -14,6 +13,10 @@ export function Home() {
     );
   });
 
+  if (isLoading) {
+    return null;
+  }
+
   return (
     <main>
       <input

src/pages/podcast.tsx

@@ -1,3 +1,22 @@
+import { useParams } from "react-router-dom";
+import { useTopPodcastsQuery } from "../services/podcasts/podcast.hooks";
+
 export function Podcast() {
+  const { podcastId } = useParams<{ podcastId: string }>();
+
+  const { data: podcasts } = useTopPodcastsQuery();
+
+  if (!podcastId) {
+    throw new Error(
+      "No podcast ID provided, make sure the component is rendered inside a RouterProvider",
+    );
+  }
+
+  if (!podcasts) {
+    return null;
+  }
+
+  const podcast = podcasts.find((podcast) => podcast.id === podcastId);
+  console.log(podcast);
   return <h1>Podcast page</h1>;
 }