Friends page (#1473)

Author: musidlo

apps/next/pages/account/affiliate.tsx

@@ -1,9 +1,13 @@
 import Head from 'next/head'
 import { userProtectedGetSSP } from 'utils/userProtected'
 import type { NextPageWithLayout } from '../_app'
-import { AffiliateScreen } from 'app/features/affiliate/screen'
 import { HomeLayout } from 'app/features/home/layout.web'
 import { TopNav } from 'app/components/TopNav'
+import { FriendsScreen } from '../../../../packages/app/features/affiliate/screen'
+import type { GetServerSidePropsContext } from 'next'
+import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
+import type { Database } from '@my/supabase/database.types'
+import { createSupabaseAdminClient } from '../../../../packages/app/utils/supabase/admin'
 
 export const Page: NextPageWithLayout = () => {
   return (
@@ -12,17 +16,51 @@ export const Page: NextPageWithLayout = () => {
         <title>Send | Friends</title>
         <meta name="description" content="View invited friends and track activity." key="desc" />
       </Head>
-      <AffiliateScreen />
+      <FriendsScreen />
     </>
   )
 }
 
-const subheader = 'View invited friends and track activity.'
+export const getServerSideProps = userProtectedGetSSP(
+  async (context: GetServerSidePropsContext) => {
+    const supabaseAdmin = createSupabaseAdminClient()
+    const supabase = createPagesServerClient<Database>(context)
+    const {
+      data: { session },
+    } = await supabase.auth.getSession()
 
-export const getServerSideProps = userProtectedGetSSP()
+    let count = 0
 
-Page.getLayout = (children) => (
-  <HomeLayout TopNav={<TopNav header="Friends" subheader={subheader} />}>{children}</HomeLayout>
+    const { count: friendsCount } = await supabase
+      .rpc('get_friends', {}, { count: 'exact', head: true })
+      .select('*')
+
+    if (friendsCount) {
+      count = friendsCount
+    }
+
+    if (session?.user.id) {
+      const { data: referrers } = await supabaseAdmin
+        .from('referrals')
+        .select('*')
+        .eq('referred_id', session?.user.id)
+
+      if (referrers && referrers.length > 0) {
+        count += 1
+      }
+    }
+
+    return {
+      props: {
+        count: count,
+      },
+    }
+  }
 )
 
+Page.getLayout = (children) => {
+  const header = children.props.count ? `Friends (${children.props.count})` : 'Friends'
+  return <HomeLayout TopNav={<TopNav header={header} />}>{children}</HomeLayout>
+}
+
 export default Page

packages/app/components/ReferralLink.tsx

@@ -10,12 +10,14 @@ import {
 } from '@my/ui'
 import { useUser } from 'app/utils/useUser'
 import { CheckCheck } from '@tamagui/lucide-icons'
-import { useEffect, useState } from 'react'
+import { type ReactNode, useEffect, useState } from 'react'
 import { IconCopy } from './icons'
 import * as Clipboard from 'expo-clipboard'
 import { useConfirmedTags } from 'app/utils/tags'
 
-export function ReferralLink(props: ButtonProps) {
+type ReferralLink = { label?: ReactNode } & ButtonProps
+
+export function ReferralLink({ label, ...props }: ReferralLink) {
   const { profile } = useUser()
   const send_id = profile?.send_id
   const tags = useConfirmedTags()
@@ -60,9 +62,11 @@ export function ReferralLink(props: ButtonProps) {
 
   return (
     <XStack ai={'center'} gap={'$2'} width={'100%'}>
-      <Paragraph size={'$5'} color={'$color10'} flexShrink={0}>
-        Referral Code:
-      </Paragraph>
+      {label || (
+        <Paragraph size={'$5'} color={'$color10'} flexShrink={0}>
+          Referral Code:
+        </Paragraph>
+      )}
       <Button
         chromeless
         flex={1}

packages/app/components/icons/IconBirthday.tsx

@@ -0,0 +1,26 @@
+import type { ColorTokens } from '@my/ui'
+import { type IconProps, themed } from '@tamagui/helpers-icon'
+import { memo } from 'react'
+import { Path, Svg } from 'react-native-svg'
+
+const Birthday = (props) => {
+  const { size, color, ...rest } = props
+  return (
+    <Svg
+      color={color as ColorTokens | undefined}
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      {...rest}
+    >
+      <Path
+        fill="currentColor"
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        d="M12 5.9987C12.5101 5.99867 13.001 6.19358 13.3722 6.54355C13.7433 6.89353 13.9667 7.3721 13.9967 7.88136L14 7.9987V9.9987C14 10.4254 13.7473 10.758 13.412 10.91L13.3333 10.9414V13.332C13.3334 13.6684 13.2064 13.9924 12.9777 14.2391C12.7489 14.4857 12.4354 14.6368 12.1 14.662L12 14.6654H4C3.66362 14.6655 3.33962 14.5384 3.09297 14.3097C2.84631 14.081 2.69523 13.7675 2.67 13.432L2.66667 13.332V10.942C2.48673 10.8793 2.32865 10.7661 2.21127 10.616C2.09389 10.4658 2.02217 10.2851 2.00467 10.0954L2 9.9987V7.9987C1.99997 7.48856 2.19488 6.99769 2.54486 6.62652C2.89483 6.25536 3.3734 6.03196 3.88267 6.00203L4 5.9987H12ZM11.9553 10.4654C11.8519 10.3878 11.7282 10.3419 11.5991 10.3334C11.4701 10.3249 11.3414 10.354 11.2287 10.4174L11.1553 10.4654L10.978 10.5987C10.6509 10.8442 10.2563 10.9835 9.84757 10.9978C9.43881 11.0121 9.0355 10.9007 8.692 10.6787L8.578 10.5987L8.4 10.4654C8.29658 10.3878 8.17282 10.3419 8.0438 10.3334C7.91478 10.3249 7.78606 10.354 7.67333 10.4174L7.6 10.4654L7.422 10.5987C7.09492 10.844 6.70051 10.9832 6.29189 10.9975C5.88328 11.0118 5.4801 10.9006 5.13667 10.6787L5.022 10.5987L4.84467 10.4654C4.74125 10.3878 4.61749 10.3419 4.48847 10.3334C4.35945 10.3249 4.23073 10.354 4.118 10.4174L4.04467 10.4654L4 10.4987V13.332H12V10.4987L11.9553 10.4654ZM12 7.33203H4C3.82319 7.33203 3.65362 7.40227 3.5286 7.52729C3.40357 7.65232 3.33333 7.82189 3.33333 7.9987V9.33536C3.67773 9.1053 4.08506 8.98783 4.49908 8.99917C4.9131 9.01052 5.31338 9.15012 5.64467 9.3987L5.822 9.53203C5.9374 9.61858 6.07775 9.66536 6.222 9.66536C6.36625 9.66536 6.5066 9.61858 6.622 9.53203L6.8 9.3987C7.14619 9.13905 7.56726 8.9987 8 8.9987C8.43274 8.9987 8.85381 9.13905 9.2 9.3987L9.378 9.53203C9.4934 9.61858 9.63375 9.66536 9.778 9.66536C9.92225 9.66536 10.0626 9.61858 10.178 9.53203L10.3553 9.3987C10.6866 9.15012 11.0869 9.01052 11.5009 8.99917C11.9149 8.98783 12.3223 9.1053 12.6667 9.33536V7.9987C12.6667 7.82189 12.5964 7.65232 12.4714 7.52729C12.3464 7.40227 12.1768 7.33203 12 7.33203ZM8.4 1.46536C8.67525 1.68107 8.93111 1.92043 9.16467 2.1807C9.514 2.57336 10 3.23536 10 3.9987C10 4.52913 9.78929 5.03784 9.41421 5.41291C9.03914 5.78798 8.53043 5.9987 8 5.9987C7.46957 5.9987 6.96086 5.78798 6.58579 5.41291C6.21071 5.03784 6 4.52913 6 3.9987C6 3.23536 6.48667 2.57336 6.83533 2.1807C7.06889 1.92043 7.32475 1.68107 7.6 1.46536C7.7154 1.37882 7.85575 1.33203 8 1.33203C8.14425 1.33203 8.2846 1.37882 8.4 1.46536ZM8 2.88803C7.94196 2.94585 7.88571 3.00543 7.83133 3.0667C7.514 3.42403 7.33333 3.76203 7.33333 3.9987C7.33333 4.17551 7.40357 4.34508 7.5286 4.4701C7.65362 4.59513 7.82319 4.66536 8 4.66536C8.17681 4.66536 8.34638 4.59513 8.4714 4.4701C8.59643 4.34508 8.66667 4.17551 8.66667 3.9987C8.66667 3.76203 8.48667 3.42403 8.16867 3.0667C8.11429 3.00543 8.05804 2.94585 8 2.88803Z"
+      />
+    </Svg>
+  )
+}
+const IconBirthday = memo<IconProps>(themed(Birthday))
+export { IconBirthday }

packages/app/components/icons/index.tsx

@@ -79,3 +79,4 @@ export { IconStacks } from './IconStack'
 export { IconSendSingleLetter } from './IconSendSingleLetter'
 export { IconCoin } from './IconCoin'
 export { IconWithdraw } from './IconWithdraw'
+export { IconBirthday } from './IconBirthday'