antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-03 03:11:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

100
src/renderer/features/artists/components/album-artist-detail-content.tsx
View file

@ -1,4 +1,5 @@
import { ColDef, RowDoubleClickedEvent } from '@ag-grid-community/core';
import { useQuery } from '@tanstack/react-query';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { generatePath, useParams } from 'react-router';
@ -8,9 +9,8 @@ import styles from './album-artist-detail-content.module.css';
import { MemoizedSwiperGridCarousel } from '/@/renderer/components/grid-carousel/grid-carousel';
import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table';
import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query';
import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
import { useTopSongsList } from '/@/renderer/features/artists/queries/top-songs-list-query';
import { albumQueries } from '/@/renderer/features/albums/api/album-api';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import {
useHandleGeneralContextMenu,
useHandleTableContextMenu,
@ -75,10 +75,12 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
return [enabled, order];
}, [artistItems]);
const detailQuery = useAlbumArtistDetail({
query: { id: routeId },
serverId: server?.id,
});
const detailQuery = useQuery(
artistsQueries.albumArtistDetail({
query: { id: routeId },
serverId: server?.id,
}),
);
const artistDiscographyLink = `${generatePath(
AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY,
@ -97,46 +99,52 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
artistName: detailQuery?.data?.name || '',
})}`;
const recentAlbumsQuery = useAlbumList({
options: {
enabled: enabledItem.recentAlbums,
},
query: {
artistIds: [routeId],
compilation: false,
limit: 15,
sortBy: AlbumListSort.RELEASE_DATE,
sortOrder: SortOrder.DESC,
startIndex: 0,
},
serverId: server?.id,
});
const recentAlbumsQuery = useQuery(
albumQueries.list({
options: {
enabled: enabledItem.recentAlbums,
},
query: {
artistIds: [routeId],
compilation: false,
limit: 15,
sortBy: AlbumListSort.RELEASE_DATE,
sortOrder: SortOrder.DESC,
startIndex: 0,
},
serverId: server?.id,
}),
);
const compilationAlbumsQuery = useAlbumList({
options: {
enabled: enabledItem.compilations && server?.type !== ServerType.SUBSONIC,
},
query: {
artistIds: [routeId],
compilation: true,
limit: 15,
sortBy: AlbumListSort.RELEASE_DATE,
sortOrder: SortOrder.DESC,
startIndex: 0,
},
serverId: server?.id,
});
const compilationAlbumsQuery = useQuery(
albumQueries.list({
options: {
enabled: enabledItem.compilations && server?.type !== ServerType.SUBSONIC,
},
query: {
artistIds: [routeId],
compilation: true,
limit: 15,
sortBy: AlbumListSort.RELEASE_DATE,
sortOrder: SortOrder.DESC,
startIndex: 0,
},
serverId: server?.id,
}),
);
const topSongsQuery = useTopSongsList({
options: {
enabled: !!detailQuery?.data?.name && enabledItem.topSongs,
},
query: {
artist: detailQuery?.data?.name || '',
artistId: routeId,
},
serverId: server?.id,
});
const topSongsQuery = useQuery(
artistsQueries.topSongs({
options: {
enabled: !!detailQuery?.data?.name && enabledItem.topSongs,
},
query: {
artist: detailQuery?.data?.name || '',
artistId: routeId,
},
serverId: server?.id,
}),
);
const topSongsColumnDefs: ColDef[] = useMemo(
() =>
@ -364,7 +372,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
fill: detailQuery?.data?.userFavorite ? 'primary' : undefined,
}}
loading={
createFavoriteMutation.isLoading || deleteFavoriteMutation.isLoading
createFavoriteMutation.isPending || deleteFavoriteMutation.isPending
}
onClick={handleFavorite}
size="lg"

15
src/renderer/features/artists/components/album-artist-detail-header.tsx
View file

@ -1,8 +1,9 @@
import { useQuery } from '@tanstack/react-query';
import { forwardRef, Fragment, Ref } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router';
import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { LibraryHeader, useSetRating } from '/@/renderer/features/shared';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer } from '/@/renderer/store';
@ -30,10 +31,12 @@ export const AlbumArtistDetailHeader = forwardRef(
const routeId = (artistId || albumArtistId) as string;
const server = useCurrentServer();
const { t } = useTranslation();
const detailQuery = useAlbumArtistDetail({
query: { id: routeId },
serverId: server?.id,
});
const detailQuery = useQuery(
artistsQueries.albumArtistDetail({
query: { id: routeId },
serverId: server?.id,
}),
);
const albumCount = detailQuery?.data?.albumCount;
const songCount = detailQuery?.data?.songCount;
@ -101,7 +104,7 @@ export const AlbumArtistDetailHeader = forwardRef(
<Rating
onChange={handleUpdateRating}
readOnly={
detailQuery?.isFetching || updateRatingMutation.isLoading
detailQuery?.isFetching || updateRatingMutation.isPending
}
value={detailQuery?.data?.userRating || 0}
/>

10
src/renderer/features/artists/components/album-artist-list-grid-view.tsx
View file

@ -83,9 +83,9 @@ export const AlbumArtistListGridView = ({ gridRef, itemCount }: AlbumArtistListG
const queryKey = queryKeys.albumArtists.list(server?.id || '', query);
const albumArtistsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
const albumArtistsRes = await queryClient.fetchQuery({
gcTime: 1000 * 60 * 1,
queryFn: async ({ signal }) =>
api.controller.getAlbumArtistList({
apiClientProps: {
server,
@ -93,8 +93,8 @@ export const AlbumArtistListGridView = ({ gridRef, itemCount }: AlbumArtistListG
},
query,
}),
{ cacheTime: 1000 * 60 * 1 },
);
queryKey,
});
return albumArtistsRes;
},

30
src/renderer/features/artists/components/album-artist-list-header-filters.tsx
View file

@ -1,7 +1,7 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { IDatasource } from '@ag-grid-community/core';
import { useQueryClient } from '@tanstack/react-query';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import debounce from 'lodash/debounce';
import { MouseEvent, MutableRefObject, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@ -12,7 +12,7 @@ import { queryKeys } from '/@/renderer/api/query-keys';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { ALBUMARTIST_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
import { useListContext } from '/@/renderer/context/list-context';
import { OrderToggleButton, useMusicFolders } from '/@/renderer/features/shared';
import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
import { FolderButton } from '/@/renderer/features/shared/components/folder-button';
import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
import { MoreButton } from '/@/renderer/features/shared/components/more-button';
@ -146,7 +146,9 @@ export const AlbumArtistListHeaderFilters = ({
const cq = useContainerQuery();
const isGrid = display === ListDisplayType.CARD || display === ListDisplayType.GRID;
const musicFoldersQuery = useMusicFolders({ query: null, serverId: server?.id });
const musicFoldersQuery = useQuery(
sharedQueries.musicFolders({ query: null, serverId: server?.id }),
);
const sortByLabel =
(server?.type &&
@ -176,9 +178,9 @@ export const AlbumArtistListHeaderFilters = ({
...filters,
});
const albums = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
const albums = await queryClient.fetchQuery({
gcTime: 1000 * 60 * 1,
queryFn: async ({ signal }) =>
api.controller.getAlbumArtistList({
apiClientProps: {
server,
@ -190,8 +192,8 @@ export const AlbumArtistListHeaderFilters = ({
...filters,
},
}),
{ cacheTime: 1000 * 60 * 1 },
);
queryKey,
});
return albums;
},
@ -212,9 +214,9 @@ export const AlbumArtistListHeaderFilters = ({
...filters,
});
const albumArtistsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
const albumArtistsRes = await queryClient.fetchQuery({
gcTime: 1000 * 60 * 1,
queryFn: async ({ signal }) =>
api.controller.getAlbumArtistList({
apiClientProps: {
server,
@ -226,8 +228,8 @@ export const AlbumArtistListHeaderFilters = ({
...filters,
},
}),
{ cacheTime: 1000 * 60 * 1 },
);
queryKey,
});
params.successCallback(
albumArtistsRes?.items || [],
@ -362,7 +364,7 @@ export const AlbumArtistListHeaderFilters = ({
};
const handleRefresh = useCallback(() => {
queryClient.invalidateQueries(queryKeys.albumArtists.list(server?.id || ''));
queryClient.invalidateQueries({ queryKey: queryKeys.albumArtists.list(server?.id || '') });
handleFilterChange(filter);
}, [filter, handleFilterChange, queryClient, server?.id]);

10
src/renderer/features/artists/components/artist-list-grid-view.tsx
View file

@ -84,9 +84,9 @@ export const ArtistListGridView = ({ gridRef, itemCount }: ArtistListGridViewPro
const queryKey = queryKeys.artists.list(server?.id || '', query);
const artistsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
const artistsRes = await queryClient.fetchQuery({
gcTime: 1000 * 60 * 1,
queryFn: async ({ signal }) =>
api.controller.getArtistList({
apiClientProps: {
server,
@ -94,8 +94,8 @@ export const ArtistListGridView = ({ gridRef, itemCount }: ArtistListGridViewPro
},
query,
}),
{ cacheTime: 1000 * 60 * 1 },
);
queryKey,
});
return artistsRes;
},

50
src/renderer/features/artists/components/artist-list-header-filters.tsx
View file

@ -1,7 +1,7 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { IDatasource } from '@ag-grid-community/core';
import { useQueryClient } from '@tanstack/react-query';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import debounce from 'lodash/debounce';
import { MouseEvent, MutableRefObject, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -12,8 +12,8 @@ import { queryKeys } from '/@/renderer/api/query-keys';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { ALBUMARTIST_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
import { useListContext } from '/@/renderer/context/list-context';
import { useRoles } from '/@/renderer/features/artists/queries/roles-query';
import { OrderToggleButton, useMusicFolders } from '/@/renderer/features/shared';
import { OrderToggleButton } from '/@/renderer/features/shared';
import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
import { MoreButton } from '/@/renderer/features/shared/components/more-button';
import { RefreshButton } from '/@/renderer/features/shared/components/refresh-button';
@ -142,17 +142,21 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
const { setDisplayType, setFilter, setGrid, setTable, setTablePagination } =
useListStoreActions();
const cq = useContainerQuery();
const roles = useRoles({
options: {
cacheTime: 1000 * 60 * 60 * 2,
staleTime: 1000 * 60 * 60 * 2,
},
query: {},
serverId: server?.id,
});
const roles = useQuery(
sharedQueries.roles({
options: {
gcTime: 1000 * 60 * 60 * 2,
staleTime: 1000 * 60 * 60 * 2,
},
query: {},
serverId: server?.id,
}),
);
const isGrid = display === ListDisplayType.CARD || display === ListDisplayType.GRID;
const musicFoldersQuery = useMusicFolders({ query: null, serverId: server?.id });
const musicFoldersQuery = useQuery(
sharedQueries.musicFolders({ query: null, serverId: server?.id }),
);
const sortByLabel =
(server?.type &&
@ -182,9 +186,9 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
...filters,
});
const albums = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
const albums = await queryClient.fetchQuery({
gcTime: 1000 * 60 * 1,
queryFn: async ({ signal }) =>
api.controller.getArtistList({
apiClientProps: {
server,
@ -196,8 +200,8 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
...filters,
},
}),
{ cacheTime: 1000 * 60 * 1 },
);
queryKey,
});
return albums;
},
@ -218,9 +222,9 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
...filters,
});
const artistsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
const artistsRes = await queryClient.fetchQuery({
gcTime: 1000 * 60 * 1,
queryFn: async ({ signal }) =>
api.controller.getArtistList({
apiClientProps: {
server,
@ -232,8 +236,8 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
...filters,
},
}),
{ cacheTime: 1000 * 60 * 1 },
);
queryKey,
});
params.successCallback(
artistsRes?.items || [],
@ -368,7 +372,7 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
};
const handleRefresh = useCallback(() => {
queryClient.invalidateQueries(queryKeys.artists.list(server?.id || ''));
queryClient.invalidateQueries({ queryKey: queryKeys.artists.list(server?.id || '') });
handleFilterChange(filter);
}, [filter, handleFilterChange, queryClient, server?.id]);