Use functions instead of views in affiliate hooks

apps/next/pages/account/affiliate.tsx

@@ -12,7 +12,7 @@ export const Page: NextPageWithLayout = () => {
         <title>Send | Affiliates</title>
         <meta
           name="description"
-          content="View your network, track your score, and see your referrals activity."
+          content="View your network and track referral activity."
           key="desc"
         />
       </Head>
@@ -21,7 +21,7 @@ export const Page: NextPageWithLayout = () => {
   )
 }
 
-const subheader = 'View your network, track your score, and see your referrals activity.'
+const subheader = 'View your network and track referral activity.'
 
 export const getServerSideProps = userProtectedGetSSP()
 

packages/app/features/affiliate/screen.tsx

@@ -16,10 +16,7 @@ import {
 } from '@my/ui'
 
 import { useAffiliateReferrals } from './utils/useAffiliateReferrals'
-
 import { Fragment } from 'react'
-
-import formatAmount from 'app/utils/formatAmount'
 import { useAffiliateStats } from './utils/useAffiliateStats'
 
 export const AffiliateScreen = () => {
@@ -136,7 +133,7 @@ const ReferralsList = () => {
             </Paragraph>
           )}
           {pages?.map((referrals) => {
-            return referrals?.map(({ referral }) => {
+            return referrals?.map((referral) => {
               if (!referral) return null
               return (
                 <Fragment key={`${referral.referred_id}-${referral.tag}`}>

packages/app/features/affiliate/utils/useAffiliateReferrals.ts

@@ -11,7 +11,7 @@ export function useAffiliateReferrals({ pageSize = 10 }: { pageSize?: number } =
   async function fetchAffiliateReferrals({ pageParam }: { pageParam: number }) {
     const from = pageParam * pageSize
     const to = (pageParam + 1) * pageSize - 1
-    const request = supabase.from('affiliate_referrals').select('*').range(from, to)
+    const request = supabase.rpc('get_affiliate_referrals').select('*').range(from, to)
     const { data, error } = await request
     throwIf(error)
     return data

packages/app/features/affiliate/utils/useAffiliateStats.ts

@@ -1,10 +1,13 @@
+import type { Functions } from '@my/supabase/database.types'
 import { useQuery } from '@tanstack/react-query'
 import { useSupabase } from 'app/utils/supabase/useSupabase'
 
 export function useAffiliateStats() {
   const supabase = useSupabase()
-  async function fetchAffiliateStats() {
-    const request = supabase.from('affiliate_stats_summary').select('*').single()
+  async function fetchAffiliateStats(): Promise<
+    Functions<'get_affiliate_stats_summary'>[number] | null
+  > {
+    const request = supabase.rpc('get_affiliate_stats_summary').select('*').single()
 
     const { data, error } = await request
     if (error) {

supabase/database-generated.types.ts

@@ -1256,6 +1256,28 @@ export type Database = {
         Args: Record<PropertyKey, never>
         Returns: string
       }
+      get_affiliate_referrals: {
+        Args: Record<PropertyKey, never>
+        Returns: {
+          referred_id: string
+          send_plus_minus: number
+          avatar_url: string
+          tag: string
+          created_at: string
+        }[]
+      }
+      get_affiliate_stats_summary: {
+        Args: Record<PropertyKey, never>
+        Returns: {
+          id: string
+          created_at: string
+          user_id: string
+          send_plus_minus: number
+          referral_count: number
+          network_plus_minus: number
+          affiliate_send_score: number
+        }[]
+      }
       insert_challenge: {
         Args: Record<PropertyKey, never>
         Returns: {