A decentralized music tracking and discovery platform built on AT Protocol 🎵

Fetch and sync follows for circles

Call useFollowsQuery for neighbour DIDs (excluding the current DID) and
merge returned follow DIDs into the local follows set using useEffect

+23 -1
+23 -1
apps/web/src/pages/profile/circles/Circles.tsx
··· 12 12 import { followsAtom } from "../../../atoms/follows"; 13 13 import { 14 14 useFollowAccountMutation, 15 + useFollowsQuery, 15 16 useUnfollowAccountMutation, 16 17 } from "../../../hooks/useGraph"; 17 - import { useState } from "react"; 18 + import { useEffect, useState } from "react"; 18 19 import SignInModal from "../../../components/SignInModal"; 19 20 import { activeTabAtom } from "../../../atoms/tab"; 20 21 import scrollToTop from "../../../lib/scrollToTop"; ··· 29 30 const { mutate: followAccount } = useFollowAccountMutation(); 30 31 const { mutate: unfollowAccount } = useUnfollowAccountMutation(); 31 32 33 + const allCircles = data?.neighbours ?? []; 34 + 35 + const { data: followsData } = useFollowsQuery( 36 + localStorage.getItem("did")!, 37 + allCircles.length, 38 + allCircles 39 + .map((circle) => circle.did) 40 + .filter((x) => x !== localStorage.getItem("did")), 41 + ); 42 + 32 43 const onFollow = (followerDid: string) => { 33 44 if (!localStorage.getItem("token")) { 34 45 setIsSignInOpen(true); ··· 50 61 }); 51 62 unfollowAccount(followerDid); 52 63 }; 64 + 65 + useEffect(() => { 66 + if (!followsData) return; 67 + setFollows((prev) => { 68 + const newSet = new Set(prev); 69 + followsData.follows.forEach((follow: { did: string }) => { 70 + newSet.add(follow.did); 71 + }); 72 + return newSet; 73 + }); 74 + }, [followsData, setFollows]); 53 75 54 76 return ( 55 77 <>