From 8900d8126ccc2b4053ed9903f7556deffb6defb2 Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Sun, 31 Mar 2024 13:20:01 -0700
Subject: [PATCH] [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
---
 .../search/components/search-content.tsx      | 22 +++++++++++++------
 .../search/components/search-header.tsx       |  5 +++--
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/renderer/features/search/components/search-content.tsx b/src/renderer/features/search/components/search-content.tsx
index 2ee955aa..38ffc5c9 100644
--- a/src/renderer/features/search/components/search-content.tsx
+++ b/src/renderer/features/search/components/search-content.tsx
@@ -15,7 +15,7 @@ import {
     SONG_CONTEXT_MENU_ITEMS,
 } from '/@/renderer/features/context-menu/context-menu-items';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { useCurrentServer, usePlayButtonBehavior } from '/@/renderer/store';
+import { useCurrentServer, useListStoreByKey, usePlayButtonBehavior } from '/@/renderer/store';
 
 interface SearchContentProps {
     tableRef: MutableRefObject<AgGridReactType | null>;
@@ -27,6 +27,10 @@ export const SearchContent = ({ tableRef }: SearchContentProps) => {
     const { itemType } = useParams() as { itemType: LibraryItem };
     const [searchParams] = useSearchParams();
     const pageKey = itemType;
+    const { filter } = useListStoreByKey({
+        filter: { searchTerm: searchParams.get('query') || '' },
+        key: itemType,
+    });
 
     const handlePlayQueueAdd = usePlayQueueAdd();
     const playButtonBehavior = usePlayButtonBehavior();
@@ -59,22 +63,26 @@ export const SearchContent = ({ tableRef }: SearchContentProps) => {
                 break;
             case LibraryItem.SONG:
                 handlePlayQueueAdd?.({
-                    byData: [e.data],
+                    byItemType: {
+                        id: [],
+                        type: LibraryItem.SONG,
+                    },
+                    initialSongId: e.data.id,
                     playType: playButtonBehavior,
+                    query: {
+                        startIndex: 0,
+                        ...filter,
+                    },
                 });
                 break;
         }
     };
 
-    const customFilters = {
-        searchTerm: searchParams.get('query') || '',
-    };
-
     const { rowClassRules } = useCurrentSongRowStyles({ tableRef });
 
     const tableProps = useVirtualTable({
         contextMenu: contextMenuItems(),
-        customFilters,
+        customFilters: filter,
         itemType,
         pageKey,
         server,
diff --git a/src/renderer/features/search/components/search-header.tsx b/src/renderer/features/search/components/search-header.tsx
index 0e31a6da..16fc2f8b 100644
--- a/src/renderer/features/search/components/search-header.tsx
+++ b/src/renderer/features/search/components/search-header.tsx
@@ -11,6 +11,7 @@ import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh';
 import { AppRoute } from '/@/renderer/router/routes';
+import { useListStoreByKey } from '/@/renderer/store';
 
 interface SearchHeaderProps {
     navigationId: string;
@@ -23,6 +24,7 @@ export const SearchHeader = ({ tableRef, navigationId }: SearchHeaderProps) => {
     const [searchParams, setSearchParams] = useSearchParams();
     const cq = useContainerQuery();
     const server = useCurrentServer();
+    const { filter } = useListStoreByKey({ key: itemType });
 
     const { handleRefreshTable } = useListFilterRefresh({
         itemType,
@@ -30,9 +32,8 @@ export const SearchHeader = ({ tableRef, navigationId }: SearchHeaderProps) => {
     });
 
     const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
-        if (!e.target.value) return;
         setSearchParams({ query: e.target.value }, { replace: true, state: { navigationId } });
-        handleRefreshTable(tableRef, { searchTerm: e.target.value });
+        handleRefreshTable(tableRef, { ...filter, searchTerm: e.target.value });
     }, 200);
 
     return (