reimplement genre detail route

2026-06-21 03:14:16 +02:00 · 2025-11-24 20:19:09 -08:00
parent eba485034a
commit d3132ad570
30 changed files with 443 additions and 190 deletions
@@ -0,0 +1,69 @@
+import { Suspense, useMemo } from 'react';
+import { useParams } from 'react-router';
+
+import { AlbumListView } from '/@/renderer/features/albums/components/album-list-content';
+import { SongListView } from '/@/renderer/features/songs/components/song-list-content';
+import { GenreTarget, useGenreTarget, useListSettings } from '/@/renderer/store';
+import { Spinner } from '/@/shared/components/spinner/spinner';
+import { ItemListKey } from '/@/shared/types/types';
+
+export const GenreDetailContent = () => {
+    const genreTarget = useGenreTarget();
+
+    switch (genreTarget) {
+        case GenreTarget.ALBUM:
+            return <GenreDetailContentAlbums />;
+        case GenreTarget.TRACK:
+            return <GenreDetailContentSongs />;
+        default:
+            return null;
+    }
+};
+
+function GenreDetailContentAlbums() {
+    const { genreId } = useParams() as { genreId: string };
+    const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
+
+    const overrideQuery = useMemo(() => {
+        return {
+            genreIds: [genreId],
+        };
+    }, [genreId]);
+
+    return (
+        <Suspense fallback={<Spinner container />}>
+            <AlbumListView
+                display={display}
+                grid={grid}
+                itemsPerPage={itemsPerPage}
+                overrideQuery={overrideQuery}
+                pagination={pagination}
+                table={table}
+            />
+        </Suspense>
+    );
+}
+
+function GenreDetailContentSongs() {
+    const { genreId } = useParams() as { genreId: string };
+    const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.SONG);
+
+    const overrideQuery = useMemo(() => {
+        return {
+            genreIds: [genreId],
+        };
+    }, [genreId]);
+
+    return (
+        <Suspense fallback={<Spinner container />}>
+            <SongListView
+                display={display}
+                grid={grid}
+                itemsPerPage={itemsPerPage}
+                overrideQuery={overrideQuery}
+                pagination={pagination}
+                table={table}
+            />
+        </Suspense>
+    );
+}