vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-08-07 12:53:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

upgrade and refactor for react-query v5

Browse Source
This commit is contained in:
jeffvli
2025-11-02 01:16:53 -07:00
parent dd70d30cd3
commit 8115963264
94 changed files with 1650 additions and 1750 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/playlists/api/playlists-api.ts
+57
View File
@@ -0,0 +1,57 @@
import { queryOptions } from '@tanstack/react-query';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { QueryHookArgs } from '/@/renderer/lib/react-query';
import { getServerById } from '/@/renderer/store';
import {
PlaylistDetailQuery,
PlaylistListQuery,
PlaylistSongListQuery,
} from '/@/shared/types/domain-types';
export const playlistsQueries = {
detail: (args: QueryHookArgs<PlaylistDetailQuery>) => {
return queryOptions({
queryFn: ({ signal }) => {
const server = getServerById(args.serverId);
if (!server) throw new Error('Server not found');
return api.controller.getPlaylistDetail({
apiClientProps: { server, signal },
query: args.query,
});
},
queryKey: queryKeys.playlists.detail(args.serverId || '', args.query.id, args.query),
...args.options,
});
},
list: (args: QueryHookArgs<PlaylistListQuery>) => {
return queryOptions({
gcTime: 1000 * 60 * 60,
queryFn: ({ signal }) => {
const server = getServerById(args.serverId);
if (!server) throw new Error('Server not found');
return api.controller.getPlaylistList({
apiClientProps: { server, signal },
query: args.query,
});
},
queryKey: queryKeys.playlists.list(args.serverId || '', args.query),
...args.options,
});
},
songList: (args: QueryHookArgs<PlaylistSongListQuery>) => {
return queryOptions({
queryFn: ({ signal }) => {
const server = getServerById(args.serverId);
if (!server) throw new Error('Server not found');
return api.controller.getPlaylistSongList({
apiClientProps: { server, signal },
query: args.query,
});
},
queryKey: queryKeys.playlists.songList(args.serverId || '', args.query.id),
...args.options,
});
},
};
src/renderer/features/playlists/components/add-to-playlist-context-modal.tsx
+39 -24
View File
@@ -1,5 +1,6 @@
import { useForm } from '@mantine/form';
import { closeModal, ContextModalProps } from '@mantine/modals';
import { useQuery } from '@tanstack/react-query';
import { memo, useCallback, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
@@ -8,8 +9,8 @@ import styles from './add-to-playlist-context-modal.module.css';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { getGenreSongsById } from '/@/renderer/features/player';
import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
import { useAddToPlaylist } from '/@/renderer/features/playlists/mutations/add-to-playlist-mutation';
import { usePlaylistList } from '/@/renderer/features/playlists/queries/playlist-list-query';
import { queryClient } from '/@/renderer/lib/react-query';
import { useCurrentServer } from '/@/renderer/store';
import { formatDurationString } from '/@/renderer/utils';
@@ -66,19 +67,21 @@ export const AddToPlaylistContextModal = ({
const addToPlaylistMutation = useAddToPlaylist({});
const playlistList = usePlaylistList({
query: {
_custom: {
navidrome: {
smart: false,
const playlistList = useQuery(
playlistsQueries.list({
query: {
_custom: {
navidrome: {
smart: false,
},
},
sortBy: PlaylistListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
sortBy: PlaylistListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId: server?.id,
});
serverId: server?.id,
}),
);
const [playlistSelect, playlistMap] = useMemo(() => {
const existingPlaylists = new Array<Playlist & { label: string; value: string }>();
@@ -113,9 +116,15 @@ export const AddToPlaylistContextModal = ({
const queryKey = queryKeys.songs.list(server?.id || '', query);
const songsRes = await queryClient.fetchQuery(queryKey, ({ signal }) => {
if (!server) throw new Error('No server');
return api.controller.getSongList({ apiClientProps: { server, signal }, query });
const songsRes = await queryClient.fetchQuery({
queryFn: ({ signal }) => {
if (!server) throw new Error('No server');
return api.controller.getSongList({
apiClientProps: { server, signal },
query,
});
},
queryKey,
});
return songsRes;
@@ -134,9 +143,15 @@ export const AddToPlaylistContextModal = ({
const queryKey = queryKeys.songs.list(server?.id || '', query);
const songsRes = await queryClient.fetchQuery(queryKey, ({ signal }) => {
if (!server) throw new Error('No server');
return api.controller.getSongList({ apiClientProps: { server, signal }, query });
const songsRes = await queryClient.fetchQuery({
queryFn: ({ signal }) => {
if (!server) throw new Error('No server');
return api.controller.getSongList({
apiClientProps: { server, signal },
query,
});
},
queryKey,
});
return songsRes;
@@ -213,9 +228,8 @@ export const AddToPlaylistContextModal = ({
if (values.skipDuplicates) {
const queryKey = queryKeys.playlists.songList(server?.id || '', playlistId);
const playlistSongsRes = await queryClient.fetchQuery(
queryKey,
({ signal }) => {
const playlistSongsRes = await queryClient.fetchQuery({
queryFn: ({ signal }) => {
if (!server)
throw new Error(
t('error.serverNotSelectedError', {
@@ -232,7 +246,8 @@ export const AddToPlaylistContextModal = ({
},
});
},
);
queryKey,
});
const playlistSongIds = playlistSongsRes?.items?.map((song) => song.id);
@@ -508,7 +523,7 @@ export const AddToPlaylistContextModal = ({
/>
<Group justify="flex-end">
<ModalButton
disabled={isLoading || addToPlaylistMutation.isLoading}
disabled={isLoading || addToPlaylistMutation.isPending}
onClick={() => closeModal(id)}
uppercase
variant="subtle"
@@ -518,7 +533,7 @@ export const AddToPlaylistContextModal = ({
<ModalButton
disabled={
isLoading ||
addToPlaylistMutation.isLoading ||
addToPlaylistMutation.isPending ||
(form.values.selectedPlaylistIds.length === 0 &&
form.values.newPlaylists.length === 0)
}
src/renderer/features/playlists/components/create-playlist-form.tsx
+2 -2
View File
@@ -95,7 +95,7 @@ export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => {
});
const isPublicDisplayed = hasFeature(server, ServerFeature.PUBLIC_PLAYLIST);
const isSubmitDisabled = !form.values.name || mutation.isLoading;
const isSubmitDisabled = !form.values.name || mutation.isPending;
return (
<form onSubmit={handleSubmit}>
@@ -160,7 +160,7 @@ export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => {
</ModalButton>
<ModalButton
disabled={isSubmitDisabled}
loading={mutation.isLoading}
loading={mutation.isPending}
type="submit"
variant="filled"
>
src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx
+5 -3
View File
@@ -8,7 +8,7 @@ import type {
} from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useQueryClient } from '@tanstack/react-query';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import debounce from 'lodash/debounce';
import { AnimatePresence } from 'motion/react';
import { MutableRefObject, useCallback, useMemo } from 'react';
@@ -25,7 +25,7 @@ import {
SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
} from '/@/renderer/features/context-menu/context-menu-items';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
import { useAppFocus } from '/@/renderer/hooks';
import {
useCurrentServer,
@@ -70,7 +70,9 @@ export const PlaylistDetailSongListContent = ({ songs, tableRef }: PlaylistDetai
};
}, [page?.table.id, playlistId]);
const detailQuery = usePlaylistDetail({ query: { id: playlistId }, serverId: server?.id });
const detailQuery = useQuery(
playlistsQueries.detail({ query: { id: playlistId }, serverId: server?.id }),
);
const p = usePlaylistDetailTablePagination(playlistId);
const pagination = {
src/renderer/features/playlists/components/playlist-detail-song-list-header-filters.tsx
+8 -4
View File
@@ -1,7 +1,7 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { closeAllModals, openModal } from '@mantine/modals';
import { useQueryClient } from '@tanstack/react-query';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import debounce from 'lodash/debounce';
import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@@ -10,9 +10,9 @@ import { useNavigate, useParams } from 'react-router';
import i18n from '/@/i18n/i18n';
import { queryKeys } from '/@/renderer/api/query-keys';
import { SONG_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
import { openUpdatePlaylistModal } from '/@/renderer/features/playlists/components/update-playlist-form';
import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
import { OrderToggleButton } from '/@/renderer/features/shared';
import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
import { MoreButton } from '/@/renderer/features/shared/components/more-button';
@@ -262,7 +262,9 @@ export const PlaylistDetailSongListHeaderFilters = ({
const sortBy = page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID;
const sortOrder = page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC;
const detailQuery = usePlaylistDetail({ query: { id: playlistId }, serverId: server?.id });
const detailQuery = useQuery(
playlistsQueries.detail({ query: { id: playlistId }, serverId: server?.id }),
);
const isSmartPlaylist = detailQuery.data?.rules;
const cq = useContainerQuery();
@@ -291,7 +293,9 @@ export const PlaylistDetailSongListHeaderFilters = ({
}, [tableRef, page.display, setPagination]);
const handleRefresh = () => {
queryClient.invalidateQueries(queryKeys.playlists.songList(server?.id || '', playlistId));
queryClient.invalidateQueries({
queryKey: queryKeys.playlists.songList(server?.id || '', playlistId),
});
handleFilterChange();
};
src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
+27 -3
View File
@@ -1,19 +1,27 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useQuery } from '@tanstack/react-query';
import { MutableRefObject } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router';
import { PageHeader } from '/@/renderer/components/page-header/page-header';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
import { PlaylistDetailSongListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-detail-song-list-header-filters';
import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
import { useCurrentServer } from '/@/renderer/store';
import { useCurrentServer, usePlaylistDetailStore } from '/@/renderer/store';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { formatDurationString } from '/@/renderer/utils';
import { Badge } from '/@/shared/components/badge/badge';
import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
import { Stack } from '/@/shared/components/stack/stack';
import {
LibraryItem,
PlaylistSongListQueryClientSide,
SongListSort,
SortOrder,
} from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
interface PlaylistDetailHeaderProps {
@@ -33,7 +41,23 @@ export const PlaylistDetailSongListHeader = ({
const { t } = useTranslation();
const { playlistId } = useParams() as { playlistId: string };
const server = useCurrentServer();
const detailQuery = usePlaylistDetail({ query: { id: playlistId }, serverId: server?.id });
const detailQuery = useQuery(
playlistsQueries.detail({ query: { id: playlistId }, serverId: server?.id }),
);
const handlePlayQueueAdd = usePlayQueueAdd();
const page = usePlaylistDetailStore();
const filters: Partial<PlaylistSongListQueryClientSide> = {
sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
};
const handlePlay = async (playType: Play) => {
handlePlayQueueAdd?.({
byItemType: { id: [playlistId], type: LibraryItem.PLAYLIST },
playType,
query: filters,
});
};
const playButtonBehavior = usePlayButtonBehavior();
src/renderer/features/playlists/components/playlist-list-grid-view.tsx
+11 -9
View File
@@ -121,15 +121,17 @@ export const PlaylistListGridView = ({ gridRef, itemCount }: PlaylistListGridVie
const queryKey = queryKeys.playlists.list(server?.id || '', query);
const playlists = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
controller.getPlaylistList({
apiClientProps: {
server,
signal,
},
query,
}),
);
const playlists = await queryClient.fetchQuery({
queryFn: async ({ signal }) =>
controller.getPlaylistList({
apiClientProps: {
server,
signal,
},
query,
}),
queryKey,
});
return playlists;
},
src/renderer/features/playlists/components/playlist-list-header-filters.tsx
+18 -14
View File
@@ -170,15 +170,17 @@ export const PlaylistListHeaderFilters = ({
const queryKey = queryKeys.playlists.list(server?.id || '', query);
const playlists = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
api.controller.getPlaylistList({
apiClientProps: {
server,
signal,
},
query,
}),
);
const playlists = await queryClient.fetchQuery({
queryFn: async ({ signal }) =>
api.controller.getPlaylistList({
apiClientProps: {
server,
signal,
},
query,
}),
queryKey,
});
return playlists;
},
@@ -207,9 +209,8 @@ export const PlaylistListHeaderFilters = ({
...pageFilters,
});
const playlistsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
const playlistsRes = await queryClient.fetchQuery({
queryFn: async ({ signal }) =>
api.controller.getPlaylistList({
apiClientProps: {
server,
@@ -221,7 +222,8 @@ export const PlaylistListHeaderFilters = ({
...pageFilters,
},
}),
);
queryKey,
});
params.successCallback(
playlistsRes?.items || [],
@@ -338,7 +340,9 @@ export const PlaylistListHeaderFilters = ({
};
const handleRefresh = () => {
queryClient.invalidateQueries(queryKeys.playlists.list(server?.id || '', filter));
queryClient.invalidateQueries({
queryKey: queryKeys.playlists.list(server?.id || '', filter),
});
handleFilterChange(filter);
};
src/renderer/features/playlists/components/playlist-query-builder.tsx
+8 -5
View File
@@ -1,5 +1,6 @@
import { useForm } from '@mantine/form';
import { openModal } from '@mantine/modals';
import { useQuery } from '@tanstack/react-query';
import clone from 'lodash/clone';
import get from 'lodash/get';
import setWith from 'lodash/setWith';
@@ -8,7 +9,7 @@ import { forwardRef, Ref, useImperativeHandle, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { QueryBuilder } from '/@/renderer/components/query-builder';
import { usePlaylistList } from '/@/renderer/features/playlists/queries/playlist-list-query';
import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
import {
convertNDQueryToQueryGroup,
convertQueryGroupToNDQuery,
@@ -108,10 +109,12 @@ export const PlaylistQueryBuilder = forwardRef(
query ? convertNDQueryToQueryGroup(query) : DEFAULT_QUERY,
);
const { data: playlists } = usePlaylistList({
query: { sortBy: PlaylistListSort.NAME, sortOrder: SortOrder.ASC, startIndex: 0 },
serverId: server?.id,
});
const { data: playlists } = useQuery(
playlistsQueries.list({
query: { sortBy: PlaylistListSort.NAME, sortOrder: SortOrder.ASC, startIndex: 0 },
serverId: server?.id,
}),
);
const playlistData = useMemo(() => {
if (!playlists) return [];
src/renderer/features/playlists/components/save-as-playlist-form.tsx
+2 -2
View File
@@ -70,7 +70,7 @@ export const SaveAsPlaylistForm = ({
});
const isPublicDisplayed = hasFeature(server, ServerFeature.PUBLIC_PLAYLIST);
const isSubmitDisabled = !form.values.name || mutation.isLoading;
const isSubmitDisabled = !form.values.name || mutation.isPending;
return (
<form onSubmit={handleSubmit}>
@@ -106,7 +106,7 @@ export const SaveAsPlaylistForm = ({
<ModalButton onClick={onCancel}>{t('common.cancel')}</ModalButton>
<ModalButton
disabled={isSubmitDisabled}
loading={mutation.isLoading}
loading={mutation.isPending}
type="submit"
variant="filled"
>
src/renderer/features/playlists/components/update-playlist-form.tsx
+2 -2
View File
@@ -88,7 +88,7 @@ export const UpdatePlaylistForm = ({ body, onCancel, query, users }: UpdatePlayl
const isPublicDisplayed = hasFeature(server, ServerFeature.PUBLIC_PLAYLIST);
const isOwnerDisplayed = server?.type === ServerType.NAVIDROME && userList;
const isSubmitDisabled = !form.values.name || mutation.isLoading;
const isSubmitDisabled = !form.values.name || mutation.isPending;
return (
<form onSubmit={handleSubmit}>
@@ -143,7 +143,7 @@ export const UpdatePlaylistForm = ({ body, onCancel, query, users }: UpdatePlayl
<ModalButton onClick={onCancel}>{t('common.cancel')}</ModalButton>
<ModalButton
disabled={isSubmitDisabled}
loading={mutation.isLoading}
loading={mutation.isPending}
type="submit"
variant="filled"
>
src/renderer/features/playlists/mutations/add-to-playlist-mutation.ts
+10 -5
View File
@@ -27,11 +27,16 @@ export const useAddToPlaylist = (args: MutationHookArgs) => {
if (!serverId) return;
queryClient.invalidateQueries(queryKeys.playlists.list(serverId), { exact: false });
queryClient.invalidateQueries(queryKeys.playlists.detail(serverId, variables.query.id));
queryClient.invalidateQueries(
queryKeys.playlists.songList(serverId, variables.query.id),
);
queryClient.invalidateQueries({
exact: false,
queryKey: queryKeys.playlists.list(serverId),
});
queryClient.invalidateQueries({
queryKey: queryKeys.playlists.detail(serverId, variables.query.id),
});
queryClient.invalidateQueries({
queryKey: queryKeys.playlists.songList(serverId, variables.query.id),
});
},
...options,
});
src/renderer/features/playlists/mutations/create-playlist-mutation.ts
+4 -1
View File
@@ -25,7 +25,10 @@ export const useCreatePlaylist = (args: MutationHookArgs) => {
onSuccess: (_args, variables) => {
const server = getServerById(variables.serverId);
if (server) {
queryClient.invalidateQueries(queryKeys.playlists.list(server.id));
queryClient.invalidateQueries({
exact: false,
queryKey: queryKeys.playlists.list(server.id),
});
}
},
...options,
src/renderer/features/playlists/mutations/delete-playlist-mutation.ts
+5 -2
View File
@@ -24,11 +24,14 @@ export const useDeletePlaylist = (args: MutationHookArgs) => {
return api.controller.deletePlaylist({ ...args, apiClientProps: { server } });
},
onMutate: () => {
queryClient.cancelQueries(queryKeys.playlists.list(server?.id || ''));
queryClient.cancelQueries({ queryKey: queryKeys.playlists.list(server?.id || '') });
return null;
},
onSuccess: () => {
queryClient.invalidateQueries(queryKeys.playlists.list(server?.id || ''));
queryClient.invalidateQueries({
exact: false,
queryKey: queryKeys.playlists.list(server?.id || ''),
});
},
...options,
});
src/renderer/features/playlists/mutations/remove-from-playlist-mutation.ts
+9 -5
View File
@@ -26,11 +26,15 @@ export const useRemoveFromPlaylist = (options?: MutationOptions) => {
if (!serverId) return;
queryClient.invalidateQueries(queryKeys.playlists.list(serverId), { exact: false });
queryClient.invalidateQueries(queryKeys.playlists.detail(serverId, variables.query.id));
queryClient.invalidateQueries(
queryKeys.playlists.songList(serverId, variables.query.id),
);
queryClient.invalidateQueries({
queryKey: queryKeys.playlists.list(serverId),
});
queryClient.invalidateQueries({
queryKey: queryKeys.playlists.detail(serverId, variables.query.id),
});
queryClient.invalidateQueries({
queryKey: queryKeys.playlists.songList(serverId, variables.query.id),
});
},
...options,
});
src/renderer/features/playlists/mutations/update-playlist-mutation.ts
+6 -2
View File
@@ -27,10 +27,14 @@ export const useUpdatePlaylist = (args: MutationHookArgs) => {
if (!serverId) return;
queryClient.invalidateQueries(queryKeys.playlists.list(serverId));
queryClient.invalidateQueries({
queryKey: queryKeys.playlists.list(serverId),
});
if (query?.id) {
queryClient.invalidateQueries(queryKeys.playlists.detail(serverId, query.id));
queryClient.invalidateQueries({
queryKey: queryKeys.playlists.detail(serverId, query.id),
});
}
},
...options,
src/renderer/features/playlists/queries/playlist-detail-query.ts
-23
View File
@@ -1,23 +0,0 @@
import type { QueryHookArgs } from '/@/renderer/lib/react-query';
import type { PlaylistDetailQuery } from '/@/shared/types/domain-types';
import { useQuery } from '@tanstack/react-query';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { getServerById } from '/@/renderer/store';
export const usePlaylistDetail = (args: QueryHookArgs<PlaylistDetailQuery>) => {
const { options, query, serverId } = args || {};
const server = getServerById(serverId);
return useQuery({
enabled: !!server?.id,
queryFn: ({ signal }) => {
if (!server) throw new Error('Server not found');
return api.controller.getPlaylistDetail({ apiClientProps: { server, signal }, query });
},
queryKey: queryKeys.playlists.detail(server?.id || '', query.id, query),
...options,
});
};
src/renderer/features/playlists/queries/playlist-list-query.ts
-28
View File
@@ -1,28 +0,0 @@
import type { QueryOptions } from '/@/renderer/lib/react-query';
import type { PlaylistListQuery } from '/@/shared/types/domain-types';
import { useQuery } from '@tanstack/react-query';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { getServerById } from '/@/renderer/store';
export const usePlaylistList = (args: {
options?: QueryOptions;
query: PlaylistListQuery;
serverId?: string;
}) => {
const { options, query, serverId } = args;
const server = getServerById(serverId);
return useQuery({
cacheTime: 1000 * 60 * 60,
enabled: !!server?.id,
queryFn: ({ signal }) => {
if (!server) throw new Error('Server not found');
return api.controller.getPlaylistList({ apiClientProps: { server, signal }, query });
},
queryKey: queryKeys.playlists.list(server?.id || '', query),
...options,
});
};
src/renderer/features/playlists/queries/playlist-song-list-query.ts
-26
View File
@@ -1,26 +0,0 @@
import type { QueryHookArgs } from '/@/renderer/lib/react-query';
import type { PlaylistSongListQuery } from '/@/shared/types/domain-types';
import { useQuery } from '@tanstack/react-query';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { getServerById } from '/@/renderer/store';
export const usePlaylistSongList = (args: QueryHookArgs<PlaylistSongListQuery>) => {
const { options, query, serverId } = args || {};
const server = getServerById(serverId);
return useQuery({
enabled: !!server,
queryFn: ({ signal }) => {
if (!server) throw new Error('Server not found');
return api.controller.getPlaylistSongList({
apiClientProps: { server, signal },
query,
});
},
queryKey: queryKeys.playlists.songList(server?.id || '', query.id),
...options,
});
};
src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
+14 -9
View File
@@ -1,20 +1,21 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { closeAllModals, openModal } from '@mantine/modals';
import { useQuery } from '@tanstack/react-query';
import Fuse from 'fuse.js';
import { motion } from 'motion/react';
import { useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { generatePath, useNavigate, useParams } from 'react-router';
import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add';
import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
import { PlaylistDetailSongListContent } from '/@/renderer/features/playlists/components/playlist-detail-song-list-content';
import { PlaylistDetailSongListHeader } from '/@/renderer/features/playlists/components/playlist-detail-song-list-header';
import { PlaylistQueryBuilder } from '/@/renderer/features/playlists/components/playlist-query-builder';
import { SaveAsPlaylistForm } from '/@/renderer/features/playlists/components/save-as-playlist-form';
import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation';
import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
import { usePlaylistSongList } from '/@/renderer/features/playlists/queries/playlist-song-list-query';
import { AnimatedPage } from '/@/renderer/features/shared';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer, usePlaylistDetailStore } from '/@/renderer/store';
@@ -35,7 +36,9 @@ const PlaylistDetailSongListRoute = () => {
const server = useCurrentServer();
const handlePlayQueueAdd = useHandlePlayQueueAdd();
const detailQuery = usePlaylistDetail({ query: { id: playlistId }, serverId: server?.id });
const detailQuery = useQuery(
playlistsQueries.detail({ query: { id: playlistId }, serverId: server?.id }),
);
const createPlaylistMutation = useCreatePlaylist({});
const deletePlaylistMutation = useDeletePlaylist({});
@@ -148,12 +151,14 @@ const PlaylistDetailSongListRoute = () => {
const page = usePlaylistDetailStore();
const playlistSongs = usePlaylistSongList({
query: {
id: playlistId,
},
serverId: server?.id,
});
const playlistSongs = useQuery(
playlistsQueries.songList({
query: {
id: playlistId,
},
serverId: server?.id,
}),
);
const filterSortedSongs = useMemo(() => {
let items = playlistSongs.data?.items;
src/renderer/features/playlists/routes/playlist-list-route.tsx
+17 -15
View File
@@ -1,13 +1,14 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useQuery } from '@tanstack/react-query';
import { useMemo, useRef } from 'react';
import { useParams } from 'react-router';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { ListContext } from '/@/renderer/context/list-context';
import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
import { PlaylistListContent } from '/@/renderer/features/playlists/components/playlist-list-content';
import { PlaylistListHeader } from '/@/renderer/features/playlists/components/playlist-list-header';
import { usePlaylistList } from '/@/renderer/features/playlists/queries/playlist-list-query';
import { AnimatedPage } from '/@/renderer/features/shared';
import { useCurrentServer, useListStoreByKey } from '/@/renderer/store';
import { PlaylistListSort, PlaylistSongListQuery, SortOrder } from '/@/shared/types/domain-types';
@@ -20,20 +21,21 @@ const PlaylistListRoute = () => {
const pageKey = 'playlist';
const { filter } = useListStoreByKey<PlaylistSongListQuery>({ key: pageKey });
const itemCountCheck = usePlaylistList({
options: {
cacheTime: 1000 * 60 * 60 * 2,
staleTime: 1000 * 60 * 60 * 2,
},
query: {
...filter,
limit: 1,
sortBy: PlaylistListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId: server?.id,
});
const itemCountCheck = useQuery(
playlistsQueries.list({
options: {
gcTime: 1000 * 60 * 60 * 2,
},
query: {
...filter,
limit: 1,
sortBy: PlaylistListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId: server?.id,
}),
);
const itemCount =
itemCountCheck.data?.totalRecordCount === null