import { gql } from 'graphql-tag' import Link from 'next/link' import { useRouter } from 'next/router' import { getGetServerSideProps } from '@/api/ssrApollo' import { CopyInput, Select, DatePicker } from '@/components/form' import { CenterLayout } from '@/components/layout' import { useMe } from '@/components/me' import { useQuery } from '@apollo/client' import PageLoading from '@/components/page-loading' import { WHENS } from '@/lib/constants' import dynamic from 'next/dynamic' import { numWithUnits } from '@/lib/format' import { whenToFrom } from '@/lib/time' import { WhenComposedChartSkeleton } from '@/components/charts-skeletons' const WhenComposedChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenComposedChart), { loading: () => }) const REFERRALS = gql` query Referrals($when: String!, $from: String, $to: String) { referrals(when: $when, from: $from, to: $to) { totalSats totalReferrals stats { time data { name value } } } }` export const getServerSideProps = getGetServerSideProps({ query: REFERRALS, authRequired: true }) export default function Referrals ({ ssrData }) { const router = useRouter() const me = useMe() const select = async values => { const { when, ...query } = values if (when !== 'custom') { delete query.from; delete query.to } if (query.from && !query.to) return await router.push({ pathname: `/referrals/${when}`, query }) } const { data } = useQuery(REFERRALS, { variables: { when: router.query.when, from: router.query.from, to: router.query.to } }) if (!data && !ssrData) return const { referrals: { totalSats, totalReferrals, stats } } = data || ssrData const when = router.query.when return (

{numWithUnits(totalReferrals, { unitPlural: 'referrals', unitSingular: 'referral' })} & {numWithUnits(totalSats, { abbreviate: false })} in the last