[bugfix]: queue all songs on search, consistent sort, clearing

- Previously, the search page would render initial page in one order, but search itself would be different order
This is resolved by having both virtual-table and search-header using listStoreKey
- When double clicking, now enqueue all the songs using the same sort
- Reset the search when clearing
This commit is contained in:
Kendall Garner 2024-03-31 13:20:01 -07:00
parent 918842e3a5
commit 8900d8126c
No known key found for this signature in database
GPG key ID: 18D2767419676C87
2 changed files with 18 additions and 9 deletions

View file

@ -15,7 +15,7 @@ import {
SONG_CONTEXT_MENU_ITEMS, SONG_CONTEXT_MENU_ITEMS,
} from '/@/renderer/features/context-menu/context-menu-items'; } from '/@/renderer/features/context-menu/context-menu-items';
import { usePlayQueueAdd } from '/@/renderer/features/player'; import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useCurrentServer, usePlayButtonBehavior } from '/@/renderer/store'; import { useCurrentServer, useListStoreByKey, usePlayButtonBehavior } from '/@/renderer/store';
interface SearchContentProps { interface SearchContentProps {
tableRef: MutableRefObject<AgGridReactType | null>; tableRef: MutableRefObject<AgGridReactType | null>;
@ -27,6 +27,10 @@ export const SearchContent = ({ tableRef }: SearchContentProps) => {
const { itemType } = useParams() as { itemType: LibraryItem }; const { itemType } = useParams() as { itemType: LibraryItem };
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const pageKey = itemType; const pageKey = itemType;
const { filter } = useListStoreByKey({
filter: { searchTerm: searchParams.get('query') || '' },
key: itemType,
});
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
const playButtonBehavior = usePlayButtonBehavior(); const playButtonBehavior = usePlayButtonBehavior();
@ -59,22 +63,26 @@ export const SearchContent = ({ tableRef }: SearchContentProps) => {
break; break;
case LibraryItem.SONG: case LibraryItem.SONG:
handlePlayQueueAdd?.({ handlePlayQueueAdd?.({
byData: [e.data], byItemType: {
id: [],
type: LibraryItem.SONG,
},
initialSongId: e.data.id,
playType: playButtonBehavior, playType: playButtonBehavior,
query: {
startIndex: 0,
...filter,
},
}); });
break; break;
} }
}; };
const customFilters = {
searchTerm: searchParams.get('query') || '',
};
const { rowClassRules } = useCurrentSongRowStyles({ tableRef }); const { rowClassRules } = useCurrentSongRowStyles({ tableRef });
const tableProps = useVirtualTable({ const tableProps = useVirtualTable({
contextMenu: contextMenuItems(), contextMenu: contextMenuItems(),
customFilters, customFilters: filter,
itemType, itemType,
pageKey, pageKey,
server, server,

View file

@ -11,6 +11,7 @@ import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks'; import { useContainerQuery } from '/@/renderer/hooks';
import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh'; import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
import { useListStoreByKey } from '/@/renderer/store';
interface SearchHeaderProps { interface SearchHeaderProps {
navigationId: string; navigationId: string;
@ -23,6 +24,7 @@ export const SearchHeader = ({ tableRef, navigationId }: SearchHeaderProps) => {
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const cq = useContainerQuery(); const cq = useContainerQuery();
const server = useCurrentServer(); const server = useCurrentServer();
const { filter } = useListStoreByKey({ key: itemType });
const { handleRefreshTable } = useListFilterRefresh({ const { handleRefreshTable } = useListFilterRefresh({
itemType, itemType,
@ -30,9 +32,8 @@ export const SearchHeader = ({ tableRef, navigationId }: SearchHeaderProps) => {
}); });
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => { const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
if (!e.target.value) return;
setSearchParams({ query: e.target.value }, { replace: true, state: { navigationId } }); setSearchParams({ query: e.target.value }, { replace: true, state: { navigationId } });
handleRefreshTable(tableRef, { searchTerm: e.target.value }); handleRefreshTable(tableRef, { ...filter, searchTerm: e.target.value });
}, 200); }, 200);
return ( return (