Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 1x 17x 17x 17x 17x 7x 7x 17x 17x 17x 17x 8x 1x 1x 1x 1x 1x 1x 1x 17x 17x 11x 4x 4x 4x 4x 4x 3x 4x 1x 4x 4x 17x 17x 17x 17x 1x 1x 15x | import { useEffect, useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { api } from '@core/lib/api'
import { useParams } from 'react-router-dom'
import { useAppConfig } from '@core/providers/AppConfigProvider'
import { useLiveSocket } from '@features/live/hooks/useLiveSocket'
import { fireConfetti } from '@core/lib/confetti'
import { LiveClassic } from '../components/themes/LiveClassic'
import { LiveModern } from '../components/themes/LiveModern'
import { LiveElegant } from '../components/themes/LiveElegant'
import type { Donation } from '@features/live/components/DonationFeed'
export const LivePage = () => {
const { config } = useAppConfig()
const { slug } = useParams<{ slug: string }>()
const activeSlug = slug || config.slug || 'default'
// Fetch initial event state
const { data: event } = useQuery({
queryKey: ['live-event-stats', activeSlug],
queryFn: async () => {
const { data } = await api.get(`/events/${activeSlug}`)
return data
},
enabled: !!activeSlug && activeSlug !== 'default',
})
const [donations, setDonations] = useState<Donation[]>([])
const [totalRaisedCents, setTotalRaisedCents] = useState(0)
const [prevTotal, setPrevTotal] = useState(0)
// Initialize state from fetched event
useEffect(() => {
if (event) {
Eif (event.raised !== undefined) {
const raisedCents = Math.round(Number(event.raised) * 100)
setTotalRaisedCents(raisedCents)
setPrevTotal(raisedCents)
}
Eif (event.donations && Array.isArray(event.donations)) {
// Map API donations to local Donation type
const mappedDonations: Donation[] = event.donations.map((d: any) => ({
...d,
timestamp: d.createdAt ? new Date(d.createdAt).getTime() : Date.now(),
}))
setDonations(mappedDonations.slice(0, 8))
}
}
}, [event])
const { lastEvent } = useLiveSocket(event?.id || config.id || 'default')
useEffect(() => {
if (lastEvent) {
const newDonation: Donation = {
...lastEvent,
timestamp: Date.now(),
}
setPrevTotal((prev) => prev)
setTotalRaisedCents((prev) => {
const newTotal = prev + lastEvent.amount
if (lastEvent.amount >= 5000) {
fireConfetti()
}
// Trigger Goal Celebration
if (
prev < config.content.goalAmount * 100 &&
newTotal >= config.content.goalAmount * 100
) {
import('@core/lib/confetti').then((mod) => mod.fireGoalCelebration())
}
return newTotal
})
setDonations((prev) => [newDonation, ...prev].slice(0, 8))
}
}, [lastEvent, config.content.goalAmount])
const theme = config.live?.theme || 'classic'
// Merge real event data into config to ensure goal/title/etc are up to date
const effectiveConfig = event
? {
...config,
content: {
...config.content,
goalAmount: Number(event.goalAmount) || config.content.goalAmount,
title: event.name || config.content.title,
},
}
: config
const props = {
config: effectiveConfig,
donations,
totalRaisedCents,
prevTotal,
activeSlug,
}
switch (theme) {
case 'modern':
return <LiveModern {...props} />
case 'elegant':
return <LiveElegant {...props} />
case 'classic':
default:
return <LiveClassic {...props} />
}
}
|