fix: get referral and settings pages looking right

storacha · Nov 6, 2024 · 66e1026 · 66e1026
1 parent 741eb78
commit 66e1026
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 68 deletions.
diff --git a/src/app/referrals/page.tsx b/src/app/referrals/page.tsx
@@ -1,47 +1,12 @@
 'use client'
 
-import { useState } from 'react'
-import { createRefcode } from "@/lib/referrals"
-import useSWR from "swr"
-import { useW3 } from "@w3ui/react"
 import CopyButton from '@/components/CopyButton'
-import { LoaderIcon } from 'react-hot-toast'
 import DefaultLoader from '@/components/Loader'
+import { H1, H3 } from '@/components/Text'
+import { useReferrals } from '@/lib/hooks'
 
 export const runtime = "edge"
 
-const fetcher = (url: string): any => fetch(url).then((res) => res.json());
-
-interface RefcodeResult {
-  refcode: string
-}
-
-interface Referral {
-  referredAt: string
-  reward: boolean
-}
-
-interface ReferralsResult {
-  referrals: Referral[]
-}
-
-function useReferrals () {
-  const [{ accounts }] = useW3()
-  const account = accounts[0]
-  const accountEmail = account?.toEmail()
-  const [referrerEmail, setReferrerEmail] = useState<string>()
-  const email = accountEmail || referrerEmail
-  const { data: refcodeResult, mutate: mutateRefcode } = useSWR<RefcodeResult>(email && `/referrals/refcode/${encodeURIComponent(email)}`, fetcher)
-  const refcode = refcodeResult?.refcode
-  const { data: referralsResult } = useSWR<ReferralsResult>(refcode && `/referrals/list/${refcode}`, fetcher)
-  const referrals = referralsResult?.referrals
-  const referralLink = refcode && `${location.protocol}//${location.host}/?refcode=${refcode}`
-  return {
-    referrerEmail, setReferrerEmail, accountEmail, email,
-    refcode, createRefcode, mutateRefcode, referrals, referralLink
-  }
-}
-
 export function RefcodeCreator () {
   const { accountEmail, createRefcode, mutateRefcode, setReferrerEmail } = useReferrals()
 
@@ -88,8 +53,8 @@ export function RefcodeLink () {
   const { referralLink } = useReferrals()
   if (referralLink) {
     return (
-      <div className="border border-hot-red rounded-full px-4 py-2">
-        {referralLink}
+      <div className="border border-hot-red rounded-full px-4 py-2 flex flex-row justify-between items-center">
+        <div>{referralLink}</div>
         <CopyButton text={referralLink} />
       </div>
     )
@@ -98,31 +63,58 @@ export function RefcodeLink () {
   }
 }
 
-export default function ReferralsPage () {
-  const { refcode, referrals } = useReferrals()
-
+export function ReferralsList () {
+  const { referrals } = useReferrals()
   return (
-    <div className='flex flex-col justify-center p-10'>
-      <h3 className='text-xl pb-4'>Create a Referral Link</h3>
-      <p className='pb-4'>
-        When you refer new Storacha users you get free storage and loyalty points!
-      </p>
-      {refcode ? (
-        <>
-          <h3 className="text-xl">Referral link</h3>
-          <RefcodeLink />
-          <h3 className="text-xl">Referrals</h3>
-          {referrals && (referrals.length > 0) ? (
+    (referrals && referrals.length > 0) ? (
+      <>
+        <H3>Referrals</H3>
+        <div className="divide-solid divide-hot-red py-4">
+          {
+            /**
+             * TODO: once we can determine when a user signed up and what plan they signed up for, update
+             * this UI to differentiate between them with different names and give users a countdown timer
+             * in the lozenge.
+             */
             referrals.map((referral, i) =>
-              <p key={i}>
-                Referred at: {referral.referredAt} | Rewarded: {referral.reward}
-              </p>
+              <div key={i} className="flex flex-row justify-between items-center py-4">
+                <div>Referred Racha</div>
+                <div className="rounded-full bg-hot-red-light text-hot-red px-4 py-2 font-mono text-sm">In Progress</div>
+              </div>
             )
-          ) : (
-            <p>You do not have any referrals</p>
-          )}
-        </>
-      ) : <RefcodeCreator />}
+          }
+        </div>
+      </>
+    ) : (
+      <>
+        <H3>Earn Free Storage and Racha Points!</H3>
+        <p className='text-hot-red mb-4'>
+          Turn your friends into Lite of Business Rachas and receive up to 16 months of Lite or
+          3 months of Business for free! You can also earn Racha Points. Here you can learn more
+          about the <a href="#TODONeedLink">details of the program</a>.
+        </p>
+      </>
+    )
+  )
+}
+
+export default function ReferralsPage () {
+  const { refcodeIsLoading } = useReferrals()
+
+  return (
+    <div className='p-10 bg-racha-fire/50 w-full h-screen'>
+      <H1>Generate a Referral Code</H1>
+      <div className='border border-hot-red rounded-2xl bg-white p-5'>
+        {refcodeIsLoading ? (
+          <DefaultLoader className="text-hot-red h-6 w-6" />
+        ) : (
+          <>
+            <ReferralsList />
+            <RefcodeLink />
+          </>
+        )
+        }
+      </div>
     </div >
   )
 }
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
@@ -8,7 +8,7 @@ import { SettingsNav } from './layout'
 import { H1, H2, H3 } from '@/components/Text'
 import { GB, TB, filesize } from '@/lib'
 import DefaultLoader from '@/components/Loader'
-import { RefcodeLink } from '../referrals/page'
+import { RefcodeLink, ReferralsList } from '../referrals/page'
 
 const Plans: Record<`did:${string}`, { name: string, limit: number }> = {
   'did:web:starter.web3.storage': { name: 'Starter', limit: 5 * GB },
@@ -89,12 +89,7 @@ export default function SettingsPage (): JSX.Element {
         </div>
       </div>
       <div className='border border-hot-red rounded-2xl bg-white p-5 max-w-4xl mb-4'>
-        <H3>Earn Free Storage and Racha Points!</H3>
-        <p className='text-hot-red mb-4'>
-          Turn your friends into Lite of Business Rachas and receive up to 16 months of Lite or
-          3 months of Business for free! You can also earn Racha Points. Here you can learn more
-          about the <a href="#TODONeedLink">details of the program</a>.
-        </p>
+        <ReferralsList />
         <RefcodeLink />
       </div>
       <div className='border border-hot-red rounded-2xl bg-white p-5 max-w-4xl'>

diff --git a/src/lib/hooks.ts b/src/lib/hooks.ts
@@ -0,0 +1,38 @@
+'use client'
+import { useState } from 'react'
+import useSWR from "swr"
+import { useW3 } from "@w3ui/react"
+import { createRefcode } from './referrals'
+
+interface RefcodeResult {
+  refcode: string
+}
+
+interface Referral {
+  referredAt: string
+  reward: boolean
+}
+
+interface ReferralsResult {
+  referrals: Referral[]
+}
+
+const fetcher = (url: string): any => fetch(url).then((res) => res.json())
+
+export function useReferrals () {
+  const [{ accounts }] = useW3()
+  const account = accounts[0]
+  const accountEmail = account?.toEmail()
+  const [referrerEmail, setReferrerEmail] = useState<string>()
+  const email = accountEmail || referrerEmail
+  const { data: refcodeResult, mutate: mutateRefcode, isLoading: refcodeIsLoading } = useSWR<RefcodeResult>(email && `/referrals/refcode/${encodeURIComponent(email)}`, fetcher)
+  const refcode = refcodeResult?.refcode
+  const { data: referralsResult, isLoading: referralsAreLoading } = useSWR<ReferralsResult>(refcode && `/referrals/list/${refcode}`, fetcher)
+  const referrals = referralsResult?.referrals
+  const referralLink = refcode && `${location.protocol}//${location.host}/?refcode=${refcode}`
+  return {
+    refcodeIsLoading, referralsAreLoading,
+    referrerEmail, setReferrerEmail, accountEmail, email,
+    refcode, createRefcode, mutateRefcode, referrals, referralLink
+  }
+}