feat: following button

Author: DIYgod

src/components/FollowingButton.tsx

@@ -0,0 +1,115 @@
+import { useRouter } from "next/router"
+import { Button } from "~/components/ui/Button"
+import type { Variant } from "~/components/ui/Button"
+import { useAccount } from "wagmi"
+import { useEffect, useState } from "react"
+import {
+  useGetLinks,
+  useLinkCharacter,
+  useUnlinkCharacter,
+  useGetCharacters,
+} from "~/queries/character"
+import { useConnectModal } from "@rainbow-me/rainbowkit"
+import clsx from "clsx"
+import { BellIcon } from "@heroicons/react/24/solid"
+
+export const FollowingButton: React.FC<{
+  characterId?: number
+  variant?: Variant
+  className?: string
+  size?: "sm" | "xl"
+}> = ({ characterId, variant, className, size }) => {
+  const { address } = useAccount()
+  const linkCharacter = useLinkCharacter()
+  const unlinkCharacter = useUnlinkCharacter()
+  const { openConnectModal } = useConnectModal()
+  const [followProgress, setFollowProgress] = useState<boolean>(false)
+  const userCharacters = useGetCharacters(address, true)
+  const router = useRouter()
+
+  const backlinks = useGetLinks(
+    userCharacters.data?.list[0].characterId,
+    characterId,
+  )
+
+  const handleClickSubscribe = async (e: any) => {
+    e.preventDefault()
+    if (!address) {
+      setFollowProgress(true)
+      openConnectModal?.()
+    } else if (!userCharacters.data?.count) {
+      router.push("/new")
+    } else if (characterId) {
+      if (backlinks.data?.count) {
+        unlinkCharacter.mutate({
+          fromCharacterId: userCharacters.data?.list[0].characterId,
+          toCharacterId: characterId,
+        })
+      } else {
+        linkCharacter.mutate({
+          fromCharacterId: userCharacters.data?.list[0].characterId,
+          toCharacterId: characterId,
+        })
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (
+      followProgress &&
+      address &&
+      backlinks.isSuccess &&
+      characterId &&
+      userCharacters.isSuccess
+    ) {
+      if (!userCharacters.data?.count) {
+        router.push("/new")
+      }
+      if (!backlinks.data?.count) {
+        linkCharacter.mutate({
+          fromCharacterId: userCharacters.data?.list[0].characterId,
+          toCharacterId: characterId,
+        })
+      }
+      setFollowProgress(false)
+    }
+  }, [
+    backlinks.isSuccess,
+    backlinks.data?.count,
+    router,
+    followProgress,
+    address,
+    userCharacters.isSuccess,
+    userCharacters.data,
+    characterId,
+    linkCharacter,
+  ])
+
+  return (
+    <Button
+      variant={variant}
+      onClick={handleClickSubscribe}
+      className={clsx(className, "align-middle space-x-1")}
+      isLoading={
+        backlinks.data?.count
+          ? linkCharacter.isLoading || unlinkCharacter.isLoading
+          : userCharacters.isLoading ||
+            unlinkCharacter.isLoading ||
+            linkCharacter.isLoading ||
+            backlinks.isLoading
+      }
+      size={size}
+      aria-label="follow"
+    >
+      <BellIcon className="h-4 w-4" />
+      {backlinks.data?.count ? (
+        <>
+          <span className="group-hover:hidden">Following</span>
+          <span className="hidden group-hover:block">Unfollow</span>
+        </>
+      ) : (
+        <span>Follow</span>
+      )}
+    </Button>
+  )
+}

src/components/ui/Button.tsx

@@ -54,7 +54,7 @@ export const Button = React.forwardRef<
       disabled={isDisabled || isLoading}
       className={clsx(
         className,
-        "button",
+        "button shadow",
         isLoading && "is-loading",
         isBlock && `is-block`,
         variantColor && `is-${variantColor}`,

src/models/character.ts

@@ -1,5 +1,6 @@
-import { indexer } from "../lib/crossbell"
+import { indexer } from "~/lib/crossbell"
 import { Notes, Note } from "~/lib/types"
+import type { Contract } from "crossbell.js"
 
 const expandPage = async (note: Note) => {
   note.cover = note?.metadata?.content?.attachments?.find((attachment) =>
@@ -75,9 +76,10 @@ export const getAchievements = (characterId: number) => {
   })
 }
 
-export const getCharacters = async (address: string) => {
+export const getCharacters = async (address: string, primary?: boolean) => {
   const result = await indexer.getCharacters(address, {
     limit: 50,
+    primary,
   })
   result.list = result.list.sort((a, b) => {
     if (a.primary) {
@@ -90,7 +92,28 @@ export const getCharacters = async (address: string) => {
       return -1
     }
   })
-  console.log(result)
 
   return result
 }
+
+export const getLinks = (characterId: number, toCharacterId: number) => {
+  return indexer.getLinks(characterId, {
+    toCharacterId: toCharacterId,
+  })
+}
+
+export const linkCharacter = (
+  contract: Contract,
+  fromCharacterId: number,
+  toCharacterId: number,
+) => {
+  return contract.linkCharacter(fromCharacterId, toCharacterId, "follow")
+}
+
+export const unlinkCharacter = (
+  contract: Contract,
+  fromCharacterId: number,
+  toCharacterId: number,
+) => {
+  return contract.unlinkCharacter(fromCharacterId, toCharacterId, "follow")
+}

src/pages/[handle].tsx

@@ -31,6 +31,7 @@ import { toGateway } from "~/lib/ipfs-parser"
 import { Platform } from "~/components/Platform"
 import { Source } from "~/components/Source"
 import { Button } from "~/components/ui/Button"
+import { FollowingButton } from "~/components/FollowingButton"
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
@@ -129,8 +130,11 @@ export default function HandlePage() {
       >
         <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-white to-gray-200 opacity-80"></div>
         <div className="flex relative">
-          <div className="absolute right-0 top-0 bg-blue-400 text-white px-12 py-1 rounded-2xl cursor-pointer">
-            Follow
+          <div className="absolute right-0 top-0">
+            <FollowingButton
+              className="rounded-full"
+              characterId={character.data?.characterId}
+            />
           </div>
           <div className="w-32 text-center mr-4 flex flex-col items-center justify-between">
             {character.data?.metadata?.content?.avatars && (
@@ -148,7 +152,7 @@ export default function HandlePage() {
           <div className="flex-1 min-w-0">
             <p className="font-medium text-2xl">
               <span>{character.data?.metadata?.content?.name}</span>
-              <span className="text-base ml-2">@{handle}</span>
+              <span className="text-base ml-2 text-zinc-500">@{handle}</span>
             </p>
             <p className="truncate text-sm mt-1">
               {character.data?.metadata?.content?.bio}

src/queries/character.ts

@@ -5,6 +5,7 @@ import {
   useInfiniteQuery,
 } from "@tanstack/react-query"
 import * as characterModel from "../models/character"
+import { useContract } from "~/lib/crossbell"
 
 export const useGetCharacter = (handle: string) => {
   return useQuery(["getCharacter", handle], async () => {
@@ -74,11 +75,61 @@ export const useGetCalendar = (characterId: number) => {
   })
 }
 
-export const useGetCharacters = (address?: string) => {
-  return useQuery(["getCharacters", address], async () => {
+export const useGetCharacters = (address?: string, primary?: boolean) => {
+  return useQuery(["getCharacters", address, primary], async () => {
     if (!address) {
       return null
     }
-    return characterModel.getCharacters(address)
+    return characterModel.getCharacters(address, primary)
   })
 }
+
+export const useGetLinks = (characterId?: number, toCharacterId?: number) => {
+  return useQuery(["getLinks", characterId, toCharacterId], async () => {
+    if (!characterId || !toCharacterId) {
+      return null
+    }
+    return characterModel.getLinks(characterId, toCharacterId)
+  })
+}
+
+export const useLinkCharacter = () => {
+  const contract = useContract()
+  const queryClient = useQueryClient()
+  return useMutation(
+    async (input: { fromCharacterId?: number; toCharacterId?: number }) => {
+      if (!input.fromCharacterId || !input.toCharacterId) {
+        return null
+      }
+      return characterModel.linkCharacter(
+        contract,
+        input.fromCharacterId,
+        input.toCharacterId,
+      )
+    },
+    {
+      onSuccess: (data, variables) => {
+        queryClient.invalidateQueries(["getLinks", variables.fromCharacterId])
+      },
+    },
+  )
+}
+
+export const useUnlinkCharacter = () => {
+  const contract = useContract()
+  const queryClient = useQueryClient()
+  return useMutation(
+    async (input: { fromCharacterId: number; toCharacterId: number }) => {
+      return characterModel.unlinkCharacter(
+        contract,
+        input.fromCharacterId,
+        input.toCharacterId,
+      )
+    },
+    {
+      onSuccess: (data, variables) => {
+        queryClient.invalidateQueries(["getLinks", variables.fromCharacterId])
+      },
+    },
+  )
+}