chore: add react-query

src/app.tsx

@@ -1,5 +1,20 @@
 import { Router } from "./router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      retry: false,
+    },
+  },
+});
 
 export function App() {
-  return <Router />;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Router />
+    </QueryClientProvider>
+  );
 }

src/hooks/useQuery.ts

@@ -1,28 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-
-export function useQuery<T, E = Error>(
-  callback: () => Promise<T>,
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any*/
-  dependencies: any[] = [],
-) {
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<E | undefined>();
-  const [data, setData] = useState<T | undefined>();
-
-  const callbackMemoized = useCallback(() => {
-    setLoading(true);
-    setError(undefined);
-    setData(undefined);
-    callback()
-      .then(setData)
-      .catch(setError)
-      .finally(() => setLoading(false));
-    /* eslint-disable-next-line react-hooks/exhaustive-deps*/
-  }, dependencies);
-
-  useEffect(() => {
-    callbackMemoized();
-  }, [callbackMemoized]);
-
-  return { loading, error, data };
-}

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

src/services/podcasts/podcast.hooks.ts

@@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query";
+import { podcastsService } from "./podcasts.service";
+
+const QUERY_KEYS = {
+  TOP_PODCASTS: "podcasts/top",
+} as const;
+
+export function useTopPodcastsQuery() {
+  return useQuery({
+    queryKey: [QUERY_KEYS.TOP_PODCASTS],
+    queryFn: () => podcastsService.getTopPodcasts(),
+  });
+}