Merge pull request #3 from Bakhaw/feat/react-query

Feat/react query

app/album/[albumId]/page.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import { useCallback } from "react";
 import { NextPage } from "next";
 import { useParams } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
 
 import useDominantColor from "@/hooks/useDominantColor";
-import useFetch from "@/hooks/useFetch";
 import useSpotify from "@/hooks/useSpotify";
 
 import generateRGBString from "@/lib/generateRGBString";
@@ -22,46 +21,56 @@ const Album: NextPage = () => {
   const { albumId } = useParams();
   const spotifyApi = useSpotify();
 
-  const getAlbum = useCallback(
-    () => spotifyApi.getAlbum(String(albumId)),
-    [spotifyApi, albumId]
-  );
+  const getAlbum = async () =>
+    (await spotifyApi.getAlbum(String(albumId))).body;
 
-  const album = useFetch<SpotifyApi.SingleAlbumResponse>(getAlbum, [albumId]);
+  const {
+    isPending,
+    error,
+    data: album,
+  } = useQuery({
+    queryKey: ["getAlbum", albumId],
+    queryFn: getAlbum,
+  });
 
   const dominantColor = useDominantColor(album?.images[0].url);
   const backgroundColor = generateRGBString(dominantColor);
 
+  if (error) return "Error....";
+
   return (
     <>
       <div className="sm:relative">
         <AppHeader backgroundColor={backgroundColor} />
       </div>
 
       <Container className="p-0 sm:p-0">
-        <div className="flex flex-col gap-0">
-          <TrackListHeader album={album} />
+        {isPending ? (
+          "Loading...."
+        ) : (
+          <div className="flex flex-col gap-0">
+            <TrackListHeader album={album} />
 
-          <div
-            style={{ backgroundColor }}
-            className="bg-gradient px-2 sm:px-8 py-4"
-          >
-            <TrackList
-              options={{
-                showAlbumName: false,
-                showPlaybackControls: true,
-              }}
-              tracks={album?.tracks.items}
-            />
-          </div>
+            <div
+              style={{ backgroundColor }}
+              className="bg-gradient px-2 sm:px-8 py-4"
+            >
+              <TrackList
+                contextUri={album.uri}
+                options={{
+                  showAlbumName: false,
+                  showPlaybackControls: true,
+                }}
+                tracks={album?.tracks.items}
+              />
+            </div>
 
-          {album && (
             <div className="p-4 sm:px-8">
               <AlbumReleaseDate releaseDate={album.release_date} />
               <AlbumCopyrights copyrights={album.copyrights} />
             </div>
-          )}
-        </div>
+          </div>
+        )}
       </Container>
     </>
   );

app/artist/[artistId]/ArtistHeader.tsx

@@ -0,0 +1,35 @@
+import { NextPage } from "next";
+
+import Cover from "@/components/Cover";
+
+import MonthlyListeners from "./MonthlyListeners";
+
+interface ArtistHeaderProps {
+  artist: SpotifyApi.SingleArtistResponse;
+  backgroundColor: string;
+}
+
+const ArtistHeader: NextPage<ArtistHeaderProps> = ({
+  artist,
+  backgroundColor,
+}) => {
+  // TODO skeleton
+  return (
+    <div
+      className="flex flex-col justify-center items-center gap-2 bg-gradient-secondary py-4"
+      style={{ backgroundColor }}
+    >
+      <Cover
+        alt={`${artist.name} cover`}
+        rounded
+        size="medium"
+        src={artist.images[0].url}
+      />
+      <h1 className="text-7xl font-bold text-white">{artist.name}</h1>
+
+      <MonthlyListeners artistId={artist.id} />
+    </div>
+  );
+};
+
+export default ArtistHeader;

app/artist/[artistId]/MonthlyListeners.tsx

@@ -1,31 +1,32 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 
 interface MonthlyListenersProps {
   artistId: string;
 }
 
 const MonthlyListeners: React.FC<MonthlyListenersProps> = ({ artistId }) => {
-  const [monthlyListeners, setMonthlyListeners] = useState<string>();
-
-  const getMonthlyListeners = async (artistId: string) => {
+  const getMonthlyListeners = async () => {
     const res = await fetch(`/api/monthlyListeners?artistId=${artistId}`);
     const { result } = await res.json();
 
     if (!result) return;
 
     const listenersWithoutComma = result.replace(/,/g, " ");
 
-    setMonthlyListeners(listenersWithoutComma);
+    return listenersWithoutComma;
   };
 
-  useEffect(() => {
-    setMonthlyListeners("");
-    getMonthlyListeners(artistId);
-  }, [artistId]);
-
-  // LOADING PART
+  const {
+    isPending,
+    error,
+    data: monthlyListeners,
+  } = useQuery({
+    queryKey: ["getMonthlyListeners", artistId],
+    queryFn: getMonthlyListeners,
+  });
 
   const [slotMachineNumber, setSlotMachineNumber] = useState<number>(0);
 
@@ -52,10 +53,10 @@ const MonthlyListeners: React.FC<MonthlyListenersProps> = ({ artistId }) => {
 
   return (
     <div className="w-fit">
-      {monthlyListeners ? (
-        <span className="text-span">{monthlyListeners}</span>
-      ) : (
+      {isPending ? (
         <span className="text-span">{slotMachineNumber.toLocaleString()}</span>
+      ) : (
+        <span className="text-span">{monthlyListeners}</span>
       )}
     </div>
   );