Add genres to album detail page

This commit is contained in:
jeffvli 2023-01-13 14:07:57 -08:00
parent 92cde507d9
commit 6bdf0736ec

View file

@ -13,9 +13,10 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
import { Box, Group, Stack } from '@mantine/core'; import { Box, Group, Stack } from '@mantine/core';
import { useSetState } from '@mantine/hooks'; import { useSetState } from '@mantine/hooks';
import { RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri'; import { RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
import { useParams } from 'react-router'; import { generatePath, useParams } from 'react-router';
import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query'; import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
import { useSongListStore } from '/@/renderer/store'; import { useSongListStore } from '/@/renderer/store';
import { Link } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
import { useContainerQuery } from '/@/renderer/hooks'; import { useContainerQuery } from '/@/renderer/hooks';
@ -177,12 +178,15 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
} }
}; };
const showGenres = detailQuery?.data?.genres ? detailQuery?.data?.genres.length !== 0 : false;
const { intersectRef, tableContainerRef } = useFixedTableHeader(); const { intersectRef, tableContainerRef } = useFixedTableHeader();
return ( return (
<ContentContainer> <ContentContainer>
<Box component="section">
<Group <Group
ref={intersectRef} ref={showGenres ? null : intersectRef}
className="test" className="test"
pb="2rem" pb="2rem"
pt="1rem" pt="1rem"
@ -229,6 +233,30 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
</DropdownMenu> </DropdownMenu>
</Group> </Group>
</Group> </Group>
</Box>
{showGenres && (
<Box
ref={showGenres ? intersectRef : null}
component="section"
py="1rem"
>
<Group>
{detailQuery?.data?.genres?.map((genre) => (
<Button
key={`genre-${genre.id}`}
compact
component={Link}
radius="md"
size="sm"
to={generatePath(`${AppRoute.LIBRARY_ALBUMS}?genre=${genre.id}`, { albumId })}
variant="default"
>
{genre.name}
</Button>
))}
</Group>
</Box>
)}
<Box ref={tableContainerRef}> <Box ref={tableContainerRef}>
<VirtualTable <VirtualTable
ref={tableRef} ref={tableRef}