feat: email users support (un)subscribe site

src/components/common/CharacterCard.tsx

@@ -48,7 +48,7 @@ export const CharacterCard: React.FC<{
             <Avatar images={site?.avatars || []} name={site?.name} size={45} />
             {!hideFollowButton && (
               <FollowingButton
-                siteId={site.username}
+                site={site}
                 size="sm"
                 loadingStatusChange={(status) => setButtonLoading?.(status)}
               />

src/components/common/FollowingButton.tsx

@@ -3,7 +3,6 @@ import { SITE_URL } from "~/lib/env"
 import { Button } from "~/components/ui/Button"
 import type { Variant } from "~/components/ui/Button"
 import { useEffect, useState } from "react"
-import toast from "react-hot-toast"
 import {
   useGetSubscription,
   useSubscribeToSite,
@@ -12,14 +11,15 @@ import {
 } from "~/queries/site"
 import { useAccountState, useConnectModal } from "@crossbell/connect-kit"
 import clsx from "clsx"
+import { Profile } from "~/lib/types"
 
 export const FollowingButton: React.FC<{
-  siteId?: string
+  site: Profile | undefined | null
   variant?: Variant
   className?: string
   size?: "sm" | "xl"
   loadingStatusChange?: (status: boolean) => void
-}> = ({ siteId, variant, className, size, loadingStatusChange }) => {
+}> = ({ site, variant, className, size, loadingStatusChange }) => {
   const account = useAccountState((s) => s.computed.account)
   const subscribeToSite = useSubscribeToSite()
   const unsubscribeFromSite = useUnsubscribeFromSite()
@@ -27,6 +27,7 @@ export const FollowingButton: React.FC<{
   const [followProgress, setFollowProgress] = useState<boolean>(false)
   const userSite = useAccountSites()
   const router = useRouter()
+  const characterId = site?.metadata?.proof ? Number(site.metadata.proof) : null
 
   const handleClickSubscribe = async (e: any) => {
     e.preventDefault()
@@ -35,30 +36,30 @@ export const FollowingButton: React.FC<{
       openConnectModal?.()
     } else if (!userSite.data) {
       router.push(`${SITE_URL}/dashboard/new-site`)
-    } else if (siteId) {
+    } else if (characterId) {
       if (subscription.data) {
-        unsubscribeFromSite.mutate({ siteId })
+        unsubscribeFromSite.mutate({ characterId })
       } else {
-        subscribeToSite.mutate({ siteId })
+        subscribeToSite.mutate({ characterId })
       }
     }
   }
 
-  const subscription = useGetSubscription(siteId)
+  const subscription = useGetSubscription(site?.username)
 
   useEffect(() => {
     if (
       followProgress &&
       account &&
       subscription.isSuccess &&
-      siteId &&
+      characterId &&
       userSite.isSuccess
     ) {
       if (!userSite.data) {
         router.push(`${SITE_URL}/dashboard/new-site`)
       }
       if (!subscription.data) {
-        subscribeToSite.mutate({ siteId })
+        subscribeToSite.mutate({ characterId })
       }
       setFollowProgress(false)
     }
@@ -70,20 +71,15 @@ export const FollowingButton: React.FC<{
     account,
     subscription.isSuccess,
     subscription.data,
-    siteId,
+    characterId,
     subscribeToSite,
   ])
 
   useEffect(() => {
-    if (subscribeToSite.isError || subscribeToSite.data?.code) {
-      toast.error(
-        "Failed to follow: " +
-          (subscribeToSite.data?.message ||
-            (subscribeToSite.error as any)?.message),
-      )
+    if (subscribeToSite.isError) {
       subscribeToSite.reset()
     }
-  }, [subscribeToSite.isError, subscribeToSite.data?.code, subscribeToSite])
+  }, [subscribeToSite])
 
   useEffect(() => {
     if (unsubscribeFromSite.isLoading || subscribeToSite.isLoading) {

src/components/site/SiteHeader.tsx

@@ -122,7 +122,7 @@ export const SiteHeader: React.FC<{
               <div className="xlog-site-others text-sm">
                 <FollowingCount siteId={site?.username} />
                 <FollowingButton
-                  siteId={site?.username}
+                  site={site}
                   className="text-accent mr-5 min-[438px]:mx-5"
                   variant="text"
                 />

src/queries/site.ts

@@ -1,6 +1,11 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
 import { useContract } from "@crossbell/contract"
-import { useAccountState, useFollowCharacters } from "@crossbell/connect-kit"
+import {
+  useAccountState,
+  useFollowCharacter,
+  useFollowCharacters,
+  useUnfollowCharacter,
+} from "@crossbell/connect-kit"
 
 import * as siteModel from "~/models/site.model"
 import { useUnidata } from "./unidata"
@@ -113,33 +118,23 @@ export function useCreateSite() {
 }
 
 export function useSubscribeToSite() {
-  const unidata = useUnidata()
   const queryClient = useQueryClient()
   const account = useAccountState((s) => s.computed.account)
 
-  return useMutation(
-    async ({ siteId }: { siteId: string }) => {
-      if (account?.type === "wallet") {
-        // FIXME: - Support email users
-        return siteModel.subscribeToSite(
-          { siteId, userId: account.address },
-          unidata,
-        )
-      }
-    },
-    {
-      onSuccess: (data, { siteId }) =>
-        Promise.all([
-          queryClient.invalidateQueries(["useGetSiteSubscriptions", siteId]),
+  return useFollowCharacter({
+    onSuccess: (data, { characterId }) => {
+      const siteId = `${characterId}`
+      return Promise.all([
+        queryClient.invalidateQueries(["useGetSiteSubscriptions", siteId]),
 
-          queryClient.invalidateQueries([
-            "getSubscription",
-            siteId,
-            account?.characterId,
-          ]),
+        queryClient.invalidateQueries([
+          "getSubscription",
+          siteId,
+          account?.characterId,
         ]),
+      ])
     },
-  )
+  })
 }
 
 export function useSubscribeToSites() {
@@ -151,49 +146,41 @@ export function useSubscribeToSites() {
   return useFollowCharacters({
     onSuccess: (_, { characterIds = [] }) =>
       Promise.all(
-        characterIds.flatMap((characterId) => [
-          queryClient.invalidateQueries([
-            "useGetSiteSubscriptions",
-            characterId,
-          ]),
+        characterIds.flatMap((characterId) => {
+          const siteId = `${characterId}`
 
-          queryClient.invalidateQueries([
-            "getSubscription",
-            characterId,
-            currentCharacterId,
-          ]),
-        ]),
+          return [
+            queryClient.invalidateQueries(["useGetSiteSubscriptions", siteId]),
+
+            queryClient.invalidateQueries([
+              "getSubscription",
+              siteId,
+              currentCharacterId,
+            ]),
+          ]
+        }),
       ),
   })
 }
 
 export function useUnsubscribeFromSite() {
-  const unidata = useUnidata()
   const queryClient = useQueryClient()
   const account = useAccountState((s) => s.computed.account)
 
-  return useMutation(
-    async ({ siteId }: { siteId: string }) => {
-      if (account?.type === "wallet") {
-        // FIXME: - Support email users
-        return siteModel.unsubscribeFromSite(
-          { siteId, userId: account.address },
-          unidata,
-        )
-      }
-    },
-    {
-      onSuccess: (data, { siteId }) =>
-        Promise.all([
-          queryClient.invalidateQueries(["useGetSiteSubscriptions", siteId]),
-          queryClient.invalidateQueries([
-            "getSubscription",
-            siteId,
-            account?.characterId,
-          ]),
+  return useUnfollowCharacter({
+    onSuccess: (data, { characterId }) => {
+      const siteId = `${characterId}`
+
+      return Promise.all([
+        queryClient.invalidateQueries(["useGetSiteSubscriptions", siteId]),
+        queryClient.invalidateQueries([
+          "getSubscription",
+          siteId,
+          account?.characterId,
         ]),
+      ])
     },
-  )
+  })
 }
 
 export const useGetNotifications = (data: { siteCId?: string }) => {