perf(pricing): migrate pricing page to rsc

src/app/pricing/content.tsx

@@ -1,37 +1,37 @@
 'use client'
-import { Button, Divider } from '@mantine/core'
+import { Button } from '@mantine/core'
 import { useQuery } from '@tanstack/react-query'
 import Link from 'next/link'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useSelector } from 'react-redux'
 import FreePlanFeatures from '../../components/pricing/free-plan-features'
 import PlanCard from '../../components/pricing/plan-card'
 import PremiumPlanFeatures from '../../components/pricing/premium-plan-features'
 import { StripePremiumPriceId } from '../../constants/config'
-import { useProfileQuery } from '../../schema/generated'
+import { ProfileDocument, ProfileQuery, ProfileQueryVariables } from '../../schema/generated'
 import { getPaymentSubscription } from '../../services/payment'
-import { TGlobalStore } from '../../store'
+import { useSuspenseQuery } from '@apollo/experimental-nextjs-app-support/ssr'
+import { skipToken } from '@apollo/client'
 
 type PricingContentProps = {
+  uid?: number
 }
 
 function PricingContent(props: PricingContentProps) {
+  const { uid } = props
   const { t } = useTranslation();
 
-  const pid = useSelector<TGlobalStore, number>(s => s.user.profile.id)
   const { data, isLoading } = useQuery({
     queryKey: ['payment-subscription', StripePremiumPriceId],
     queryFn: () => getPaymentSubscription(StripePremiumPriceId),
-    enabled: pid > 0,
+    enabled: Boolean(uid && uid > 0),
   })
 
-  const { data: p } = useProfileQuery({
+  const { data: p } = useSuspenseQuery<ProfileQuery, ProfileQueryVariables>(ProfileDocument, uid && uid > 0 ? {
     variables: {
-      id: pid
-    },
-    skip: pid < 1,
-  })
+      id: uid
+    }
+  } : skipToken)
 
   const isPremium = useMemo(() => {
     const endAt = p?.me.premiumEndAt

src/app/pricing/page.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { metadata as pricingMetadata } from '../../components/og/og-with-pricing'
 import PricingContent from './content'
 import { Metadata } from 'next'
+import { cookies } from 'next/headers'
 
 type PricingPageProps = {
 }
@@ -11,8 +12,10 @@ export const metadata: Metadata = {
 }
 
 function PricingPage(props: PricingPageProps) {
+  const cs = cookies()
+  const uid = cs.get('uid')?.value
   return (
-    <PricingContent />
+    <PricingContent uid={uid ? ~~uid : undefined} />
   )
 }
 

src/components/auth.metamask.tsx

@@ -1,13 +1,10 @@
 'use client';
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback } from 'react'
 import { toast } from 'react-hot-toast'
 import { useAuthBy3rdPartSuccessed } from '../hooks/hooks'
 import { signDataByWeb3 } from '../utils/wallet'
 import MetamaskLogo from './icons/metamask.logo.svg'
 import { useRouter } from 'next/navigation'
-import LoadingIcon from './icons/loading.svg'
-import WithLoading from './with-loading'
-import { isMobile } from '../utils/device'
 import { useAuthByWeb3LazyQuery } from '../schema/generated'
 import { Button } from '@mantine/core';
 
@@ -19,26 +16,26 @@ function AuthByMetamask(props: AuthByMetamaskProps) {
   const [doAuth, doAuthData] = useAuthByWeb3LazyQuery()
   // const err = hooks.useError()
   const onMetamaskLogin = useCallback(async () => {
-    return signDataByWeb3()
-      .then(res => {
-        return doAuth({
-          variables: {
-            payload: {
-              address: res.address!,
-              signature: res.signature!,
-              text: res.text
-            }
-          }
-        }).then(r => {
-          if (r.data?.loginByWeb3.noAccountFrom3rdPart) {
-            router.push(`/auth/callback/metamask?a=${res.address}&s=${res.signature}&t=${encodeURIComponent(res.text)}`)
-            return
+    try {
+
+      const res = await signDataByWeb3()
+      const r = await doAuth({
+        variables: {
+          payload: {
+            address: res.address!,
+            signature: res.signature!,
+            text: res.text
           }
-        })
-      }).catch((err: any) => {
-        toast.error(err.message)
+        }
       })
-  }, [])
+      if (r.data?.loginByWeb3.noAccountFrom3rdPart) {
+        router.push(`/auth/callback/metamask?a=${res.address}&s=${res.signature}&t=${encodeURIComponent(res.text)}`)
+        return
+      }
+    } catch (err: any) {
+      toast.error(err.message)
+    }
+  }, [doAuth, router])
 
   // useEffect(() => {
   //   // if (!err) {