Skip to content

Commit

Permalink
Use Affiliate Stats and referral hooks in affiliate page
Browse files Browse the repository at this point in the history
  • Loading branch information
@youngkidwarrior
youngkidwarrior committed Nov 22, 2024
1 parent 3492aad commit ed01af7
Show file tree
Hide file tree
Showing 2 changed files with 187 additions and 63 deletions.
249 changes: 187 additions & 62 deletions packages/app/features/affiliate/screen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,24 @@
import { Card, CardHeader, H3, H5, LinkableButton, Paragraph, XStack, YStack } from '@my/ui'
import {
AnimatePresence,
Button,
Card,
CardHeader,
H3,
Label,
LinkableButton,
Paragraph,
Spinner,
Stack,
XStack,
YStack,
} from '@my/ui'

import { useAffiliateReferrals } from './utils/useAffiliateReferrals'

import { Fragment } from 'react'

import { useUserReferralsCount } from 'app/utils/useUserReferralsCount'
import { useAffiliateStats } from './utils/useAffiliateStats'
import formatAmount from 'app/utils/formatAmount'
import { useAffiliateStats } from './utils/useAffiliateStats'

export const AffiliateScreen = () => {
return (
Expand All @@ -13,45 +29,166 @@ export const AffiliateScreen = () => {
</LinkableButton>
</XStack>
<StatsCards />
<History />
<ReferralsList />
</YStack>
)
}

const StatsCards = () => {
const { data: affiliateStats, error: affiliateStatsError } = useAffiliateStats()
const { data: referralsCount, error: referralsCountError } = useUserReferralsCount()
const { data: affiliateStats, isLoading, error: affiliateStatsError } = useAffiliateStats()

return (
<XStack flexWrap="wrap" ai="flex-start" jc="space-around" gap="$8" mb="$4" width={'100%'}>
<Card f={1} bc={'$background'}>
<CardHeader>
<Paragraph>Referrals</Paragraph>
</CardHeader>
<H5 pl="$4" pb="$3" fontWeight="600" size={'$7'}>
{referralsCountError ? '?' : referralsCount || 0}
</H5>
</Card>
<Card f={1} bc={'$background'}>
<CardHeader>
<Paragraph>Transactions</Paragraph>
</CardHeader>
<H5 pl="$4" pb="$3" fontWeight="600" size={'$7'}>
{affiliateStatsError ? '?' : affiliateStats?.paymaster_tx_count || 0}
</H5>
</Card>
<Card f={1} bc={'$background'}>
<CardHeader>
<Paragraph>Referral Transactions</Paragraph>
</CardHeader>
<H5 pl="$4" pb="$3" fontWeight="600" size={'$7'}>
1000
</H5>
</Card>
</XStack>
<>
<Stack
fd="column"
$gtLg={{ fd: 'row' }}
flexWrap="wrap"
ai="flex-start"
jc="space-around"
gap="$3"
mb="$4"
width={'100%'}
>
<Card $gtLg={{ flexShrink: 0, flexBasis: '32%' }} w="100%" mih={152}>
<CardHeader>
<Label color={'$color10'}>Total Referrals</Label>
</CardHeader>
{isLoading ? (
<Spinner alignSelf="flex-start" size="large" color="$color12" mt="auto" p="$4" />
) : (
<>
<Paragraph pl="$4" pb="$3" fontWeight="600" size={'$12'} lineHeight={'$10'}>
{affiliateStats?.referral_count || 0}
</Paragraph>
</>
)}
</Card>
<Card $gtLg={{ flexShrink: 0, flexBasis: '32%' }} w="100%" mih={152}>
<CardHeader>
<Label color={'$color10'}>Affiliate Send Score</Label>
</CardHeader>
{isLoading ? (
<Spinner alignSelf="flex-start" size="large" color="$color12" mt="auto" p="$4" />
) : (
<>
<Paragraph pl="$4" pb="$3" fontWeight="600" size={'$12'} lineHeight={'$10'}>
{formatAmount(affiliateStats?.affiliate_send_score || 0, 10)}
</Paragraph>
</>
)}
</Card>
<Card $gtLg={{ flexShrink: 0, flexBasis: '32%' }} w="100%" mih={152}>
<CardHeader>
<Label color={'$color10'}>Affiliate Network +/-</Label>
</CardHeader>
{isLoading ? (
<Spinner alignSelf="flex-start" size="large" color="$color12" mt="auto" p="$4" />
) : (
<>
<Paragraph pl="$4" pb="$3" fontWeight="600" size={'$12'} lineHeight={'$10'}>
{affiliateStats?.send_plus_minus || 0}
</Paragraph>
</>
)}
</Card>
</Stack>
{affiliateStatsError && (
<Paragraph theme={'red_active'}>{affiliateStatsError?.message}</Paragraph>
)}
</>
)
}

const HistoryHeader = () => (
const ReferralsList = () => {
const pageSize = 10
const result = useAffiliateReferrals({
pageSize,
})
const {
data,
isLoading: isLoadingReferrals,
error: referralsError,
isFetching: isFetchingReferrals,
isFetchingNextPage: isFetchingNextPageReferrals,
fetchNextPage,
hasNextPage,
} = result

const { pages } = data ?? {}
return (
<YStack f={1} width={'100%'} space="$4">
<XStack alignItems="center" width={'100%'} gap="$3">
<H3 fontWeight={'normal'}>Referrals</H3>
</XStack>
<YStack f={1} width={'100%'} p="$6" bg="$background" space="$4" br="$8">
<ReferralsHeader />
{(() => {
switch (true) {
case isLoadingReferrals:
return <Spinner size="small" />
case referralsError !== null:
return (
<Paragraph maxWidth={'600'} fontFamily={'$mono'} fontSize={'$5'} color={'$color12'}>
{referralsError?.message.split('.').at(0) ?? `${referralsError}`}
</Paragraph>
)
case pages?.length === 0:
return (
<>
<Paragraph col={'$color12'}>No referrals</Paragraph>
</>
)
default: {
return pages?.map((referrals) => {
return referrals?.map(({ referral }) => {
return (
<Fragment key={`${referral.referred_id}-${referral.tag}`}>
<AnimateEnter>
<XStack gap="$1" ai="center">
<Paragraph w="12%" f={1} mb="0" size="$5" lineHeight="$4" ta="center">
/{referral.tag}
</Paragraph>
<XStack f={1} ai="center" w="12%" jc="center" mb="0" gap="$2">
<Paragraph size="$5" lineHeight="$4" ta="center">
?
</Paragraph>
</XStack>
</XStack>
</AnimateEnter>
</Fragment>
)
})
})
}
}
})()}
<AnimateEnter>
{!isLoadingReferrals && (isFetchingNextPageReferrals || hasNextPage) ? (
<>
{isFetchingNextPageReferrals && <Spinner size="small" />}
{hasNextPage && (
<Button
onPress={() => {
fetchNextPage()
}}
disabled={isFetchingNextPageReferrals || isFetchingReferrals}
color="$color"
width={200}
mx="auto"
mb="$6"
>
Load More
</Button>
)}
</>
) : null}
</AnimateEnter>
</YStack>
</YStack>
)
}

const ReferralsHeader = () => (
<XStack gap="$1" ai="center">
<Paragraph w="12%" mb="0" size="$5" lineHeight="$4">
#
Expand All @@ -65,35 +202,23 @@ const HistoryHeader = () => (
</XStack>
)

const History = () => {
return (
<YStack f={1} width={'100%'} space="$4">
<XStack alignItems="center" width={'100%'} gap="$3">
<H3 fontWeight={'normal'}>Referrals</H3>
</XStack>
<YStack f={1} width={'100%'} p="$6" bg="$background" space="$4" br="$8">
<HistoryHeader />
<HistoryData />
</YStack>
</YStack>
)
const ReferralsListRow = () => {
return <YStack f={1} width={'100%'} space="$4" />
}

const HistoryData = () => {
const data = ['data1', 'data2', 'data3']
return data?.map((key) => (
<XStack key={key} gap="$1" ai="center">
<Paragraph w="12%" mb="0" size="$5" lineHeight="$4">
?
</Paragraph>
<Paragraph w="12%" f={1} mb="0" size="$5" lineHeight="$4" ta="center">
?
</Paragraph>
<XStack f={1} ai="center" w="12%" jc="center" mb="0" gap="$2">
<Paragraph size="$5" lineHeight="$4" ta="center">
?
</Paragraph>
</XStack>
</XStack>
))
function AnimateEnter({ children }: { children: React.ReactNode }) {
return (
<AnimatePresence>
<Stack
key="enter"
animateOnly={['transform', 'opacity']}
animation="200ms"
enterStyle={{ opacity: 0, scale: 0.9 }}
exitStyle={{ opacity: 0, scale: 0.95 }}
opacity={1}
>
{children}
</Stack>
</AnimatePresence>
)
}
1 change: 0 additions & 1 deletion packages/app/features/affiliate/utils/useAffiliateReferrals.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { useInfiniteQuery } from '@tanstack/react-query'
import { useSupabase } from 'app/utils/supabase/useSupabase'
import { throwIf } from 'app/utils/throwIf'

/**
/**
* Infinite query to fetch referrals
* @param pageSize - number of items to fetch per page
Expand Down

0 comments on commit ed01af7

Please sign in to comment.