From d032e0f6715bb0d2d1b62d2ec21dcbd64d02d217 Mon Sep 17 00:00:00 2001 From: Runjuu Date: Thu, 12 Jan 2023 21:43:30 -0800 Subject: [PATCH] feat: email users support (un)subscribe site --- src/components/common/CharacterCard.tsx | 2 +- src/components/common/FollowingButton.tsx | 30 ++++--- src/components/site/SiteHeader.tsx | 2 +- src/queries/site.ts | 95 ++++++++++------------- 4 files changed, 56 insertions(+), 73 deletions(-) diff --git a/src/components/common/CharacterCard.tsx b/src/components/common/CharacterCard.tsx index 670a85ec..b3f374ac 100644 --- a/src/components/common/CharacterCard.tsx +++ b/src/components/common/CharacterCard.tsx @@ -48,7 +48,7 @@ export const CharacterCard: React.FC<{ {!hideFollowButton && ( setButtonLoading?.(status)} /> diff --git a/src/components/common/FollowingButton.tsx b/src/components/common/FollowingButton.tsx index f84b1c8f..e2a44add 100644 --- a/src/components/common/FollowingButton.tsx +++ b/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(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) { diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx index b82a7d3c..3fd04b54 100644 --- a/src/components/site/SiteHeader.tsx +++ b/src/components/site/SiteHeader.tsx @@ -122,7 +122,7 @@ export const SiteHeader: React.FC<{
diff --git a/src/queries/site.ts b/src/queries/site.ts index 5263e405..fdcaba1e 100644 --- a/src/queries/site.ts +++ b/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 }) => {