import { useQuery } from '@apollo/client'
import PageLoading from '../../components/page-loading'
import { ME_REWARDS } from '../../fragments/rewards'
import { CenterLayout } from '../../components/layout'
import dynamic from 'next/dynamic'
import { useRouter } from 'next/router'
import { getGetServerSideProps } from '../../api/ssrApollo'
import { fixedDecimal } from '../../lib/format'
import Trophy from '../../svgs/trophy-fill.svg'
const GrowthPieChart = dynamic(() => import('../../components/charts').then(mod => mod.GrowthPieChart), {
loading: () =>
Loading...
})
export const getServerSideProps = getGetServerSideProps(ME_REWARDS, null,
(data, params) => data.rewards.total === 0 || new Date(data.rewards.time) > new Date())
const timeString = when => new Date(when).toISOString().slice(0, 10)
export default function Rewards ({ ssrData }) {
const router = useRouter()
const { data } = useQuery(ME_REWARDS, { variables: { ...router.query } })
if (!data && !ssrData) return
const { rewards: { total, sources, time }, meRewards } = data || ssrData
const when = router.query.when
return (
{when &&
On {timeString(time)} at 12a CT
}
{total} sats were rewarded
{meRewards &&
<>
you earned {meRewards.total} sats ({fixedDecimal(meRewards.total * 100 / total, 2)}%)
{meRewards.rewards?.map((r, i) => )}
>}
)
}
function Reward ({ rank, type, sats }) {
if (!rank) return null
const color = rank <= 3 ? 'text-primary' : 'text-muted'
let category = type
switch (type) {
case 'TIP_POST':
category = 'in post zapping'
break
case 'TIP_COMMENT':
category = 'in comment zapping'
break
case 'POST':
category = 'among posts'
break
case 'COMMENT':
category = 'among comments'
break
}
return (
#{rank} {category} for {sats} sats
)
}