refactor: introduce and integrate query and mutation hooks for music data fetching across various components.

Author: thakurdotdev

client/src/Context/PlayerContext.jsx

@@ -1,41 +1,42 @@
 import { useContext, useEffect, useRef } from "react"
 import { Context } from "./Context"
 import { usePlayerStore } from "@/stores/playerStore"
+import { useUserPlaylistsQuery } from "@/hooks/queries/usePlaylistQueries"
 
-/**
- * PlayerProvider - Minimal provider that only:
- * 1. Manages audio element refs
- * 2. Sets up audio event listeners
- * 3. Syncs audio with store state
- */
 export function PlayerProvider({ children }) {
   const { user, loading } = useContext(Context)
   const audioRef = useRef(null)
   const nextAudioRef = useRef(null)
   const prevSongIdRef = useRef(null)
   const lastUpdateTime = useRef(0)
 
-  // Get store actions (stable references)
   const setAudioRefs = usePlayerStore((s) => s.setAudioRefs)
   const loadAndPlayCurrentSong = usePlayerStore((s) => s.loadAndPlayCurrentSong)
   const handleNextSong = usePlayerStore((s) => s.handleNextSong)
   const updateTime = usePlayerStore((s) => s.updateTime)
   const setDuration = usePlayerStore((s) => s.setDuration)
-  const getPlaylists = usePlayerStore((s) => s.getPlaylists)
+  const setUserPlaylist = usePlayerStore((s) => s.setUserPlaylist)
   const decrementSongsRemaining = usePlayerStore((s) => s.decrementSongsRemaining)
 
-  // Get state that triggers effects
   const currentSong = usePlayerStore((s) => s.currentSong)
   const volume = usePlayerStore((s) => s.volume)
 
-  // Set audio refs on mount
+  const { data: userPlaylists } = useUserPlaylistsQuery({
+    enabled: !!user && !loading,
+  })
+
+  useEffect(() => {
+    if (userPlaylists) {
+      setUserPlaylist(userPlaylists)
+    }
+  }, [userPlaylists, setUserPlaylist])
+
   useEffect(() => {
     if (audioRef.current && nextAudioRef.current) {
       setAudioRefs(audioRef.current, nextAudioRef.current)
     }
   }, [setAudioRefs])
 
-  // Audio event listeners
   useEffect(() => {
     const audio = audioRef.current
     if (!audio) return
@@ -68,27 +69,19 @@ export function PlayerProvider({ children }) {
     }
   }, [handleNextSong, volume, updateTime, setDuration])
 
-  // Load and play song when currentSong changes
   useEffect(() => {
     const loadSong = async () => {
       prevSongIdRef.current = await loadAndPlayCurrentSong(prevSongIdRef.current)
     }
     loadSong()
   }, [currentSong, loadAndPlayCurrentSong])
 
-  // Decrement songs remaining on song change (for sleep timer)
   useEffect(() => {
     if (currentSong) {
       decrementSongsRemaining()
     }
   }, [currentSong?.id, decrementSongsRemaining])
 
-  // Fetch user playlists on login
-  useEffect(() => {
-    if (!user || loading) return
-    getPlaylists()
-  }, [user, loading, getPlaylists])
-
   return (
     <>
       {children}

client/src/Pages/Music/AddToPlaylist.jsx

@@ -4,87 +4,71 @@ import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/u
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { ScrollArea } from "@/components/ui/scroll-area"
-import { usePlayerStore } from "@/stores/playerStore"
-import axios from "axios"
 import { motion } from "framer-motion"
 import { Check, ListMusic, Loader2, Music, Plus, Search, X } from "lucide-react"
 import { useState } from "react"
 import { toast } from "sonner"
+import { useUserPlaylistsQuery } from "@/hooks/queries/usePlaylistQueries"
+import {
+  useCreatePlaylistMutation,
+  useAddSongToPlaylistMutation,
+} from "@/hooks/mutations/usePlaylistMutations"
 
 const AddToPlaylist = ({ dialogOpen, setDialogOpen, song }) => {
-  // Individual selectors
-  const userPlaylist = usePlayerStore((s) => s.userPlaylist)
-  const getPlaylists = usePlayerStore((s) => s.getPlaylists)
+  const { data: userPlaylist = [] } = useUserPlaylistsQuery()
   const [newPlaylistDialog, setNewPlaylistDialog] = useState(false)
   const [newPlaylistName, setNewPlaylistName] = useState("")
-  const [loading, setLoading] = useState(false)
-  const [addingSong, setAddingSong] = useState(false)
   const [searchQuery, setSearchQuery] = useState("")
   const [selectedPlaylistId, setSelectedPlaylistId] = useState(null)
   const [addingSuccess, setAddingSuccess] = useState(false)
 
+  const createMutation = useCreatePlaylistMutation({
+    onSuccess: () => {
+      toast.success("Playlist created successfully")
+      setNewPlaylistDialog(false)
+      setNewPlaylistName("")
+    },
+    onError: (error) => {
+      toast.error(error.response?.data?.message || "Failed to create playlist")
+    },
+  })
+
+  const addSongMutation = useAddSongToPlaylistMutation({
+    onSuccess: () => {
+      setAddingSuccess(true)
+      setTimeout(() => {
+        setDialogOpen(false)
+        setAddingSuccess(false)
+        setSelectedPlaylistId(null)
+      }, 1500)
+    },
+    onError: (error) => {
+      toast.error(error.response?.data?.message || "An error occurred.")
+      setSelectedPlaylistId(null)
+    },
+  })
+
   const filteredPlaylists = userPlaylist?.filter((playlist) =>
     playlist.name.toLowerCase().includes(searchQuery.toLowerCase()),
   )
 
-  const handleCreatePlaylist = async (e) => {
+  const handleCreatePlaylist = (e) => {
     e.preventDefault()
     if (!newPlaylistName.trim()) return
-
-    setLoading(true)
-    try {
-      const response = await axios.post(
-        `${import.meta.env.VITE_API_URL}/api/playlist/create`,
-        { name: newPlaylistName },
-        { withCredentials: true },
-      )
-
-      if (response.status === 200) {
-        toast.success("Playlist created successfully")
-        await getPlaylists()
-        setNewPlaylistDialog(false)
-        setNewPlaylistName("")
-      }
-    } catch (error) {
-      toast.error(error.response?.data?.message || "Failed to create playlist")
-    } finally {
-      setLoading(false)
-    }
+    createMutation.mutate({ name: newPlaylistName })
   }
 
-  const handleAddToPlaylist = async (playlistId) => {
+  const handleAddToPlaylist = (playlistId) => {
     if (!playlistId || !song) {
       return toast.error("An error occurred. Please try again.")
     }
 
     setSelectedPlaylistId(playlistId)
-    setAddingSong(true)
-
-    try {
-      const response = await axios.post(
-        `${import.meta.env.VITE_API_URL}/api/playlist/add-song`,
-        {
-          playlistId,
-          songId: song.id,
-          songData: JSON.stringify(song),
-        },
-        { withCredentials: true },
-      )
-
-      if (response.status === 201) {
-        setAddingSuccess(true)
-        setTimeout(() => {
-          setDialogOpen(false)
-          setAddingSuccess(false)
-          setSelectedPlaylistId(null)
-        }, 1500)
-      }
-    } catch (error) {
-      toast.error(error.response?.data?.message || "An error occurred.")
-      setSelectedPlaylistId(null)
-    } finally {
-      setAddingSong(false)
-    }
+    addSongMutation.mutate({
+      playlistId,
+      songId: song.id,
+      songData: song,
+    })
   }
 
   return (
@@ -123,14 +107,14 @@ const AddToPlaylist = ({ dialogOpen, setDialogOpen, song }) => {
               variant="outline"
               className="w-full flex items-center gap-2 h-10 text-base hover:bg-primary hover:text-primary-foreground transition-all duration-200"
               onClick={() => setNewPlaylistDialog(true)}
-              disabled={loading}
+              disabled={createMutation.isPending}
             >
               <Plus className="w-5 h-5" />
               Create New Playlist
             </Button>
 
             <ScrollArea className="h-[400px] pr-4">
-              {loading ? (
+              {createMutation.isPending ? (
                 <div className="flex items-center h-[300px] justify-center">
                   <Loader2 className="w-6 h-6 animate-spin" />
                 </div>
@@ -144,12 +128,12 @@ const AddToPlaylist = ({ dialogOpen, setDialogOpen, song }) => {
                         transition-all duration-200
                         ${selectedPlaylistId === playlist.id ? "bg-primary/10" : "hover:bg-accent"}
                         ${
-                          addingSong && selectedPlaylistId !== playlist.id
+                          addSongMutation.isPending && selectedPlaylistId !== playlist.id
                             ? "opacity-50 pointer-events-none"
                             : "cursor-pointer"
                         }
                       `}
-                      onClick={() => !addingSong && handleAddToPlaylist(playlist.id)}
+                      onClick={() => !addSongMutation.isPending && handleAddToPlaylist(playlist.id)}
                     >
                       <Avatar className="w-12 h-12 rounded-lg">
                         <AvatarImage src={playlist.image} className="object-cover" />
@@ -210,7 +194,7 @@ const AddToPlaylist = ({ dialogOpen, setDialogOpen, song }) => {
                 onChange={(e) => setNewPlaylistName(e.target.value)}
                 placeholder="Enter playlist name"
                 required
-                disabled={loading}
+                disabled={createMutation.isPending}
                 className="h-12"
               />
             </div>
@@ -220,16 +204,16 @@ const AddToPlaylist = ({ dialogOpen, setDialogOpen, song }) => {
                 variant="outline"
                 className="flex-1 h-12"
                 onClick={() => setNewPlaylistDialog(false)}
-                disabled={loading}
+                disabled={createMutation.isPending}
               >
                 Cancel
               </Button>
               <Button
                 type="submit"
                 className="flex-1 h-12"
-                disabled={loading || !newPlaylistName.trim()}
+                disabled={createMutation.isPending || !newPlaylistName.trim()}
               >
-                {loading ? (
+                {createMutation.isPending ? (
                   <span className="flex items-center gap-2">
                     <Loader2 className="w-4 h-4 animate-spin" />
                     Creating...

client/src/Pages/Music/Album.jsx

@@ -1,41 +1,20 @@
 import { usePlayerStore } from "@/stores/playerStore"
-import axios from "axios"
-import { useEffect, useState } from "react"
-import { useLocation } from "react-router-dom"
+import { useParams } from "react-router-dom"
 import { SongCard } from "./Cards"
 import { ensureHttpsForDownloadUrls, LoadingState, PlaylistActions } from "./Common"
-import { useParams } from "react-router-dom"
+import { useAlbumQuery } from "@/hooks/queries/useSongQueries"
 
 const Album = () => {
-  const location = useLocation()
   const params = useParams()
-  const id = location.state || params?.id || null
-  const [albumData, setAlbumData] = useState(null)
-  const [loading, setLoading] = useState(true)
+  const id = params?.id || null
 
-  // Individual selectors
   const setPlaylist = usePlayerStore((s) => s.setPlaylist)
   const playSong = usePlayerStore((s) => s.playSong)
 
-  useEffect(() => {
-    const fetchAlbumData = async () => {
-      try {
-        const response = await axios.get(`${import.meta.env.VITE_SONG_URL}/album?id=${id}`)
-        const data = response.data
-        setAlbumData(data.data)
-        setLoading(false)
-      } catch (error) {
-        setLoading(false)
-        console.error("Error fetching playlist data:", error)
-      }
-    }
-
-    if (id) {
-      fetchAlbumData()
-    }
-  }, [id])
+  const { data: albumData, isLoading } = useAlbumQuery(id)
 
-  if (loading) return <LoadingState />
+  if (isLoading) return <LoadingState />
+  if (!albumData) return null
 
   const handlePlayAll = () => {
     if (albumData?.songs?.length) {
@@ -62,7 +41,6 @@ const Album = () => {
 
   return (
     <div className="flex flex-col gap-10 p-5">
-      {/** Album Info */}
       <div
         className={`w-full h-[250px] rounded-2xl bg-cover`}
         style={{
@@ -90,7 +68,6 @@ const Album = () => {
         disabled={!albumData?.songs?.length}
       />
 
-      {/** Album Songs */}
       <div className="grid grid-cols-1 sm:grid-cols-4 gap-2">
         {albumData.songs.map((song, index) => (
           <div key={index}>