feat: follow all button

src/models/site.model.ts

@@ -8,6 +8,7 @@ import { createClient } from "@urql/core"
 import axios from "axios"
 import { indexer } from "~/queries/crossbell"
 import type { LinkEntity, NoteEntity } from "crossbell.js"
+import type { Contract } from "crossbell.js"
 
 export const checkSubdomain = async ({
   subdomain,
@@ -109,6 +110,7 @@ export const getSites = async (input: string[]) => {
           characters( where: { handle: { in: $identities } }, orderBy: [{ updatedAt: desc }], take: $limit ) {
             handle
             updatedAt
+            characterId
             notes {
               updatedAt
             }
@@ -344,6 +346,25 @@ export async function subscribeToSite(
   )
 }
 
+export async function subscribeToSites(
+  input: {
+    user: Profile
+    sites: {
+      characterId: string
+    }[]
+  },
+  contract?: Contract,
+) {
+  if (input.user.metadata?.proof) {
+    return contract?.linkCharactersInBatch(
+      input.user.metadata.proof,
+      input.sites.map((s) => s.characterId).filter((c) => c) as any,
+      [],
+      "follow",
+    )
+  }
+}
+
 export async function unsubscribeFromSite(
   input: {
     userId: string

src/pages/index.tsx

@@ -20,6 +20,8 @@ import { prefetchGetSites } from "~/queries/site.server"
 import { useGetSites } from "~/queries/site"
 import showcase from "../../showcase.json"
 import { CharacterCard } from "~/components/common/CharacterCard"
+import { useGetUserSites, useSubscribeToSites } from "~/queries/site"
+import { SITE_URL } from "~/lib/env"
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const queryClient = new QueryClient()
@@ -108,6 +110,52 @@ export default function Home({ region }: { region: string | null }) {
     },
   ]
 
+  const [followProgress, setFollowProgress] = useState<boolean>(false)
+  const userSite = useGetUserSites(address)
+  const subscribeToSites = useSubscribeToSites()
+
+  const followAll = async (e: any) => {
+    if (!address) {
+      setFollowProgress(true)
+      openConnectModal?.()
+    } else if (!userSite.data?.[0]) {
+      router.push(`${SITE_URL}/dashboard/new-site`)
+    } else {
+      subscribeToSites.mutate({
+        user: userSite.data?.[0],
+        sites: showcaseSites.data,
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (
+      followProgress &&
+      address &&
+      showcaseSites.isSuccess &&
+      userSite.data?.[0] &&
+      userSite.isSuccess
+    ) {
+      if (!userSite.data) {
+        router.push(`${SITE_URL}/dashboard/new-site`)
+      }
+      subscribeToSites.mutate({
+        user: userSite.data?.[0],
+        sites: showcaseSites.data,
+      })
+      setFollowProgress(false)
+    }
+  }, [
+    userSite.isSuccess,
+    userSite.data,
+    router,
+    followProgress,
+    address,
+    showcaseSites.isSuccess,
+    showcaseSites.data,
+    subscribeToSites,
+  ])
+
   return (
     <MainLayout tabs={["Features", "Showcase", "Integration"]}>
       <section>
@@ -187,6 +235,19 @@ export default function Home({ region }: { region: string | null }) {
                   Discover these awesome teams and geeks on xLog (sorted by
                   update time)
                 </p>
+                <Button
+                  size="xl"
+                  className="mt-5"
+                  onClick={followAll}
+                  isLoading={
+                    followProgress ||
+                    showcaseSites.isLoading ||
+                    userSite.isLoading ||
+                    subscribeToSites.isLoading
+                  }
+                >
+                  🥳 Follow All!
+                </Button>
                 <ul className="mt-10 grid grid-cols-2 md:grid-cols-3 gap-10">
                   {showcaseSites.data?.map((site: any) => (
                     <li className="inline-flex align-middle" key={site.handle}>

src/queries/site.ts

@@ -1,6 +1,7 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
 import * as siteModel from "~/models/site.model"
 import { useUnidata } from "./unidata"
+import { useContract } from "./crossbell"
 
 export const useGetUserSites = (address?: string) => {
   const unidata = useUnidata()
@@ -120,6 +121,35 @@ export function useSubscribeToSite() {
   )
 }
 
+export function useSubscribeToSites() {
+  const contract = useContract()
+  const queryClient = useQueryClient()
+  return useMutation(
+    async (input: Parameters<typeof siteModel.subscribeToSites>[0]) => {
+      return siteModel.subscribeToSites(input, contract)
+    },
+    {
+      onSuccess: (data, variables) => {
+        variables.sites.forEach((site) => {
+          queryClient.invalidateQueries([
+            "useGetSiteSubscriptions",
+            {
+              siteId: site.metadata?.proof,
+            },
+          ])
+          queryClient.invalidateQueries([
+            "getSubscription",
+            {
+              userId: variables.user.metadata?.proof,
+              siteId: site.metadata?.proof,
+            },
+          ])
+        })
+      },
+    },
+  )
+}
+
 export function useUnsubscribeFromSite() {
   const unidata = useUnidata()
   const queryClient = useQueryClient()