feat: migrate to react-query

Signed-off-by: rajput-hemant <[email protected]>

Author: rajput-hemant

bun.lockb

@@ -21,7 +21,7 @@ const config = {
         hostname: "c.sop.saavncdn.com",
       },
     ],
-    unoptimized: isDocker,
+    unoptimized: !isDocker,
   },
   experimental: {
     ppr: true,

next.config.mjs

@@ -45,6 +45,7 @@
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@t3-oss/env-nextjs": "^0.10.1",
+    "@tanstack/react-query": "^5.40.0",
     "@upstash/ratelimit": "^1.1.3",
     "@upstash/redis": "^1.31.3",
     "babel-plugin-react-compiler": "^0.0.0-experimental-592953e-20240517",

package.json

@@ -1,6 +1,7 @@
 "use client";
 
 import React from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { Loader2 } from "lucide-react";
 
 import type { Lang, TopAlbum } from "@/types";
@@ -15,35 +16,29 @@ type TopAlbumsProps = {
 };
 
 export function TopAlbums({ initialAlbums, lang }: TopAlbumsProps) {
-  const { data, last_page } = initialAlbums;
+  const { data, fetchNextPage, isFetchingNextPage, hasNextPage } =
+    useInfiniteQuery({
+      queryKey: ["top-albums", lang],
+      queryFn: ({ pageParam }) => getTopAlbums(pageParam, 50, lang),
+      getNextPageParam: ({ last_page }, allPages) =>
+        last_page ? null : allPages.length + 1,
+      initialPageParam: 1,
+      initialData: { pages: [initialAlbums], pageParams: [1] },
+    });
 
-  const [topAlbums, setTopAlbums] = React.useState(data);
-  const [page, setPage] = React.useState(1);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [hasMore, setHasMore] = React.useState(!last_page);
+  const topAlbums = data.pages.flatMap((page) => page.data);
 
-  const loadMoreRef = React.useRef<HTMLDivElement | null>(null);
-  const isLoadMoreVisible = !!useIntersectionObserver(loadMoreRef, {})
-    ?.isIntersecting;
-
-  async function loadMoreAlbums() {
-    setIsLoading(true);
-    const nextPage = page + 1;
-    const albums = await getTopAlbums(nextPage, 50, lang);
-    setTopAlbums((prevAlbums) => [...prevAlbums, ...albums.data]);
-    setPage(nextPage);
-    setHasMore(!albums.last_page);
-    setIsLoading(false);
-  }
-
-  React.useEffect(() => {
-    if (isLoadMoreVisible) {
-      loadMoreAlbums();
-    }
-  }, [isLoadMoreVisible]); // eslint-disable-line react-hooks/exhaustive-deps
+  const [ref] = useIntersectionObserver({
+    threshold: 0.5,
+    onChange(isIntersecting) {
+      if (isIntersecting) {
+        fetchNextPage();
+      }
+    },
+  });
 
   return (
-    <>
+    <div className="py-6">
       <div className="flex w-full flex-wrap justify-between gap-y-4">
         {topAlbums.map(({ id, name, url, subtitle, type, image, explicit }) => (
           <SliderCard
@@ -58,21 +53,22 @@ export function TopAlbums({ initialAlbums, lang }: TopAlbumsProps) {
         ))}
       </div>
 
-      {hasMore ?
+      {hasNextPage ?
         <div
-          ref={loadMoreRef}
+          ref={ref}
           className="flex items-center justify-center gap-2 font-bold text-muted-foreground"
         >
-          {isLoading && (
+          {isFetchingNextPage && (
             <>
               <Loader2 className="size-5 animate-spin" /> Loading...
             </>
           )}
         </div>
-      : <h3 className="py-6 text-center font-heading text-xl drop-shadow-md dark:bg-gradient-to-br dark:from-neutral-200 dark:to-neutral-600 dark:bg-clip-text dark:text-transparent sm:text-2xl md:text-3xl">
-          <em>Yay! You have seen it all</em> 🤩
+      : <h3 className="text-center font-heading text-xl drop-shadow-md dark:bg-gradient-to-br dark:from-neutral-200 dark:to-neutral-600 dark:bg-clip-text dark:text-transparent sm:text-2xl md:text-3xl">
+          <em>Yay! You have seen it all</em>{" "}
+          <span className="text-foreground">🤩</span>
         </h3>
       }
-    </>
+    </div>
   );
 }

src/app/(root)/album/_components/top-albums.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
 
 import type { User } from "next-auth";
 import type { Favorite, MyPlaylist } from "@/lib/db/schema";
@@ -11,7 +11,7 @@ import { SongListClient } from "@/components/song-list/song-list.client";
 import { Button } from "@/components/ui/button";
 import { getArtistsAlbums, getArtistsSongs } from "@/lib/jiosaavn-api";
 
-type ArtistsTopItemsProps = {
+type Props = {
   id: string;
   type: "songs" | "albums";
   initialSongs?: Song[];
@@ -22,7 +22,7 @@ type ArtistsTopItemsProps = {
   userPlaylists?: MyPlaylist[];
 };
 
-export function ArtistsTopItems(props: ArtistsTopItemsProps) {
+export function ArtistsTopItems(props: Props) {
   const {
     id,
     type,
@@ -34,54 +34,52 @@ export function ArtistsTopItems(props: ArtistsTopItemsProps) {
     userPlaylists,
   } = props;
 
-  const [songs, setSongs] = useState(initialSongs ?? []);
-  const [albums, setAlbums] = useState(initialAlbums ?? []);
-  const [page, setPage] = useState(5);
-  const [isLoading, setIsLoading] = useState(false);
-  const [hasMore, setHasMore] = useState(true);
-
-  useEffect(() => {
-    if (category === undefined) return;
-
-    const sort = category === "latest" ? "desc" : "asc";
-
+  const sort = category === "latest" ? "desc" : "asc";
+
+  const songResults = useInfiniteQuery({
+    queryKey: [id, type === "songs" ? "artists-top-songs" : null],
+    queryFn: async ({ pageParam }) => {
+      const songs = await getArtistsSongs(id, pageParam, category, sort);
+      return songs.top_songs;
+    },
+    getNextPageParam: ({ last_page }, allPages) =>
+      last_page ? null : allPages.length + 5,
+    initialPageParam: 1,
+    initialData: {
+      pages: [{ songs: initialSongs, total: 0, last_page: false }],
+      pageParams: [1],
+    },
+  });
+
+  const albumsResults = useInfiniteQuery({
+    queryKey: [id, type === "albums" ? "artists-top-albums" : null],
+    queryFn: async ({ pageParam }) => {
+      const albums = await getArtistsAlbums(id, pageParam, category, sort);
+      return albums.top_albums;
+    },
+    getNextPageParam: ({ last_page }, allPages) =>
+      last_page ? null : allPages.length + 2,
+    initialPageParam: 1,
+    initialData: {
+      pages: [{ albums: initialAlbums, total: 0, last_page: false }],
+      pageParams: [1],
+    },
+  });
+
+  const songs = songResults.data.pages.flatMap((page) => page.songs ?? []);
+  const albums = albumsResults.data.pages.flatMap((page) => page.albums ?? []);
+
+  const hasNextPage = songResults.hasNextPage || albumsResults.hasNextPage;
+  const isLoading =
+    songResults.isFetchingNextPage || albumsResults.isFetchingNextPage;
+
+  const clickHandler = () => {
     if (type === "songs") {
-      (async () => {
-        const songs = await getArtistsSongs(id, 0, category, sort);
-        setSongs(songs.top_songs.songs);
-        setHasMore(!songs.top_songs.last_page);
-      })();
+      songResults.fetchNextPage();
+    } else if (type === "albums") {
+      albumsResults.fetchNextPage();
     }
-
-    if (type === "albums") {
-      (async () => {
-        const albums = await getArtistsAlbums(id, 0, category, sort);
-        setAlbums(albums.top_albums.albums);
-        setHasMore(!albums.top_albums.last_page);
-      })();
-    }
-  }, [id, type, category]);
-
-  async function clickHandler() {
-    setIsLoading(true);
-
-    const nextPage = page + 1;
-
-    if (type === "songs") {
-      const songs = await getArtistsSongs(id, nextPage, category);
-      setSongs((s) => [...s, ...songs.top_songs.songs]);
-      setHasMore(!songs.top_songs.last_page);
-    }
-
-    if (type === "albums") {
-      const albums = await getArtistsAlbums(id, nextPage, category);
-      setAlbums((a) => [...a, ...albums.top_albums.albums]);
-      setHasMore(!albums.top_albums.last_page);
-    }
-
-    setPage(nextPage);
-    setIsLoading(false);
-  }
+  };
 
   return (
     <>
@@ -106,7 +104,7 @@ export function ArtistsTopItems(props: ArtistsTopItemsProps) {
         ))}
       </div>
 
-      {hasMore ?
+      {hasNextPage ?
         <Button
           variant="outline"
           className="mx-auto my-4 flex rounded-full text-center"
@@ -115,7 +113,8 @@ export function ArtistsTopItems(props: ArtistsTopItemsProps) {
           {isLoading ? "Loading..." : "Load More"}
         </Button>
       : <h3 className="py-6 text-center font-heading text-xl drop-shadow-md dark:bg-gradient-to-br dark:from-neutral-200 dark:to-neutral-600 dark:bg-clip-text dark:text-transparent sm:text-2xl md:text-3xl">
-          <em>Yay! You have seen it all</em> 🤩
+          <em>Yay! You have seen it all</em>{" "}
+          <span className="text-foreground">🤩</span>
         </h3>
       }
     </>

src/app/(root)/artist/[name]/[token]/_components/artists-top-items.tsx

@@ -14,14 +14,12 @@ import { ArtistsTopItems } from "./_components/artists-top-items";
 import { CategoryFilter } from "./_components/category-filter";
 import { TABS } from "./_components/tabs";
 
-type ArtistDetailsPageProps = {
+type Props = {
   params: { name: string; token: string };
   searchParams: { cat?: Category };
 };
 
-export async function generateMetadata({
-  params,
-}: ArtistDetailsPageProps): Promise<Metadata> {
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { name, token } = params;
 
   const artist = await getArtistDetails(token);
@@ -40,7 +38,8 @@ export async function generateMetadata({
     },
   };
 }
-export default async function ArtistDetailsPage(props: ArtistDetailsPageProps) {
+
+export default async function ArtistDetailsPage(props: Props) {
   const {
     params: { name, token },
     searchParams: { cat },
@@ -91,6 +90,7 @@ export default async function ArtistDetailsPage(props: ArtistDetailsPageProps) {
           <CategoryFilter category={cat ?? "popularity"} />
 
           <ArtistsTopItems
+            key={artist.top_songs[0].id}
             id={artist.id}
             type="songs"
             category={cat}
@@ -105,6 +105,7 @@ export default async function ArtistDetailsPage(props: ArtistDetailsPageProps) {
           <CategoryFilter category={cat ?? "popularity"} />
 
           <ArtistsTopItems
+            key={artist.top_albums[0].id}
             id={artist.id}
             type="albums"
             category={cat}

src/app/(root)/artist/[name]/[token]/page.tsx

@@ -43,7 +43,8 @@ export default async function TopArtistsPage() {
       </div>
 
       <h3 className="py-6 text-center font-heading text-xl drop-shadow-md dark:bg-gradient-to-br dark:from-neutral-200 dark:to-neutral-600 dark:bg-clip-text dark:text-transparent sm:text-2xl md:text-3xl">
-        <em>Yay! You have seen it all</em> 🤩
+        <em>Yay! You have seen it all</em>{" "}
+        <span className="text-foreground">🤩</span>
       </h3>
     </div>
   );

src/app/(root)/artist/page.tsx

@@ -43,7 +43,8 @@ export default async function ChartsPage() {
       </div>
 
       <h3 className="py-6 text-center font-heading text-xl drop-shadow-md dark:bg-gradient-to-br dark:from-neutral-200 dark:to-neutral-600 dark:bg-clip-text dark:text-transparent sm:text-2xl md:text-3xl">
-        <em>Yay! You have seen it all</em> 🤩
+        <em>Yay! You have seen it all</em>{" "}
+        <span className="text-foreground">🤩</span>
       </h3>
     </div>
   );

src/app/(root)/chart/page.tsx

@@ -120,7 +120,8 @@ export default async function MyPlaylistsPage({ params: { id } }: Props) {
           <SongList items={songsDetails.songs} />
 
           <h3 className="py-6 text-center font-heading text-xl drop-shadow-md dark:bg-gradient-to-br dark:from-neutral-200 dark:to-neutral-600 dark:bg-clip-text dark:text-transparent sm:text-2xl md:text-3xl">
-            <em>Yay! You have seen it all</em> 🤩
+            <em>Yay! You have seen it all</em>{" "}
+            <span className="text-foreground">🤩</span>
           </h3>
         </>
       : <div className="h-96">