Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

This commit is contained in:
Matt Bruce 2025-07-19 13:51:00 -05:00
parent 80069be722
commit cbbfc1a798
4 changed files with 78 additions and 8 deletions

View File

@ -6,6 +6,7 @@ import { useSongLists } from '../../hooks';
import { useAppSelector } from '../../redux'; import { useAppSelector } from '../../redux';
import { selectSongList } from '../../redux'; import { selectSongList } from '../../redux';
import type { SongListSong, SongList, Song } from '../../types'; import type { SongListSong, SongList, Song } from '../../types';
import { debugLog } from '../../utils/logger';
const SongLists: React.FC = () => { const SongLists: React.FC = () => {
const { const {
@ -143,7 +144,7 @@ const SongLists: React.FC = () => {
); );
} else { } else {
// Unavailable songs get a simple item // Unavailable songs get a simple item
console.log('Non-accordion item:', { debugLog('Non-accordion item:', {
title: songListSong.title, title: songListSong.title,
artist: songListSong.artist, artist: songListSong.artist,
index: index + 1 index: index + 1

View File

@ -3,6 +3,7 @@ import { disabledSongsService } from '../firebase/services';
import { useAppSelector } from '../redux'; import { useAppSelector } from '../redux';
import { selectControllerName } from '../redux'; import { selectControllerName } from '../redux';
import { useToast } from './useToast'; import { useToast } from './useToast';
import { debugLog } from '../utils/logger';
import type { Song, DisabledSong } from '../types'; import type { Song, DisabledSong } from '../types';
export const useDisabledSongs = () => { export const useDisabledSongs = () => {
@ -19,9 +20,17 @@ export const useDisabledSongs = () => {
const loadDisabledSongs = async () => { const loadDisabledSongs = async () => {
try { try {
setLoading(true); setLoading(true);
debugLog('useDisabledSongs - loading disabled songs for controller:', controllerName);
const songs = await disabledSongsService.getDisabledSongs(controllerName); const songs = await disabledSongsService.getDisabledSongs(controllerName);
const paths = await disabledSongsService.getDisabledSongPaths(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); setDisabledSongs(songs);
setDisabledSongPaths(paths); setDisabledSongPaths(paths);
} catch (error) { } catch (error) {
@ -39,6 +48,11 @@ export const useDisabledSongs = () => {
controllerName, controllerName,
(songs) => { (songs) => {
try { try {
debugLog('useDisabledSongs - subscription update:', {
songsCount: Object.keys(songs).length,
songs: Object.values(songs).map((song: DisabledSong) => song.path)
});
setDisabledSongs(songs); setDisabledSongs(songs);
setDisabledSongPaths(new Set(Object.values(songs).map((song: DisabledSong) => song.path))); setDisabledSongPaths(new Set(Object.values(songs).map((song: DisabledSong) => song.path)));
} catch (error) { } catch (error) {
@ -53,6 +67,13 @@ export const useDisabledSongs = () => {
// Check if a song is disabled // Check if a song is disabled
const isSongDisabled = useCallback((song: Song): boolean => { const isSongDisabled = useCallback((song: Song): boolean => {
const isDisabled = disabledSongPaths.has(song.path); 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; return isDisabled;
}, [disabledSongPaths]); }, [disabledSongPaths]);

View File

@ -5,6 +5,7 @@ import { useToast } from './useToast';
import { useDisabledSongs } from './useDisabledSongs'; import { useDisabledSongs } from './useDisabledSongs';
import { UI_CONSTANTS } from '../constants'; import { UI_CONSTANTS } from '../constants';
import { filterSongs } from '../utils/dataProcessing'; import { filterSongs } from '../utils/dataProcessing';
import { debugLog } from '../utils/logger';
import type { Song } from '../types'; import type { Song } from '../types';
const ITEMS_PER_PAGE = 20; const ITEMS_PER_PAGE = 20;
@ -14,21 +15,51 @@ export const useSearch = () => {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const { addToQueue, toggleFavorite } = useSongOperations(); const { addToQueue, toggleFavorite } = useSongOperations();
const { showSuccess, showError } = useToast(); 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) // Get all songs from Redux (this is memoized)
const allSongs = useAppSelector(selectSongsArray); 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 // Memoize filtered results to prevent unnecessary re-computations
const filteredSongs = useMemo(() => { 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 (!searchTerm.trim() || searchTerm.length < UI_CONSTANTS.SEARCH.MIN_SEARCH_LENGTH) {
// If no search term, return all songs except disabled ones // If no search term, return all songs (disabled ones already filtered out)
return allSongs.filter(song => !isSongDisabled(song)); debugLog('useSearch - no search term, returning songs without disabled:', songsWithoutDisabled.length);
return songsWithoutDisabled;
} }
// Apply both search filter and disabled songs filter // Apply search filter to songs without disabled ones
return filterSongs(allSongs, searchTerm, disabledSongPaths); const filtered = filterSongs(songsWithoutDisabled, searchTerm);
}, [allSongs, searchTerm, disabledSongPaths, isSongDisabled]); 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 // Paginate the filtered results - show all items up to current page
const searchResults = useMemo(() => { const searchResults = useMemo(() => {

View File

@ -23,6 +23,7 @@ import {
limitArray limitArray
} from '../utils/dataProcessing'; } from '../utils/dataProcessing';
import { UI_CONSTANTS } from '../constants'; import { UI_CONSTANTS } from '../constants';
import { debugLog } from '../utils/logger';
// Enhanced selectors with data processing // Enhanced selectors with data processing
export const selectSongsArray = createSelector( export const selectSongsArray = createSelector(
@ -33,7 +34,23 @@ export const selectSongsArray = createSelector(
// Selector that filters songs and excludes disabled ones // Selector that filters songs and excludes disabled ones
export const selectSongsArrayWithoutDisabled = createSelector( export const selectSongsArrayWithoutDisabled = createSelector(
[selectSongsArray, (_state: RootState, disabledSongPaths: Set<string>) => disabledSongPaths], [selectSongsArray, (_state: RootState, disabledSongPaths: Set<string>) => 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( export const selectFilteredSongs = createSelector(