update referral endpoint (#1130)

packages/web-app/src/modules/account-views/referral-views/ReferralListContainer.tsx

@@ -3,7 +3,7 @@ import type { RootStore } from '../../../Store'
 import { ReferralList } from './components/ReferralList'
 
 const mapStoreToProps = (store: RootStore): any => ({
-  referrals: store.referral.referrals,
+  latestReferrals: store.referral.referralsReport?.latestReferrals,
 })
 
 export const ReferralListContainer = connect(mapStoreToProps, ReferralList)

packages/web-app/src/modules/account-views/referral-views/ReferralStatsContainer.tsx

@@ -3,8 +3,8 @@ import type { RootStore } from '../../../Store'
 import { ReferralStats } from './components/ReferralStats'
 
 const mapStoreToProps = (store: RootStore): any => ({
-  totalEarned: store.referral.totalEarned,
-  potentialEarned: store.referral.potentialEarnings,
+  totalEarned: store.referral.referralsReport?.totalEarned,
+  potentialEarned: store.referral.referralsReport?.potentialEarnings,
 })
 
 export const ReferralStatsContainer = connect(mapStoreToProps, ReferralStats)

packages/web-app/src/modules/account-views/referral-views/components/ReferralList.tsx

@@ -1,5 +1,4 @@
-import type { ReactNode } from 'react'
-import { Component } from 'react'
+import type { FC } from 'react'
 import Scrollbars from 'react-custom-scrollbars-2'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
@@ -13,32 +12,29 @@ const styles = {
     height: '100%',
   },
   content: {
-    // padding: 20,
     paddingBottom: 50,
   },
 }
 
 interface Props extends WithStyles<typeof styles> {
-  referrals?: Referral[]
+  latestReferrals?: Referral[]
 }
 
-class _ReferralList extends Component<Props> {
-  public override render(): ReactNode {
-    const { referrals, classes } = this.props
-
-    let hasReferrals = referrals && referrals.length !== 0
-    return (
-      <div className={classes.container}>
-        <SectionHeader>Who you referred</SectionHeader>
-        {!hasReferrals && <P>No one has entered your code yet. Send it to your friends now!</P>}
-        {hasReferrals && (
-          <Scrollbars>
-            <div className={classes.content}>{referrals && referrals.map((x) => <ReferralItem referral={x} />)}</div>
-          </Scrollbars>
-        )}
-      </div>
-    )
-  }
+const _ReferralList: FC<Props> = ({ classes, latestReferrals }) => {
+  let hasReferrals = latestReferrals && latestReferrals.length !== 0
+  return (
+    <div className={classes.container}>
+      <SectionHeader>Who you referred</SectionHeader>
+      {!hasReferrals && <P>No one has entered your code yet. Send it to your friends now!</P>}
+      {hasReferrals && (
+        <Scrollbars>
+          <div className={classes.content}>
+            {latestReferrals && latestReferrals.map((x) => <ReferralItem referral={x} />)}
+          </div>
+        </Scrollbars>
+      )}
+    </div>
+  )
 }
 
 export const ReferralList = withStyles(styles)(_ReferralList)

packages/web-app/src/modules/referral/ReferralStore.tsx

@@ -1,17 +1,15 @@
 import type { AxiosInstance, AxiosResponse } from 'axios'
 import Axios from 'axios'
-import { action, computed, flow, observable } from 'mobx'
+import { action, flow, observable } from 'mobx'
 import type { RootStore } from '../../Store'
 import type { NotificationMessage } from '../notifications/models'
 import { NotificationMessageCategory } from '../notifications/models'
-import type { Referral } from './models'
-import { completed, percentComplete } from './models'
-import { maximumReferrerBonus } from './models/ReferralDefinition'
+import type { Referral, ReferralsReport } from './models'
 
 export class ReferralStore {
   /** A collection of all referrals that this user referred */
   @observable
-  public referrals: Referral[] = []
+  public referralsReport: ReferralsReport | undefined
 
   /** The referral that the current user entered. Undefined if the user hasn't entered a code yet */
   @observable
@@ -36,69 +34,14 @@ export class ReferralStore {
   @observable
   public errorMessage?: string = undefined
 
-  /** Total number of referrals */
-  @computed
-  get totalCount(): number {
-    return this.referrals.length
-  }
-
-  /** The number of referrals that have been completed */
-  @computed
-  get completedReferrals(): Referral[] {
-    return this.referrals.filter((x) => completed(x))
-  }
-
-  /** The number of referrals that have been completed */
-  @computed
-  get completedCount(): number {
-    return this.completedReferrals.length
-  }
-
-  /** The number of referrals that are still pending */
-  @computed
-  get pendingCount(): number {
-    return this.totalCount - this.completedCount
-  }
-
-  /** The total amount the user has earned from referrals ($) */
-  @computed
-  get totalEarned(): number {
-    let sum = 0
-
-    this.referrals.forEach((x) => {
-      if (x && x.referralDefinition) {
-        sum += x.earnedBalance * x.referralDefinition.referrerBonus
-      }
-    })
-
-    return sum
-  }
-
-  /** The total amount the user could earn if all referrals were to be completed ($) */
-  @computed
-  get potentialEarnings(): number {
-    let sum = 0
-
-    if (this.referrals && this.referrals.length > 0) {
-      this.referrals.forEach((x) => {
-        if (x && x.referralDefinition) {
-          sum += maximumReferrerBonus(x.referralDefinition) - x.earnedBalance * x.referralDefinition.referrerBonus
-        }
-      })
-    }
-
-    return sum
-  }
-
   constructor(private readonly store: RootStore, private readonly axios: AxiosInstance) {}
 
   /** (Re)Loads all referrals */
   @action.bound
   loadReferrals = flow(function* (this: ReferralStore) {
     try {
-      let res = yield this.axios.get('/api/v1/profile/referrals')
-      const referrals = res.data as Referral[]
-      this.referrals = referrals.sort((a: Referral, b: Referral) => percentComplete(a) - percentComplete(b))
+      let res = yield this.axios.get('/api/v2/referrals/report')
+      this.referralsReport = res.data
     } catch (error) {
       console.error(error)
       throw error

packages/web-app/src/modules/referral/models/Referral.tsx

@@ -7,7 +7,14 @@ export interface Referral {
   code: string
   earnedBalance: number
   referralDefinition?: ReferralDefinition
-  // dateEntered TODO:
+}
+
+export interface ReferralsReport {
+  latestReferrals: Referral[]
+  potentialEarnings: number
+  referralsCount: number
+  totalEarned: number
+  updatedAt: string
 }
 
 export const completed = (referral: Referral): boolean => {