Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>
This commit is contained in:
parent
80069be722
commit
cbbfc1a798
@ -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
|
||||||
|
|||||||
@ -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]);
|
||||||
|
|
||||||
|
|||||||
@ -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(() => {
|
||||||
|
|||||||
@ -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(
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user