1- import { QueryClientProvider , useQuery } from '@tanstack/react-query' ;
2- import { API_URL } from '@/lib/constants' ;
3- import { queryClient } from '@/store' ;
4-
5- interface Streamer {
6- id : string ;
7- name : string ;
8- isLive : boolean ;
9- livePlatform : string | null ;
10- viewerCount : number ;
11- }
12-
13- interface StreamerData {
14- streamers : Streamer [ ] ;
15- }
16-
17- async function fetchStreamers ( ) : Promise < StreamerData > {
18- const response = await fetch ( `${ API_URL } ) ;
19- if ( ! response . ok ) {
20- throw new Error ( 'Failed to fetch streamers' ) ;
21- }
22- return response . json ( ) ;
23- }
24-
25- function StreamerStatsClient ( ) {
26- const { data, isLoading, error } = useQuery ( {
27- queryKey : [ 'streamers' ] ,
28- queryFn : fetchStreamers ,
29- } ) ;
30-
31- const totalStreamers = data ?. streamers . length || 0 ;
32- const liveStreamers = data ?. streamers . filter ( ( s ) => s . isLive ) . length || 0 ;
33- const viewers = data ?. streamers . reduce ( ( acc , s ) => acc + s . viewerCount , 0 ) || 0 ;
34-
35- if ( error ) {
36- // Fallback to static numbers if API fails
37- return (
38- < div className = "grid grid-cols-1 md:grid-cols-3 gap-8 text-center" >
39- < div className = "space-y-2" >
40- < div className = "text-4xl font-bold text-accent" > 50+</ div >
41- < div className = "text-muted-foreground" > Streamers Supported</ div >
42- </ div >
43- < div className = "space-y-2" >
44- < div className = "text-4xl font-bold text-accent" > 2</ div >
45- < div className = "text-muted-foreground" > Platforms Supported</ div >
46- </ div >
47- < div className = "space-y-2" >
48- < div className = "text-4xl font-bold text-accent" > ∞</ div >
49- < div className = "text-muted-foreground" > Potential to Unlock</ div >
50- </ div >
51- </ div >
52- ) ;
53- }
54-
55- return (
56- < div className = "grid grid-cols-1 md:grid-cols-3 gap-8 text-center" >
57- < div className = "space-y-2" >
58- < div className = "text-4xl font-bold text-accent" >
59- { isLoading ? "..." : totalStreamers }
60- </ div >
61- < div className = "text-muted-foreground" > Streamers Supported</ div >
62- </ div >
63- < div className = "space-y-2" >
64- < div className = "text-4xl font-bold text-accent" >
65- { isLoading ? "..." : liveStreamers }
66- </ div >
67- < div className = "text-muted-foreground" > Currently Live</ div >
68- </ div >
69- < div className = "space-y-2" >
70- < div className = "text-4xl font-bold text-accent" >
71- { isLoading ? "..." : viewers }
72- </ div >
73- < div className = "text-muted-foreground" > Live Viewers</ div >
74- </ div >
75- </ div >
76- ) ;
77- }
78- export function StreamerStats ( ) {
79- return (
80- < QueryClientProvider client = { queryClient } >
81- < StreamerStatsClient />
82- </ QueryClientProvider >
83- ) ;
84- }
1+ import { QueryClientProvider , useQuery } from '@tanstack/react-query' ;
2+ import { API_URL } from '@/lib/constants' ;
3+ import { queryClient } from '@/store' ;
4+
5+ interface Streamer {
6+ id : string ;
7+ name : string ;
8+ isLive : boolean ;
9+ livePlatform : string | null ;
10+ viewerCount : number ;
11+ }
12+
13+ interface StreamerData {
14+ streamers : Streamer [ ] ;
15+ }
16+
17+ async function fetchStreamers ( ) : Promise < StreamerData > {
18+ const response = await fetch ( `${ API_URL } ) ;
19+ if ( ! response . ok ) {
20+ throw new Error ( 'Failed to fetch streamers' ) ;
21+ }
22+ return response . json ( ) ;
23+ }
24+
25+ function StreamerStatsClient ( ) {
26+ const { data, isLoading, error } = useQuery ( {
27+ queryKey : [ 'streamers' ] ,
28+ queryFn : fetchStreamers ,
29+ } ) ;
30+
31+ const totalStreamers = data ?. streamers . length || 0 ;
32+ const liveStreamers = data ?. streamers . filter ( ( s ) => s . isLive ) . length || 0 ;
33+ const viewers =
34+ data ?. streamers . reduce ( ( acc , s ) => acc + s . viewerCount , 0 ) || 0 ;
35+
36+ if ( error ) {
37+ // Fallback to static numbers if API fails
38+ return (
39+ < div className = "grid grid-cols-1 md:grid-cols-3 gap-8 text-center" >
40+ < div className = "space-y-2" >
41+ < div className = "text-4xl font-bold text-accent" > 50+</ div >
42+ < div className = "text-muted-foreground" > Streamers Supported</ div >
43+ </ div >
44+ < div className = "space-y-2" >
45+ < div className = "text-4xl font-bold text-accent" > 2</ div >
46+ < div className = "text-muted-foreground" > Platforms Supported</ div >
47+ </ div >
48+ < div className = "space-y-2" >
49+ < div className = "text-4xl font-bold text-accent" > ∞</ div >
50+ < div className = "text-muted-foreground" > Potential to Unlock</ div >
51+ </ div >
52+ </ div >
53+ ) ;
54+ }
55+
56+ return (
57+ < div className = "grid grid-cols-1 md:grid-cols-3 gap-8 text-center" >
58+ < div className = "space-y-2" >
59+ < div className = "text-4xl font-bold text-accent" >
60+ { isLoading ? '...' : totalStreamers }
61+ </ div >
62+ < div className = "text-muted-foreground" > Streamers Supported</ div >
63+ </ div >
64+ < div className = "space-y-2" >
65+ < div className = "text-4xl font-bold text-accent" >
66+ { isLoading ? '...' : liveStreamers }
67+ </ div >
68+ < div className = "text-muted-foreground" > Currently Live</ div >
69+ </ div >
70+ < div className = "space-y-2" >
71+ < div className = "text-4xl font-bold text-accent" >
72+ { isLoading ? '...' : viewers }
73+ </ div >
74+ < div className = "text-muted-foreground" > Live Viewers</ div >
75+ </ div >
76+ </ div >
77+ ) ;
78+ }
79+ export function StreamerStats ( ) {
80+ return (
81+ < QueryClientProvider client = { queryClient } >
82+ < StreamerStatsClient />
83+ </ QueryClientProvider >
84+ ) ;
85+ }
0 commit comments