pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Clean up unused wrapper component

Browse source
This commit is contained in:
jeffvli 2023-02-25 19:01:42 -08:00
parent ac62c26099
commit 1fa975ccec
6 changed files with 109 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/renderer/features/albums/routes/album-list-route.tsx
View file

@ -1,4 +1,4 @@
import { VirtualGridContainer, VirtualInfiniteGridRef } from '/@/renderer/components'; import { VirtualInfiniteGridRef } from '/@/renderer/components';
import { AnimatedPage } from '/@/renderer/features/shared'; import { AnimatedPage } from '/@/renderer/features/shared';
import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header'; import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header';
import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content'; import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
@ -62,21 +62,19 @@ const AlbumListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<VirtualGridContainer> <AlbumListHeader
<AlbumListHeader customFilters={customFilters}
customFilters={customFilters} gridRef={gridRef}
gridRef={gridRef} itemCount={itemCount}
itemCount={itemCount} tableRef={tableRef}
tableRef={tableRef} title={searchParams.get('artistName') || undefined}
title={searchParams.get('artistName') || undefined} />
/> <AlbumListContent
<AlbumListContent customFilters={customFilters}
customFilters={customFilters} gridRef={gridRef}
gridRef={gridRef} itemCount={itemCount}
itemCount={itemCount} tableRef={tableRef}
tableRef={tableRef} />
/>
</VirtualGridContainer>
</AnimatedPage> </AnimatedPage>
); );
}; };

27
src/renderer/features/artists/routes/album-artist-detail-song-list-route.tsx
View file

@ -3,7 +3,6 @@ import { useSetState } from '@mantine/hooks';
import { useRef } from 'react'; import { useRef } from 'react';
import { useParams } from 'react-router'; import { useParams } from 'react-router';
import { SongListSort, SortOrder } from '/@/renderer/api/types'; import { SongListSort, SortOrder } from '/@/renderer/api/types';
import { VirtualGridContainer } from '/@/renderer/components';
import { AlbumArtistDetailSongListContent } from '/@/renderer/features/artists/components/album-artist-detail-song-list-content'; import { AlbumArtistDetailSongListContent } from '/@/renderer/features/artists/components/album-artist-detail-song-list-content';
import { AlbumArtistDetailSongListHeader } from '/@/renderer/features/artists/components/album-artist-detail-song-list-header'; import { AlbumArtistDetailSongListHeader } from '/@/renderer/features/artists/components/album-artist-detail-song-list-header';
import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query'; import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
@ -44,20 +43,18 @@ const AlbumArtistDetailSongListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<VirtualGridContainer> <AlbumArtistDetailSongListHeader
<AlbumArtistDetailSongListHeader filter={filter}
filter={filter} itemCount={itemCount}
itemCount={itemCount} setFilter={setFilter}
setFilter={setFilter} tableRef={tableRef}
tableRef={tableRef} title={detailQuery?.data?.name || 'Unknown'}
title={detailQuery?.data?.name || 'Unknown'} />
/> <AlbumArtistDetailSongListContent
<AlbumArtistDetailSongListContent filter={filter}
filter={filter} itemCount={itemCount}
itemCount={itemCount} tableRef={tableRef}
tableRef={tableRef} />
/>
</VirtualGridContainer>
</AnimatedPage> </AnimatedPage>
); );
}; };

21
src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx
View file

@ -1,7 +1,6 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useRef } from 'react'; import { useRef } from 'react';
import { useParams } from 'react-router'; import { useParams } from 'react-router';
import { VirtualGridContainer } from '/@/renderer/components';
import { AlbumArtistDetailTopSongsListContent } from '/@/renderer/features/artists/components/album-artist-detail-top-songs-list-content'; import { AlbumArtistDetailTopSongsListContent } from '/@/renderer/features/artists/components/album-artist-detail-top-songs-list-content';
import { AlbumArtistDetailTopSongsListHeader } from '/@/renderer/features/artists/components/album-artist-detail-top-songs-list-header'; import { AlbumArtistDetailTopSongsListHeader } from '/@/renderer/features/artists/components/album-artist-detail-top-songs-list-header';
import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query'; import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
@ -28,17 +27,15 @@ const AlbumArtistDetailTopSongsListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<VirtualGridContainer> <AlbumArtistDetailTopSongsListHeader
<AlbumArtistDetailTopSongsListHeader data={topSongsQuery?.data?.items || []}
data={topSongsQuery?.data?.items || []} itemCount={itemCount}
itemCount={itemCount} title={detailQuery?.data?.name || 'Unknown'}
title={detailQuery?.data?.name || 'Unknown'} />
/> <AlbumArtistDetailTopSongsListContent
<AlbumArtistDetailTopSongsListContent data={topSongsQuery?.data?.items || []}
data={topSongsQuery?.data?.items || []} tableRef={tableRef}
tableRef={tableRef} />
/>
</VirtualGridContainer>
</AnimatedPage> </AnimatedPage>
); );
}; };

22
src/renderer/features/artists/routes/album-artist-list-route.tsx
View file

@ -1,4 +1,4 @@
import { VirtualGridContainer, VirtualInfiniteGridRef } from '/@/renderer/components'; import { VirtualInfiniteGridRef } from '/@/renderer/components';
import { AlbumArtistListHeader } from '/@/renderer/features/artists/components/album-artist-list-header'; import { AlbumArtistListHeader } from '/@/renderer/features/artists/components/album-artist-list-header';
import { AnimatedPage } from '/@/renderer/features/shared'; import { AnimatedPage } from '/@/renderer/features/shared';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
@ -32,17 +32,15 @@ const AlbumArtistListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<VirtualGridContainer> <AlbumArtistListHeader
<AlbumArtistListHeader gridRef={gridRef}
gridRef={gridRef} itemCount={itemCount}
itemCount={itemCount} tableRef={tableRef}
tableRef={tableRef} />
/> <AlbumArtistListContent
<AlbumArtistListContent gridRef={gridRef}
gridRef={gridRef} tableRef={tableRef}
tableRef={tableRef} />
/>
</VirtualGridContainer>
</AnimatedPage> </AnimatedPage>
); );
}; };

108
src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
View file

@ -13,7 +13,7 @@ import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playli
import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation'; import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation'; import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
import { Button, Paper, Text, toast, VirtualGridContainer } from '/@/renderer/components'; import { Button, Paper, Text, toast } from '/@/renderer/components';
import { SaveAsPlaylistForm } from '/@/renderer/features/playlists/components/save-as-playlist-form'; import { SaveAsPlaylistForm } from '/@/renderer/features/playlists/components/save-as-playlist-form';
import { useCurrentServer, usePlaylistDetailStore } from '/@/renderer/store'; import { useCurrentServer, usePlaylistDetailStore } from '/@/renderer/store';
import { PlaylistSongListQuery, ServerType, SongListSort, SortOrder } from '/@/renderer/api/types'; import { PlaylistSongListQuery, ServerType, SongListSort, SortOrder } from '/@/renderer/api/types';
@ -162,63 +162,61 @@ const PlaylistDetailSongListRoute = () => {
return ( return (
<AnimatedPage key={`playlist-detail-songList-${playlistId}`}> <AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
<VirtualGridContainer> <PlaylistDetailSongListHeader
<PlaylistDetailSongListHeader handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
handleToggleShowQueryBuilder={handleToggleShowQueryBuilder} itemCount={itemCount}
itemCount={itemCount} tableRef={tableRef}
tableRef={tableRef} />
/> <AnimatePresence
<AnimatePresence custom={{ isQueryBuilderExpanded }}
custom={{ isQueryBuilderExpanded }} initial={false}
initial={false} >
> {(isSmartPlaylist || showQueryBuilder) && (
{(isSmartPlaylist || showQueryBuilder) && ( <motion.div
<motion.div animate="animate"
animate="animate" custom={{ isQueryBuilderExpanded }}
custom={{ isQueryBuilderExpanded }} exit="exit"
exit="exit" initial="initial"
initial="initial" transition={{ duration: 0.2, ease: 'easeInOut' }}
transition={{ duration: 0.2, ease: 'easeInOut' }} variants={smartPlaylistVariants}
variants={smartPlaylistVariants} >
<Paper
h="100%"
pos="relative"
w="100%"
> >
<Paper <Group
h="100%" pt="1rem"
pos="relative" px="1rem"
w="100%"
> >
<Group <Button
pt="1rem" compact
px="1rem" variant="default"
onClick={handleToggleExpand}
> >
<Button {isQueryBuilderExpanded ? (
compact <RiArrowUpSLine size={20} />
variant="default" ) : (
onClick={handleToggleExpand} <RiArrowDownSLine size={20} />
> )}
{isQueryBuilderExpanded ? ( </Button>
<RiArrowUpSLine size={20} /> <Text>Query Editor</Text>
) : ( </Group>
<RiArrowDownSLine size={20} /> <PlaylistQueryBuilder
)} key={JSON.stringify(detailQuery?.data?.rules)}
</Button> isSaving={createPlaylistMutation?.isLoading}
<Text>Query Editor</Text> limit={detailQuery?.data?.rules?.limit}
</Group> query={detailQuery?.data?.rules}
<PlaylistQueryBuilder sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM}
key={JSON.stringify(detailQuery?.data?.rules)} sortOrder={detailQuery?.data?.rules?.order || 'asc'}
isSaving={createPlaylistMutation?.isLoading} onSave={handleSave}
limit={detailQuery?.data?.rules?.limit} onSaveAs={handleSaveAs}
query={detailQuery?.data?.rules} />
sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM} </Paper>
sortOrder={detailQuery?.data?.rules?.order || 'asc'} </motion.div>
onSave={handleSave} )}
onSaveAs={handleSaveAs} </AnimatePresence>
/> <PlaylistDetailSongListContent tableRef={tableRef} />
</Paper>
</motion.div>
)}
</AnimatePresence>
<PlaylistDetailSongListContent tableRef={tableRef} />
</VirtualGridContainer>
</AnimatedPage> </AnimatedPage>
); );
}; };

25
src/renderer/features/songs/routes/song-list-route.tsx
View file

@ -2,7 +2,6 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
import { useRef } from 'react'; import { useRef } from 'react';
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from 'react-router-dom';
import { SongListQuery } from '/@/renderer/api/types'; import { SongListQuery } from '/@/renderer/api/types';
import { VirtualGridContainer } from '/@/renderer/components';
import { AnimatedPage } from '/@/renderer/features/shared'; import { AnimatedPage } from '/@/renderer/features/shared';
import { SongListContent } from '/@/renderer/features/songs/components/song-list-content'; import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header'; import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
@ -50,19 +49,17 @@ const TrackListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<VirtualGridContainer> <SongListHeader
<SongListHeader customFilters={customFilters}
customFilters={customFilters} itemCount={itemCount}
itemCount={itemCount} tableRef={tableRef}
tableRef={tableRef} title={searchParams.get('artistName') || undefined}
title={searchParams.get('artistName') || undefined} />
/> <SongListContent
<SongListContent customFilters={customFilters}
customFilters={customFilters} itemCount={itemCount}
itemCount={itemCount} tableRef={tableRef}
tableRef={tableRef} />
/>
</VirtualGridContainer>
</AnimatedPage> </AnimatedPage>
); );
}; };