feishin/src/renderer/features/search/components/search-content.tsx

109 lines
3.9 KiB
TypeScript
Raw Normal View History

2023-07-20 00:37:05 -07:00
import { RowDoubleClickedEvent } from '@ag-grid-community/core';
2023-05-19 22:26:43 -07:00
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
2023-07-20 00:37:05 -07:00
import { MutableRefObject } from 'react';
import { generatePath, useNavigate } from 'react-router';
2023-05-19 22:26:43 -07:00
import { useParams, useSearchParams } from 'react-router-dom';
2023-07-20 00:37:05 -07:00
import { AppRoute } from '../../../router/routes';
2023-05-19 22:26:43 -07:00
import { LibraryItem, QueueSong } from '/@/renderer/api/types';
import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
2023-07-20 00:37:05 -07:00
import { VirtualTable } from '/@/renderer/components/virtual-table';
import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles';
import { useVirtualTable } from '/@/renderer/components/virtual-table/hooks/use-virtual-table';
2023-05-19 22:33:15 -07:00
import {
2023-07-01 19:10:05 -07:00
ALBUM_CONTEXT_MENU_ITEMS,
ARTIST_CONTEXT_MENU_ITEMS,
SONG_CONTEXT_MENU_ITEMS,
2023-05-19 22:33:15 -07:00
} from '/@/renderer/features/context-menu/context-menu-items';
2023-05-19 22:26:43 -07:00
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useCurrentServer, useListStoreByKey, usePlayButtonBehavior } from '/@/renderer/store';
2023-05-19 22:26:43 -07:00
interface SearchContentProps {
2023-07-01 19:10:05 -07:00
tableRef: MutableRefObject<AgGridReactType | null>;
2023-05-19 22:26:43 -07:00
}
2023-07-20 00:37:05 -07:00
export const SearchContent = ({ tableRef }: SearchContentProps) => {
2023-07-01 19:10:05 -07:00
const navigate = useNavigate();
const server = useCurrentServer();
const { itemType } = useParams() as { itemType: LibraryItem };
const [searchParams] = useSearchParams();
2023-07-20 00:37:05 -07:00
const pageKey = itemType;
const { filter } = useListStoreByKey({
filter: { searchTerm: searchParams.get('query') || '' },
key: itemType,
});
2023-07-20 00:37:05 -07:00
2023-07-01 19:10:05 -07:00
const handlePlayQueueAdd = usePlayQueueAdd();
const playButtonBehavior = usePlayButtonBehavior();
2023-05-19 22:26:43 -07:00
2023-07-01 19:10:05 -07:00
const contextMenuItems = () => {
switch (itemType) {
case LibraryItem.ALBUM:
return ALBUM_CONTEXT_MENU_ITEMS;
case LibraryItem.ALBUM_ARTIST:
return ARTIST_CONTEXT_MENU_ITEMS;
case LibraryItem.SONG:
return SONG_CONTEXT_MENU_ITEMS;
default:
return [];
}
};
2023-05-19 22:33:15 -07:00
2023-07-01 19:10:05 -07:00
const handleRowDoubleClick = (e: RowDoubleClickedEvent<QueueSong>) => {
if (!e.data) return;
switch (itemType) {
case LibraryItem.ALBUM:
navigate(generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: e.data.id }));
break;
case LibraryItem.ALBUM_ARTIST:
navigate(
generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: e.data.id,
}),
);
break;
case LibraryItem.SONG:
handlePlayQueueAdd?.({
byItemType: {
id: [],
type: LibraryItem.SONG,
},
initialSongId: e.data.id,
2023-07-01 19:10:05 -07:00
playType: playButtonBehavior,
query: {
startIndex: 0,
...filter,
},
2023-07-01 19:10:05 -07:00
});
break;
}
};
2023-05-19 22:26:43 -07:00
2023-07-20 00:37:05 -07:00
const { rowClassRules } = useCurrentSongRowStyles({ tableRef });
const tableProps = useVirtualTable({
contextMenu: contextMenuItems(),
customFilters: filter,
2023-07-20 00:37:05 -07:00
itemType,
pageKey,
server,
tableRef,
});
2023-07-01 19:10:05 -07:00
return (
2023-07-20 00:37:05 -07:00
<VirtualGridAutoSizerContainer>
<VirtualTable
{...tableProps}
key={`table-${itemType}-${tableProps.rowHeight}-${server?.id}`}
ref={tableRef}
context={{
query: searchParams.get('query'),
}}
getRowId={(data) => data.data.id}
infiniteInitialRowCount={25}
rowClassRules={rowClassRules}
onRowDoubleClicked={handleRowDoubleClick}
/>
</VirtualGridAutoSizerContainer>
2023-07-01 19:10:05 -07:00
);
2023-05-19 22:26:43 -07:00
};