From cbbfc1a798543774d3979403ecd707e769e7b0cc Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Sat, 19 Jul 2025 13:51:00 -0500 Subject: [PATCH] Signed-off-by: Matt Bruce --- src/features/SongLists/SongLists.tsx | 3 +- src/hooks/useDisabledSongs.ts | 21 ++++++++++++++ src/hooks/useSearch.ts | 43 ++++++++++++++++++++++++---- src/redux/selectors.ts | 19 +++++++++++- 4 files changed, 78 insertions(+), 8 deletions(-) diff --git a/src/features/SongLists/SongLists.tsx b/src/features/SongLists/SongLists.tsx index 00dc2bc..2f1971e 100644 --- a/src/features/SongLists/SongLists.tsx +++ b/src/features/SongLists/SongLists.tsx @@ -6,6 +6,7 @@ import { useSongLists } from '../../hooks'; import { useAppSelector } from '../../redux'; import { selectSongList } from '../../redux'; import type { SongListSong, SongList, Song } from '../../types'; +import { debugLog } from '../../utils/logger'; const SongLists: React.FC = () => { const { @@ -143,7 +144,7 @@ const SongLists: React.FC = () => { ); } else { // Unavailable songs get a simple item - console.log('Non-accordion item:', { + debugLog('Non-accordion item:', { title: songListSong.title, artist: songListSong.artist, index: index + 1 diff --git a/src/hooks/useDisabledSongs.ts b/src/hooks/useDisabledSongs.ts index 19a3e46..62dec91 100644 --- a/src/hooks/useDisabledSongs.ts +++ b/src/hooks/useDisabledSongs.ts @@ -3,6 +3,7 @@ import { disabledSongsService } from '../firebase/services'; import { useAppSelector } from '../redux'; import { selectControllerName } from '../redux'; import { useToast } from './useToast'; +import { debugLog } from '../utils/logger'; import type { Song, DisabledSong } from '../types'; export const useDisabledSongs = () => { @@ -19,9 +20,17 @@ export const useDisabledSongs = () => { const loadDisabledSongs = async () => { try { setLoading(true); + debugLog('useDisabledSongs - loading disabled songs for controller:', controllerName); + const songs = await disabledSongsService.getDisabledSongs(controllerName); const paths = await disabledSongsService.getDisabledSongPaths(controllerName); + debugLog('useDisabledSongs - loaded disabled songs:', { + songsCount: Object.keys(songs).length, + pathsCount: paths.size, + paths: Array.from(paths) + }); + setDisabledSongs(songs); setDisabledSongPaths(paths); } catch (error) { @@ -39,6 +48,11 @@ export const useDisabledSongs = () => { controllerName, (songs) => { try { + debugLog('useDisabledSongs - subscription update:', { + songsCount: Object.keys(songs).length, + songs: Object.values(songs).map((song: DisabledSong) => song.path) + }); + setDisabledSongs(songs); setDisabledSongPaths(new Set(Object.values(songs).map((song: DisabledSong) => song.path))); } catch (error) { @@ -53,6 +67,13 @@ export const useDisabledSongs = () => { // Check if a song is disabled const isSongDisabled = useCallback((song: Song): boolean => { const isDisabled = disabledSongPaths.has(song.path); + debugLog('isSongDisabled check:', { + songTitle: song.title, + songPath: song.path, + isDisabled, + disabledSongPathsSize: disabledSongPaths.size, + disabledSongPaths: Array.from(disabledSongPaths) + }); return isDisabled; }, [disabledSongPaths]); diff --git a/src/hooks/useSearch.ts b/src/hooks/useSearch.ts index 65cd83a..909a6f5 100644 --- a/src/hooks/useSearch.ts +++ b/src/hooks/useSearch.ts @@ -5,6 +5,7 @@ import { useToast } from './useToast'; import { useDisabledSongs } from './useDisabledSongs'; import { UI_CONSTANTS } from '../constants'; import { filterSongs } from '../utils/dataProcessing'; +import { debugLog } from '../utils/logger'; import type { Song } from '../types'; const ITEMS_PER_PAGE = 20; @@ -14,21 +15,51 @@ export const useSearch = () => { const [currentPage, setCurrentPage] = useState(1); const { addToQueue, toggleFavorite } = useSongOperations(); const { showSuccess, showError } = useToast(); - const { disabledSongPaths, addDisabledSong, removeDisabledSong, isSongDisabled } = useDisabledSongs(); + const { disabledSongPaths, addDisabledSong, removeDisabledSong, isSongDisabled, loading: disabledSongsLoading } = useDisabledSongs(); // Get all songs from Redux (this is memoized) const allSongs = useAppSelector(selectSongsArray); + // Debug logging + debugLog('useSearch - debug:', { + allSongsLength: allSongs.length, + disabledSongPathsSize: disabledSongPaths.size, + disabledSongPaths: Array.from(disabledSongPaths), + disabledSongsLoading + }); + // Memoize filtered results to prevent unnecessary re-computations const filteredSongs = useMemo(() => { + // Don't return any results if disabled songs are still loading + if (disabledSongsLoading) { + debugLog('useSearch - disabled songs still loading, returning empty array'); + return []; + } + + // Filter out disabled songs first + const songsWithoutDisabled = allSongs.filter(song => !disabledSongPaths.has(song.path)); + + debugLog('useSearch - filtering songs:', { + totalSongs: allSongs.length, + afterDisabledFilter: songsWithoutDisabled.length, + searchTerm + }); + if (!searchTerm.trim() || searchTerm.length < UI_CONSTANTS.SEARCH.MIN_SEARCH_LENGTH) { - // If no search term, return all songs except disabled ones - return allSongs.filter(song => !isSongDisabled(song)); + // If no search term, return all songs (disabled ones already filtered out) + debugLog('useSearch - no search term, returning songs without disabled:', songsWithoutDisabled.length); + return songsWithoutDisabled; } - // Apply both search filter and disabled songs filter - return filterSongs(allSongs, searchTerm, disabledSongPaths); - }, [allSongs, searchTerm, disabledSongPaths, isSongDisabled]); + // Apply search filter to songs without disabled ones + const filtered = filterSongs(songsWithoutDisabled, searchTerm); + debugLog('useSearch - with search term, filtered songs:', { + before: songsWithoutDisabled.length, + after: filtered.length, + searchTerm + }); + return filtered; + }, [allSongs, searchTerm, disabledSongPaths, disabledSongsLoading]); // Paginate the filtered results - show all items up to current page const searchResults = useMemo(() => { diff --git a/src/redux/selectors.ts b/src/redux/selectors.ts index ef049c2..2284c3a 100644 --- a/src/redux/selectors.ts +++ b/src/redux/selectors.ts @@ -23,6 +23,7 @@ import { limitArray } from '../utils/dataProcessing'; import { UI_CONSTANTS } from '../constants'; +import { debugLog } from '../utils/logger'; // Enhanced selectors with data processing export const selectSongsArray = createSelector( @@ -33,7 +34,23 @@ export const selectSongsArray = createSelector( // Selector that filters songs and excludes disabled ones export const selectSongsArrayWithoutDisabled = createSelector( [selectSongsArray, (_state: RootState, disabledSongPaths: Set) => disabledSongPaths], - (songs, disabledSongPaths) => songs.filter(song => !disabledSongPaths.has(song.path)) + (songs, disabledSongPaths) => { + debugLog('selectSongsArrayWithoutDisabled called:', { + songsLength: songs.length, + disabledSongPathsSize: disabledSongPaths.size, + disabledSongPaths: Array.from(disabledSongPaths) + }); + + const filtered = songs.filter(song => !disabledSongPaths.has(song.path)); + + debugLog('selectSongsArrayWithoutDisabled result:', { + before: songs.length, + after: filtered.length, + filteredCount: songs.length - filtered.length + }); + + return filtered; + } ); export const selectFilteredSongs = createSelector(