fix: Restore playlist switching functionality - Add previousPlaylistRef to properly detect playlist changes - Fix playlist change detection logic that was broken by ref updates - Ensure playlist switching works while maintaining infinite scroll fix

packages/frontend/src/hooks/usePaginatedSongs.ts

@@ -24,6 +24,7 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
   const loadingRef = useRef(false);
   const currentPlaylistRef = useRef(playlistName);
   const currentSearchQueryRef = useRef(searchQuery);
+  const previousPlaylistRef = useRef(playlistName);
   const abortControllerRef = useRef<AbortController | null>(null);
 
   // Cleanup function to prevent memory leaks
@@ -134,31 +135,24 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
     };
   }, []);
 
-  // Update refs when values change
-  useEffect(() => {
-    currentPlaylistRef.current = playlistName;
-  }, [playlistName]);
-
-  useEffect(() => {
-    currentSearchQueryRef.current = searchQuery;
-  }, [searchQuery]);
-
   // Handle playlist changes
   useEffect(() => {
-    if (currentPlaylistRef.current !== playlistName) {
+    if (!isInitialLoad && previousPlaylistRef.current !== playlistName) {
+      // Update refs
       currentPlaylistRef.current = playlistName;
-      if (!isInitialLoad) {
+      currentSearchQueryRef.current = searchQuery;
-        // Clear songs for new playlist to replace them
+      previousPlaylistRef.current = playlistName;
-        setSongs([]);
+      
-        setHasMore(true);
+      // Clear songs for new playlist to replace them
-        setCurrentPage(1);
+      setSongs([]);
-        setSearchQuery(initialSearch);
+      setHasMore(true);
-        setError(null);
+      setCurrentPage(1);
-        // Use setTimeout to avoid the dependency issue
+      setSearchQuery(initialSearch);
-        setTimeout(() => {
+      setError(null);
-          loadPage(1, initialSearch, playlistName);
+      // Use setTimeout to avoid the dependency issue
-        }, 0);
+      setTimeout(() => {
-      }
+        loadPage(1, initialSearch, playlistName);
+      }, 0);
     }
   }, [playlistName, isInitialLoad, initialSearch, loadPage]);