From 31d9ab048d77355234a5347706bcd8c786cc53f7 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Sun, 16 Nov 2025 01:10:40 -0800 Subject: [PATCH] fix container ref instances --- .../grid-carousel/grid-carousel-v2.tsx | 4 +- .../components/album-detail-content.tsx | 6 +- .../albums/components/album-detail-header.tsx | 262 +++++++++--------- .../components/album-list-header-filters.tsx | 5 +- .../routes/dummy-album-detail-route.tsx | 4 +- .../album-artist-detail-content.tsx | 6 +- .../album-artist-list-header-filters.tsx | 4 +- .../components/artist-list-header-filters.tsx | 4 +- .../components/genre-list-header-filters.tsx | 4 +- ...aylist-detail-song-list-header-filters.tsx | 4 +- .../playlist-list-header-filters.tsx | 4 +- .../search/components/search-header.tsx | 4 +- .../settings/components/settings-header.tsx | 4 +- .../sidebar/components/action-bar.tsx | 4 +- 14 files changed, 155 insertions(+), 164 deletions(-) diff --git a/src/renderer/components/grid-carousel/grid-carousel-v2.tsx b/src/renderer/components/grid-carousel/grid-carousel-v2.tsx index 72f63566e..ac0a6f79a 100644 --- a/src/renderer/components/grid-carousel/grid-carousel-v2.tsx +++ b/src/renderer/components/grid-carousel/grid-carousel-v2.tsx @@ -44,7 +44,7 @@ const pageVariants: Variants = { export function GridCarousel(props: GridCarouselProps) { const { cards, hasNextPage, loadNextPage, onNextPage, onPrevPage, rowCount = 1, title } = props; - const cq = useContainerQuery({ + const { ref, ...cq } = useContainerQuery({ lg: 900, md: 600, sm: 360, @@ -120,7 +120,7 @@ export function GridCarousel(props: GridCarouselProps) { }, [handleNextPage, handlePrevPage, isNextDisabled, isPrevDisabled, x]); return ( -
+
{cq.isCalculated && ( <>
diff --git a/src/renderer/features/albums/components/album-detail-content.tsx b/src/renderer/features/albums/components/album-detail-content.tsx index 5fce0ef9c..50ef03c13 100644 --- a/src/renderer/features/albums/components/album-detail-content.tsx +++ b/src/renderer/features/albums/components/album-detail-content.tsx @@ -39,7 +39,7 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => { albumQueries.detail({ query: { id: albumId }, serverId: server.id }), ); - const cq = useContainerQuery(); + const { ref, ...cq } = useContainerQuery(); const { externalLinks, lastFM, musicBrainz } = useGeneralSettings(); const genreRoute = useGenreRoute(); @@ -96,7 +96,7 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => { const mbzId = detailQuery?.data?.mbzId; return ( -
+
@@ -198,7 +198,7 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
)} - + {cq.height || cq.width ? ( <> {carousels diff --git a/src/renderer/features/albums/components/album-detail-header.tsx b/src/renderer/features/albums/components/album-detail-header.tsx index 7641e8d44..fb541a5ef 100644 --- a/src/renderer/features/albums/components/album-detail-header.tsx +++ b/src/renderer/features/albums/components/album-detail-header.tsx @@ -1,12 +1,11 @@ import { useQuery } from '@tanstack/react-query'; -import { forwardRef, Ref, useMemo } from 'react'; +import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { generatePath, Link, useParams } from 'react-router'; import { albumQueries } from '/@/renderer/features/albums/api/album-api'; import { LibraryHeader } from '/@/renderer/features/shared/components/library-header'; import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation'; -import { useContainerQuery } from '/@/renderer/hooks'; import { AppRoute } from '/@/renderer/router/routes'; import { useCurrentServer } from '/@/renderer/store'; import { formatDateAbsoluteUTC, formatDurationString, titleCase } from '/@/renderer/utils'; @@ -26,144 +25,139 @@ interface AlbumDetailHeaderProps { }; } -export const AlbumDetailHeader = forwardRef( - ({ background }: AlbumDetailHeaderProps, ref: Ref) => { - const { albumId } = useParams() as { albumId: string }; - const server = useCurrentServer(); - const detailQuery = useQuery( - albumQueries.detail({ query: { id: albumId }, serverId: server?.id }), - ); - const cq = useContainerQuery(); - const { t } = useTranslation(); +export const AlbumDetailHeader = ({ background }: AlbumDetailHeaderProps) => { + const { albumId } = useParams() as { albumId: string }; + const server = useCurrentServer(); + const detailQuery = useQuery( + albumQueries.detail({ query: { id: albumId }, serverId: server?.id }), + ); + const { t } = useTranslation(); - const showRating = - detailQuery?.data?._serverType === ServerType.NAVIDROME || - detailQuery?.data?._serverType === ServerType.SUBSONIC; + const showRating = + detailQuery?.data?._serverType === ServerType.NAVIDROME || + detailQuery?.data?._serverType === ServerType.SUBSONIC; - const originalDifferentFromRelease = - detailQuery.data?.originalDate && - detailQuery.data.originalDate !== detailQuery.data.releaseDate; + const originalDifferentFromRelease = + detailQuery.data?.originalDate && + detailQuery.data.originalDate !== detailQuery.data.releaseDate; - const releasePrefix = originalDifferentFromRelease - ? t('page.albumDetail.released', { postProcess: 'sentenceCase' }) - : '♫'; + const releasePrefix = originalDifferentFromRelease + ? t('page.albumDetail.released', { postProcess: 'sentenceCase' }) + : '♫'; - const releaseTypes = useMemo( - () => - normalizeReleaseTypes(detailQuery.data?.releaseTypes ?? [], t).map((type) => ({ - id: type, - value: titleCase(type), - })) || [], - [detailQuery.data?.releaseTypes, t], - ); + const releaseTypes = useMemo( + () => + normalizeReleaseTypes(detailQuery.data?.releaseTypes ?? [], t).map((type) => ({ + id: type, + value: titleCase(type), + })) || [], + [detailQuery.data?.releaseTypes, t], + ); - const metadataItems = releaseTypes.concat([ - { - id: 'releaseDate', - value: - detailQuery?.data?.releaseDate && - `${releasePrefix} ${formatDateAbsoluteUTC(detailQuery?.data?.releaseDate)}`, - }, - { - id: 'songCount', - value: t('entity.trackWithCount', { - count: detailQuery?.data?.songCount as number, + const metadataItems = releaseTypes.concat([ + { + id: 'releaseDate', + value: + detailQuery?.data?.releaseDate && + `${releasePrefix} ${formatDateAbsoluteUTC(detailQuery?.data?.releaseDate)}`, + }, + { + id: 'songCount', + value: t('entity.trackWithCount', { + count: detailQuery?.data?.songCount as number, + }), + }, + { + id: 'duration', + value: detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration), + }, + { + id: 'playCount', + value: + typeof detailQuery?.data?.playCount === 'number' && + t('entity.play', { + count: detailQuery?.data?.playCount, }), + }, + { + id: 'version', + value: detailQuery.data?.version, + }, + ]); + + if (originalDifferentFromRelease) { + const formatted = `♫ ${formatDateAbsoluteUTC(detailQuery!.data!.originalDate)}`; + metadataItems.splice(0, 0, { + id: 'originalDate', + value: formatted, + }); + } + + const updateRatingMutation = useSetRating({}); + + const handleUpdateRating = (rating: number) => { + if (!detailQuery?.data) return; + + updateRatingMutation.mutate({ + apiClientProps: { serverId: detailQuery.data._serverId }, + query: { + id: [detailQuery.data.id], + rating, + type: LibraryItem.ALBUM, }, - { - id: 'duration', - value: - detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration), - }, - { - id: 'playCount', - value: - typeof detailQuery?.data?.playCount === 'number' && - t('entity.play', { - count: detailQuery?.data?.playCount, - }), - }, - { - id: 'version', - value: detailQuery.data?.version, - }, - ]); + }); + }; - if (originalDifferentFromRelease) { - const formatted = `♫ ${formatDateAbsoluteUTC(detailQuery!.data!.originalDate)}`; - metadataItems.splice(releaseTypes.length, 0, { - id: 'originalDate', - value: formatted, - }); - } - - const updateRatingMutation = useSetRating({}); - - const handleUpdateRating = (rating: number) => { - if (!detailQuery?.data) return; - - updateRatingMutation.mutate({ - apiClientProps: { serverId: detailQuery.data._serverId }, - query: { - id: [detailQuery.data.id], - rating, - type: LibraryItem.ALBUM, - }, - }); - }; - - return ( - - - - - {metadataItems.map( - (item, index) => - item.value && ( - {item.value} - ), - )} - - {showRating && ( - + return ( + + + + + {metadataItems.map( + (item, index) => + item.value && ( + {item.value} + ), )} - - {detailQuery?.data?.albumArtists.map((artist) => ( - - {artist.name} - - ))} - - - - - ); - }, -); + + {showRating && ( + + )} + + {detailQuery?.data?.albumArtists.map((artist) => ( + + {artist.name} + + ))} + + + + + ); +}; diff --git a/src/renderer/features/albums/components/album-list-header-filters.tsx b/src/renderer/features/albums/components/album-list-header-filters.tsx index b8028fc54..08277bc00 100644 --- a/src/renderer/features/albums/components/album-list-header-filters.tsx +++ b/src/renderer/features/albums/components/album-list-header-filters.tsx @@ -5,7 +5,6 @@ import { ListMusicFolderDropdown } from '/@/renderer/features/shared/components/ import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button'; import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown'; import { ListSortOrderToggleButton } from '/@/renderer/features/shared/components/list-sort-order-toggle-button'; -import { useContainerQuery } from '/@/renderer/hooks'; import { Divider } from '/@/shared/components/divider/divider'; import { Flex } from '/@/shared/components/flex/flex'; import { Group } from '/@/shared/components/group/group'; @@ -13,11 +12,9 @@ import { AlbumListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-ty import { ItemListKey } from '/@/shared/types/types'; export const AlbumListHeaderFilters = () => { - const cq = useContainerQuery(); - return ( - + { - const cq = useContainerQuery(); + const { ref, ...cq } = useContainerQuery(); const { t } = useTranslation(); const { albumId } = useParams() as { albumId: string }; @@ -120,7 +120,7 @@ const DummyAlbumDetailRoute = () => { return ( - + ; + if (isLoading) return
; return ( -
+
diff --git a/src/renderer/features/artists/components/album-artist-list-header-filters.tsx b/src/renderer/features/artists/components/album-artist-list-header-filters.tsx index f6e8175de..89826cd95 100644 --- a/src/renderer/features/artists/components/album-artist-list-header-filters.tsx +++ b/src/renderer/features/artists/components/album-artist-list-header-filters.tsx @@ -12,11 +12,11 @@ import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/dom import { ItemListKey } from '/@/shared/types/types'; export const AlbumArtistListHeaderFilters = () => { - const cq = useContainerQuery(); + const { ref, ...cq } = useContainerQuery(); return ( - + { - const cq = useContainerQuery(); + const { ref, ...cq } = useContainerQuery(); const server = useCurrentServer(); const rolesQuery = useQuery(sharedQueries.roles({ query: {}, serverId: server.id })); return ( - + { - const cq = useContainerQuery(); + const { ref, ...cq } = useContainerQuery(); return ( - + - +