Merge pull request #6960 from thornbill/hide-zero-metrics

src/apps/dashboard/components/widgets/ItemCountsWidget.tsx

@@ -1,3 +1,4 @@
+import type { ItemCounts } from '@jellyfin/sdk/lib/generated-client/models/item-counts';
 import Book from '@mui/icons-material/Book';
 import Movie from '@mui/icons-material/Movie';
 import MusicNote from '@mui/icons-material/MusicNote';
@@ -5,14 +6,73 @@ import MusicVideo from '@mui/icons-material/MusicVideo';
 import Tv from '@mui/icons-material/Tv';
 import VideoLibrary from '@mui/icons-material/VideoLibrary';
 import Grid from '@mui/material/Grid2';
-import React from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+import React, { useMemo } from 'react';
 
 import { useItemCounts } from 'apps/dashboard/features/metrics/api/useItemCounts';
-import MetricCard from 'apps/dashboard/features/metrics/components/MetricCard';
+import MetricCard, { type MetricCardProps } from 'apps/dashboard/features/metrics/components/MetricCard';
 import globalize from 'lib/globalize';
 
+interface MetricDefinition {
+    key: keyof ItemCounts
+    i18n: string
+}
+
+interface CardDefinition {
+    Icon: typeof SvgIcon
+    metrics: MetricDefinition[]
+}
+
+const CARD_DEFINITIONS: CardDefinition[] = [
+    {
+        Icon: Movie,
+        metrics: [{ key: 'MovieCount', i18n: 'Movies' }]
+    }, {
+        Icon: Tv,
+        metrics: [
+            { key: 'SeriesCount', i18n: 'Series' },
+            { key: 'EpisodeCount', i18n: 'Episodes' }
+        ]
+    }, {
+        Icon: MusicNote,
+        metrics: [
+            { key: 'AlbumCount', i18n: 'Albums' },
+            { key: 'SongCount', i18n: 'Songs' }
+        ]
+    }, {
+        Icon: MusicVideo,
+        metrics: [{ key: 'MusicVideoCount', i18n: 'MusicVideos' }]
+    }, {
+        Icon: Book,
+        metrics: [{ key: 'BookCount', i18n: 'Books' }]
+    }, {
+        Icon: VideoLibrary,
+        metrics: [{ key: 'BoxSetCount', i18n: 'Collections' }]
+    }
+];
+
 const ItemCountsWidget = () => {
-    const { data: counts } = useItemCounts();
+    const {
+        data: counts,
+        isPending
+    } = useItemCounts();
+
+    const cards: MetricCardProps[] = useMemo(() => {
+        return CARD_DEFINITIONS
+            .filter(def => (
+                // Include all cards while the request is pending
+                isPending
+                // Check if the metrics are present in counts
+                || def.metrics.some(({ key }) => counts?.[key])
+            ))
+            .map(({ Icon, metrics }) => ({
+                Icon,
+                metrics: metrics.map(({ i18n, key }) => ({
+                    label: globalize.translate(i18n),
+                    value: counts?.[key]
+                }))
+            }));
+    }, [ counts, isPending ]);
 
     return (
         <Grid
@@ -23,71 +83,14 @@ const ItemCountsWidget = () => {
                 marginTop: 2
             }}
         >
-            <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
-                <MetricCard
-                    Icon={Movie}
-                    metrics={[{
-                        label: globalize.translate('Movies'),
-                        value: counts?.MovieCount
-                    }]}
-                />
-            </Grid>
-
-            <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
-                <MetricCard
-                    Icon={Tv}
-                    metrics={[{
-                        label: globalize.translate('Series'),
-                        value: counts?.SeriesCount
-                    }, {
-                        label: globalize.translate('Episodes'),
-                        value: counts?.EpisodeCount
-                    }]}
-                />
-            </Grid>
-
-            <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
-                <MetricCard
-                    Icon={MusicNote}
-                    metrics={[{
-                        label: globalize.translate('Albums'),
-                        value: counts?.AlbumCount
-                    }, {
-                        label: globalize.translate('Songs'),
-                        value: counts?.SongCount
-                    }]}
-                />
-            </Grid>
-
-            <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
-                <MetricCard
-                    Icon={MusicVideo}
-                    metrics={[{
-                        label: globalize.translate('MusicVideos'),
-                        value: counts?.MusicVideoCount
-                    }]}
-                />
-            </Grid>
-
-            <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
-                <MetricCard
-                    Icon={Book}
-                    metrics={[{
-                        label: globalize.translate('Books'),
-                        value: counts?.BookCount
-                    }]}
-                />
-            </Grid>
-
-            <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
-                <MetricCard
-                    Icon={VideoLibrary}
-                    metrics={[{
-                        label: globalize.translate('Collections'),
-                        value: counts?.BoxSetCount
-                    }]}
-                />
-            </Grid>
+            {cards.map(card => (
+                <Grid
+                    key={card.metrics.map(metric => metric.label).join('-')}
+                    size={{ xs: 12, sm: 6, lg: 4 }}
+                >
+                    <MetricCard {...card} />
+                </Grid>
+            ))}
         </Grid>
     );
 };

src/apps/dashboard/features/metrics/components/MetricCard.tsx

@@ -14,7 +14,7 @@ interface Metric {
     value?: number
 }
 
-interface MetricCardProps {
+export interface MetricCardProps {
     metrics: Metric[]
     Icon: typeof SvgIcon
 }