feat: enhance DashboardPage with auto-refresh and NumberFlow for statistics display

2025-07-18 21:52:17 +02:00
parent c27236232e
commit 7e8a416473
3 changed files with 106 additions and 54 deletions
--- a/src/hooks/use-dashboard-stats.ts
+++ b/src/hooks/use-dashboard-stats.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { apiService } from '@/services/api'

 interface DashboardStats {
@@ -51,46 +51,51 @@ export function useDashboardStats(period: TimePeriod = 'all', limit: number = 5)
  const [topUsers, setTopUsers] = useState<TopUsersResponse | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
+  const [refreshKey, setRefreshKey] = useState(0)

-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setLoading(true)
-        setError(null)
-        
-        // Fetch basic stats, top sounds, top tracks, and top users in parallel
-        const [statsResponse, topSoundsResponse, topTracksResponse, topUsersResponse] = await Promise.all([
-          apiService.get('/api/dashboard/stats'),
-          apiService.get(`/api/dashboard/top-sounds?period=${period}&limit=${limit}`),
-          apiService.get(`/api/dashboard/top-tracks?period=${period}&limit=${limit}`),
-          apiService.get(`/api/dashboard/top-users?period=${period}&limit=${limit}`)
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true)
+      setError(null)
+      
+      // Fetch basic stats, top sounds, top tracks, and top users in parallel
+      const [statsResponse, topSoundsResponse, topTracksResponse, topUsersResponse] = await Promise.all([
+        apiService.get('/api/dashboard/stats'),
+        apiService.get(`/api/dashboard/top-sounds?period=${period}&limit=${limit}`),
+        apiService.get(`/api/dashboard/top-tracks?period=${period}&limit=${limit}`),
+        apiService.get(`/api/dashboard/top-users?period=${period}&limit=${limit}`)
+      ])
+      
+      if (statsResponse.ok && topSoundsResponse.ok && topTracksResponse.ok && topUsersResponse.ok) {
+        const [statsData, topSoundsData, topTracksData, topUsersData] = await Promise.all([
+          statsResponse.json(),
+          topSoundsResponse.json(),
+          topTracksResponse.json(),
+          topUsersResponse.json()
        ])
        
-        if (statsResponse.ok && topSoundsResponse.ok && topTracksResponse.ok && topUsersResponse.ok) {
-          const [statsData, topSoundsData, topTracksData, topUsersData] = await Promise.all([
-            statsResponse.json(),
-            topSoundsResponse.json(),
-            topTracksResponse.json(),
-            topUsersResponse.json()
-          ])
-          
-          setStats(statsData)
-          setTopSounds(topSoundsData)
-          setTopTracks(topTracksData)
-          setTopUsers(topUsersData)
-        } else {
-          setError('Failed to fetch dashboard data')
-        }
-      } catch (err) {
-        setError('An error occurred while fetching dashboard data')
-        console.error('Dashboard fetch error:', err)
-      } finally {
-        setLoading(false)
+        setStats(statsData)
+        setTopSounds(topSoundsData)
+        setTopTracks(topTracksData)
+        setTopUsers(topUsersData)
+      } else {
+        setError('Failed to fetch dashboard data')
      }
+    } catch (err) {
+      setError('An error occurred while fetching dashboard data')
+      console.error('Dashboard fetch error:', err)
+    } finally {
+      setLoading(false)
    }
-
-    fetchData()
  }, [period, limit])

-  return { stats, topSounds, topTracks, topUsers, loading, error }
+  const refresh = () => {
+    setRefreshKey(prev => prev + 1)
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData, refreshKey])
+
+  return { stats, topSounds, topTracks, topUsers, loading, error, refresh }
 }
--- a/src/lib/format-size.ts
+++ b/src/lib/format-size.ts
@@ -4,19 +4,28 @@
 const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB']

 /**
- * Converts a file size in bytes to a human-readable string
- * @param bytes File size in bytes
- * @returns Formatted file size string (e.g., "1.5 MB")
+ * Interface for file size
 */
-export function formatSize(bytes: number, binary: boolean = false): string {
+export interface FileSize {
+  value: number
+  unit: string
+}
+
+/**
+ * Base function to parse file size in bytes to value and unit
+ * @param bytes File size in bytes
+ * @param binary Whether to use binary (1024) or decimal (1000) units
+ * @returns Object with numeric value and unit string
+ */
+function parseSize(bytes: number, binary: boolean = false): FileSize {
  // Handle invalid input
  if (bytes === null || bytes === undefined || isNaN(bytes) || bytes < 0) {
-    return `0 B`
+    return { value: 0, unit: 'B' }
  }

  // If the size is 0, return early
  if (bytes === 0) {
-    return `0 B`
+    return { value: 0, unit: 'B' }
  }

  // Otherwise, determine the appropriate unit based on the size
@@ -28,5 +37,29 @@ export function formatSize(bytes: number, binary: boolean = false): string {
  // Make sure we don't exceed our units array
  const safeUnitIndex = Math.min(unitIndex, FILE_SIZE_UNITS.length - 1)

-  return `${value.toFixed(2)} ${FILE_SIZE_UNITS[safeUnitIndex]}`
+  return {
+    value: Math.round(value * 100) / 100, // Round to 2 decimal places
+    unit: FILE_SIZE_UNITS[safeUnitIndex]
+  }
 }
+
+/**
+ * Converts a file size in bytes to a human-readable string
+ * @param bytes File size in bytes
+ * @param binary Whether to use binary (1024) or decimal (1000) units
+ * @returns Formatted file size string (e.g., "1.5 MB")
+ */
+export function formatSize(bytes: number, binary: boolean = false): string {
+  const { value, unit } = parseSize(bytes, binary)
+  return `${value.toFixed(2)} ${unit}`
+}
+
+/**
+ * Converts a file size in bytes to an object with value and unit
+ * @param bytes File size in bytes
+ * @param binary Whether to use binary (1024) or decimal (1000) units
+ * @returns Object with numeric value and unit string
+ */
+export function formatSizeObject(bytes: number, binary: boolean = false): FileSize {
+  return parseSize(bytes, binary)
+}
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -1,7 +1,8 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useAuth } from '@/hooks/use-auth'
 import { useDashboardStats, type TimePeriod } from '@/hooks/use-dashboard-stats'
-import { formatSize } from '@/lib/format-size'
+import { formatSize, formatSizeObject } from '@/lib/format-size'
+import NumberFlow from '@number-flow/react'

 const PERIOD_OPTIONS = [
  { value: 'today' as TimePeriod, label: 'Today' },
@@ -22,13 +23,19 @@ export function DashboardPage() {
  const { user } = useAuth()
  const [selectedPeriod, setSelectedPeriod] = useState<TimePeriod>('today')
  const [selectedLimit, setSelectedLimit] = useState<number>(5)
-  const { stats, topSounds, topTracks, topUsers, loading, error } = useDashboardStats(selectedPeriod, selectedLimit)
+  const { stats, topSounds, topTracks, topUsers, loading, error, refresh } = useDashboardStats(selectedPeriod, selectedLimit)
+
+  // Auto-refresh every 10 seconds
+  useEffect(() => {
+    const interval = setInterval(refresh, 10000)
+    return () => clearInterval(interval)
+  }, [refresh])

  if (!user) return null

  return (
    <div className="space-y-6">
-      {loading && (
+      {!stats && loading && (
        <div className="text-center py-8">
          <div className="text-muted-foreground">Loading statistics...</div>
        </div>
@@ -47,7 +54,7 @@ export function DashboardPage() {
            <div className="bg-card border rounded-lg p-6">
              <div className="text-center">
                <div className="text-3xl font-bold text-primary mb-2">
-                  {stats.soundboard_sounds}
+                  <NumberFlow value={stats.soundboard_sounds} />
                </div>
                <div className="text-sm text-muted-foreground">
                  Sounds
@@ -58,7 +65,7 @@ export function DashboardPage() {
            <div className="bg-card border rounded-lg p-6">
              <div className="text-center">
                <div className="text-3xl font-bold text-primary mb-2">
-                  {stats.tracks}
+                  <NumberFlow value={stats.tracks} />
                </div>
                <div className="text-sm text-muted-foreground">
                  Tracks
@@ -69,7 +76,7 @@ export function DashboardPage() {
            <div className="bg-card border rounded-lg p-6">
              <div className="text-center">
                <div className="text-3xl font-bold text-primary mb-2">
-                  {stats.playlists}
+                  <NumberFlow value={stats.playlists} />
                </div>
                <div className="text-sm text-muted-foreground">
                  Playlists
@@ -80,7 +87,14 @@ export function DashboardPage() {
            <div className="bg-card border rounded-lg p-6">
              <div className="text-center">
                <div className="text-3xl font-bold text-primary mb-2">
-                  {formatSize(stats.total_size, true)}
+                  {(() => {
+                    const sizeObj = formatSizeObject(stats.total_size, true)
+                    return (
+                      <>
+                        <NumberFlow value={sizeObj.value} /> {sizeObj.unit}
+                      </>
+                    )
+                  })()}
                </div>
                <div className="text-sm text-muted-foreground">
                  Total Size
@@ -140,7 +154,7 @@ export function DashboardPage() {
                        </div>
                      </div>
                      <div className="text-right">
-                        <div className="font-semibold">{sound.play_count}</div>
+                        <div className="font-semibold"><NumberFlow value={sound.play_count} /></div>
                        <div className="text-sm text-muted-foreground">
                          {sound.play_count === 1 ? 'play' : 'plays'}
                        </div>
@@ -178,7 +192,7 @@ export function DashboardPage() {
                        </div>
                      </div>
                      <div className="text-right">
-                        <div className="font-semibold">{track.play_count}</div>
+                        <div className="font-semibold"><NumberFlow value={track.play_count} /></div>
                        <div className="text-sm text-muted-foreground">
                          {track.play_count === 1 ? 'play' : 'plays'}
                        </div>
@@ -225,7 +239,7 @@ export function DashboardPage() {
                        </div>
                      </div>
                      <div className="text-right">
-                        <div className="font-semibold">{user.play_count}</div>
+                        <div className="font-semibold"><NumberFlow value={user.play_count} /></div>
                        <div className="text-sm text-muted-foreground">
                          {user.play_count === 1 ? 'play' : 'plays'}
                        </div>