From 1fa975ccec114c0416bc8ce92a736255b8f08446 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 25 Feb 2023 19:01:42 -0800
Subject: [PATCH] Clean up unused wrapper component

---
 .../albums/routes/album-list-route.tsx        |  30 +++--
 .../album-artist-detail-song-list-route.tsx   |  27 ++---
 ...bum-artist-detail-top-songs-list-route.tsx |  21 ++--
 .../routes/album-artist-list-route.tsx        |  22 ++--
 .../playlist-detail-song-list-route.tsx       | 108 +++++++++---------
 .../features/songs/routes/song-list-route.tsx |  25 ++--
 6 files changed, 109 insertions(+), 124 deletions(-)

diff --git a/src/renderer/features/albums/routes/album-list-route.tsx b/src/renderer/features/albums/routes/album-list-route.tsx
index d206e05c..dbdce5b8 100644
--- a/src/renderer/features/albums/routes/album-list-route.tsx
+++ b/src/renderer/features/albums/routes/album-list-route.tsx
@@ -1,4 +1,4 @@
-import { VirtualGridContainer, VirtualInfiniteGridRef } from '/@/renderer/components';
+import { VirtualInfiniteGridRef } from '/@/renderer/components';
 import { AnimatedPage } from '/@/renderer/features/shared';
 import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header';
 import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
@@ -62,21 +62,19 @@ const AlbumListRoute = () => {
 
   return (
     <AnimatedPage>
-      <VirtualGridContainer>
-        <AlbumListHeader
-          customFilters={customFilters}
-          gridRef={gridRef}
-          itemCount={itemCount}
-          tableRef={tableRef}
-          title={searchParams.get('artistName') || undefined}
-        />
-        <AlbumListContent
-          customFilters={customFilters}
-          gridRef={gridRef}
-          itemCount={itemCount}
-          tableRef={tableRef}
-        />
-      </VirtualGridContainer>
+      <AlbumListHeader
+        customFilters={customFilters}
+        gridRef={gridRef}
+        itemCount={itemCount}
+        tableRef={tableRef}
+        title={searchParams.get('artistName') || undefined}
+      />
+      <AlbumListContent
+        customFilters={customFilters}
+        gridRef={gridRef}
+        itemCount={itemCount}
+        tableRef={tableRef}
+      />
     </AnimatedPage>
   );
 };
diff --git a/src/renderer/features/artists/routes/album-artist-detail-song-list-route.tsx b/src/renderer/features/artists/routes/album-artist-detail-song-list-route.tsx
index a6b60754..c4be82aa 100644
--- a/src/renderer/features/artists/routes/album-artist-detail-song-list-route.tsx
+++ b/src/renderer/features/artists/routes/album-artist-detail-song-list-route.tsx
@@ -3,7 +3,6 @@ import { useSetState } from '@mantine/hooks';
 import { useRef } from 'react';
 import { useParams } from 'react-router';
 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 { AlbumArtistDetailSongListHeader } from '/@/renderer/features/artists/components/album-artist-detail-song-list-header';
 import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
@@ -44,20 +43,18 @@ const AlbumArtistDetailSongListRoute = () => {
 
   return (
     <AnimatedPage>
-      <VirtualGridContainer>
-        <AlbumArtistDetailSongListHeader
-          filter={filter}
-          itemCount={itemCount}
-          setFilter={setFilter}
-          tableRef={tableRef}
-          title={detailQuery?.data?.name || 'Unknown'}
-        />
-        <AlbumArtistDetailSongListContent
-          filter={filter}
-          itemCount={itemCount}
-          tableRef={tableRef}
-        />
-      </VirtualGridContainer>
+      <AlbumArtistDetailSongListHeader
+        filter={filter}
+        itemCount={itemCount}
+        setFilter={setFilter}
+        tableRef={tableRef}
+        title={detailQuery?.data?.name || 'Unknown'}
+      />
+      <AlbumArtistDetailSongListContent
+        filter={filter}
+        itemCount={itemCount}
+        tableRef={tableRef}
+      />
     </AnimatedPage>
   );
 };
diff --git a/src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx b/src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx
index decbf1d1..a427f00c 100644
--- a/src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx
+++ b/src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx
@@ -1,7 +1,6 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { useRef } from 'react';
 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 { AlbumArtistDetailTopSongsListHeader } from '/@/renderer/features/artists/components/album-artist-detail-top-songs-list-header';
 import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
@@ -28,17 +27,15 @@ const AlbumArtistDetailTopSongsListRoute = () => {
 
   return (
     <AnimatedPage>
-      <VirtualGridContainer>
-        <AlbumArtistDetailTopSongsListHeader
-          data={topSongsQuery?.data?.items || []}
-          itemCount={itemCount}
-          title={detailQuery?.data?.name || 'Unknown'}
-        />
-        <AlbumArtistDetailTopSongsListContent
-          data={topSongsQuery?.data?.items || []}
-          tableRef={tableRef}
-        />
-      </VirtualGridContainer>
+      <AlbumArtistDetailTopSongsListHeader
+        data={topSongsQuery?.data?.items || []}
+        itemCount={itemCount}
+        title={detailQuery?.data?.name || 'Unknown'}
+      />
+      <AlbumArtistDetailTopSongsListContent
+        data={topSongsQuery?.data?.items || []}
+        tableRef={tableRef}
+      />
     </AnimatedPage>
   );
 };
diff --git a/src/renderer/features/artists/routes/album-artist-list-route.tsx b/src/renderer/features/artists/routes/album-artist-list-route.tsx
index 9f8ef1f9..bc0b1c67 100644
--- a/src/renderer/features/artists/routes/album-artist-list-route.tsx
+++ b/src/renderer/features/artists/routes/album-artist-list-route.tsx
@@ -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 { AnimatedPage } from '/@/renderer/features/shared';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
@@ -32,17 +32,15 @@ const AlbumArtistListRoute = () => {
 
   return (
     <AnimatedPage>
-      <VirtualGridContainer>
-        <AlbumArtistListHeader
-          gridRef={gridRef}
-          itemCount={itemCount}
-          tableRef={tableRef}
-        />
-        <AlbumArtistListContent
-          gridRef={gridRef}
-          tableRef={tableRef}
-        />
-      </VirtualGridContainer>
+      <AlbumArtistListHeader
+        gridRef={gridRef}
+        itemCount={itemCount}
+        tableRef={tableRef}
+      />
+      <AlbumArtistListContent
+        gridRef={gridRef}
+        tableRef={tableRef}
+      />
     </AnimatedPage>
   );
 };
diff --git a/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx b/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
index 44eeabe0..a3ac5196 100644
--- a/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
+++ b/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
@@ -13,7 +13,7 @@ import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playli
 import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation';
 import { AppRoute } from '/@/renderer/router/routes';
 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 { useCurrentServer, usePlaylistDetailStore } from '/@/renderer/store';
 import { PlaylistSongListQuery, ServerType, SongListSort, SortOrder } from '/@/renderer/api/types';
@@ -162,63 +162,61 @@ const PlaylistDetailSongListRoute = () => {
 
   return (
     <AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
-      <VirtualGridContainer>
-        <PlaylistDetailSongListHeader
-          handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
-          itemCount={itemCount}
-          tableRef={tableRef}
-        />
-        <AnimatePresence
-          custom={{ isQueryBuilderExpanded }}
-          initial={false}
-        >
-          {(isSmartPlaylist || showQueryBuilder) && (
-            <motion.div
-              animate="animate"
-              custom={{ isQueryBuilderExpanded }}
-              exit="exit"
-              initial="initial"
-              transition={{ duration: 0.2, ease: 'easeInOut' }}
-              variants={smartPlaylistVariants}
+      <PlaylistDetailSongListHeader
+        handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
+        itemCount={itemCount}
+        tableRef={tableRef}
+      />
+      <AnimatePresence
+        custom={{ isQueryBuilderExpanded }}
+        initial={false}
+      >
+        {(isSmartPlaylist || showQueryBuilder) && (
+          <motion.div
+            animate="animate"
+            custom={{ isQueryBuilderExpanded }}
+            exit="exit"
+            initial="initial"
+            transition={{ duration: 0.2, ease: 'easeInOut' }}
+            variants={smartPlaylistVariants}
+          >
+            <Paper
+              h="100%"
+              pos="relative"
+              w="100%"
             >
-              <Paper
-                h="100%"
-                pos="relative"
-                w="100%"
+              <Group
+                pt="1rem"
+                px="1rem"
               >
-                <Group
-                  pt="1rem"
-                  px="1rem"
+                <Button
+                  compact
+                  variant="default"
+                  onClick={handleToggleExpand}
                 >
-                  <Button
-                    compact
-                    variant="default"
-                    onClick={handleToggleExpand}
-                  >
-                    {isQueryBuilderExpanded ? (
-                      <RiArrowUpSLine size={20} />
-                    ) : (
-                      <RiArrowDownSLine size={20} />
-                    )}
-                  </Button>
-                  <Text>Query Editor</Text>
-                </Group>
-                <PlaylistQueryBuilder
-                  key={JSON.stringify(detailQuery?.data?.rules)}
-                  isSaving={createPlaylistMutation?.isLoading}
-                  limit={detailQuery?.data?.rules?.limit}
-                  query={detailQuery?.data?.rules}
-                  sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM}
-                  sortOrder={detailQuery?.data?.rules?.order || 'asc'}
-                  onSave={handleSave}
-                  onSaveAs={handleSaveAs}
-                />
-              </Paper>
-            </motion.div>
-          )}
-        </AnimatePresence>
-        <PlaylistDetailSongListContent tableRef={tableRef} />
-      </VirtualGridContainer>
+                  {isQueryBuilderExpanded ? (
+                    <RiArrowUpSLine size={20} />
+                  ) : (
+                    <RiArrowDownSLine size={20} />
+                  )}
+                </Button>
+                <Text>Query Editor</Text>
+              </Group>
+              <PlaylistQueryBuilder
+                key={JSON.stringify(detailQuery?.data?.rules)}
+                isSaving={createPlaylistMutation?.isLoading}
+                limit={detailQuery?.data?.rules?.limit}
+                query={detailQuery?.data?.rules}
+                sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM}
+                sortOrder={detailQuery?.data?.rules?.order || 'asc'}
+                onSave={handleSave}
+                onSaveAs={handleSaveAs}
+              />
+            </Paper>
+          </motion.div>
+        )}
+      </AnimatePresence>
+      <PlaylistDetailSongListContent tableRef={tableRef} />
     </AnimatedPage>
   );
 };
diff --git a/src/renderer/features/songs/routes/song-list-route.tsx b/src/renderer/features/songs/routes/song-list-route.tsx
index 85c65ea0..0ef7f13a 100644
--- a/src/renderer/features/songs/routes/song-list-route.tsx
+++ b/src/renderer/features/songs/routes/song-list-route.tsx
@@ -2,7 +2,6 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
 import { useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { SongListQuery } from '/@/renderer/api/types';
-import { VirtualGridContainer } from '/@/renderer/components';
 import { AnimatedPage } from '/@/renderer/features/shared';
 import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
 import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
@@ -50,19 +49,17 @@ const TrackListRoute = () => {
 
   return (
     <AnimatedPage>
-      <VirtualGridContainer>
-        <SongListHeader
-          customFilters={customFilters}
-          itemCount={itemCount}
-          tableRef={tableRef}
-          title={searchParams.get('artistName') || undefined}
-        />
-        <SongListContent
-          customFilters={customFilters}
-          itemCount={itemCount}
-          tableRef={tableRef}
-        />
-      </VirtualGridContainer>
+      <SongListHeader
+        customFilters={customFilters}
+        itemCount={itemCount}
+        tableRef={tableRef}
+        title={searchParams.get('artistName') || undefined}
+      />
+      <SongListContent
+        customFilters={customFilters}
+        itemCount={itemCount}
+        tableRef={tableRef}
+      />
     </AnimatedPage>
   );
 };