alternative tangled frontend (extremely wip)
feat: get following
+53
-21
+33
-10
src/components/Profile/ProfileOverview.tsx
+33
-10
src/components/Profile/ProfileOverview.tsx
···
5
5
import { PinnedRepos } from "@/components/Profile/PinnedRepos";
6
6
import { DEFAULT_BSKY_CLIENT_URL } from "@/lib/consts";
7
7
import { useAvatarQuery } from "@/lib/queries/get-avatar";
8
+
import { useFollowingQuery } from "@/lib/queries/get-following";
8
9
import { useProfileQuery } from "@/lib/queries/get-profile";
9
10
import { useReposQuery } from "@/lib/queries/get-repos";
10
11
import { useMiniDoc } from "@/lib/queries/resolve-minidoc";
···
44
45
repoUrl: miniDocQueryData ? new URL(miniDocQueryData.pds) : null,
45
46
cursor: reposQueryCursor,
46
47
});
48
+
const {
49
+
isLoading: isFollowingLoading,
50
+
error: followingQueryErr,
51
+
data: followingQueryData,
52
+
} = useFollowingQuery({
53
+
did: miniDocQueryData?.did ?? null,
54
+
repoUrl: miniDocQueryData ? new URL(miniDocQueryData.pds) : null,
55
+
});
47
56
48
57
const isLoading =
49
58
isMiniDocLoading ||
50
-
!miniDocQueryData ||
51
59
isAvatarLoading ||
52
-
!avatarQueryData ||
53
60
isProfileLoading ||
54
-
!profileQueryData ||
55
61
isReposLoading ||
56
-
!reposQueryData;
57
-
const err =
58
-
miniDocQueryErr ?? avatarQueryErr ?? profileQueryErr ?? reposQueryErr;
62
+
isFollowingLoading;
63
+
const error =
64
+
miniDocQueryErr ??
65
+
avatarQueryErr ??
66
+
profileQueryErr ??
67
+
reposQueryErr ??
68
+
followingQueryErr;
69
+
70
+
if (error && !isLoading) return <p>{error.message}</p>;
59
71
60
-
if (isLoading) return <Loading />;
61
-
if (err) return <p>{err.message}</p>;
72
+
if (
73
+
isLoading ||
74
+
!miniDocQueryData ||
75
+
!avatarQueryData ||
76
+
!profileQueryData ||
77
+
!reposQueryData ||
78
+
!followingQueryData
79
+
)
80
+
return <Loading />;
62
81
63
82
const avatarUri = avatarQueryData === "#" ? undefined : avatarQueryData;
64
83
const { handle, did } = miniDocQueryData;
···
120
139
className="text-subtext"
121
140
/>
122
141
<p>
123
-
100 <span className="text-subtext">following</span>
142
+
{followingQueryData.length}{" "}
143
+
<span className="text-subtext">following</span>
124
144
</p>
125
145
</div>
126
146
</div>
···
155
175
links.map((link) => {
156
176
if (link === "") return <></>;
157
177
return (
158
-
<div className="flex items-center gap-1">
178
+
<div
179
+
className="flex items-center gap-1"
180
+
key={link}
181
+
>
159
182
<LucideLink
160
183
height={16}
161
184
width={16}
+20
-11
src/lib/queries/get-following.ts
+20
-11
src/lib/queries/get-following.ts
···
4
4
import { z } from "zod/v4";
5
5
6
6
const responseSchema = z.object({
7
-
records: z.array(shTangledGraphFollowSchema),
7
+
records: z.array(
8
+
z.object({
9
+
uri: z.string(),
10
+
cid: z.string(),
11
+
value: shTangledGraphFollowSchema,
12
+
}),
13
+
),
8
14
cursor: z.string(),
9
15
});
10
16
···
19
25
}) => {
20
26
const cleanedUrl = stripTrailingSlashFromUrl(repoUrl);
21
27
const req = new Request(
22
-
`${cleanedUrl}/xrpc/com.atproto.listRecords?repo=${did}&collection=sh.tangled.graph.follow&limit=${LIMIT.toString()}`,
28
+
`${cleanedUrl}/xrpc/com.atproto.repo.listRecords?repo=${did}&collection=sh.tangled.graph.follow&limit=${LIMIT.toString()}`,
23
29
);
24
30
const res = await fetch(req);
25
31
···
50
56
51
57
let finalResult = initialRecords;
52
58
53
-
let continueFetching = initialRecords.length < LIMIT;
59
+
let continueFetching = initialRecords.length >= LIMIT;
54
60
let currentCursor = initialParseData.cursor;
55
61
while (continueFetching) {
56
62
const nextReq = new Request(
57
-
`${cleanedUrl}/xrpc/com.atproto.listRecords?repo=${did}&collection=sh.tangled.graph.follow&limit=${LIMIT}&cursor=${currentCursor}`,
63
+
`${cleanedUrl}/xrpc/com.atproto.repo.listRecords?repo=${did}&collection=sh.tangled.graph.follow&limit=${LIMIT}&cursor=${currentCursor}`,
58
64
);
59
65
const nextRes = await fetch(nextReq);
60
66
···
66
72
}
67
73
}
68
74
69
-
const data: unknown = await res.json();
75
+
const data: unknown = await nextRes.json();
70
76
71
77
const {
72
78
success: nextParseSuccess,
···
83
89
84
90
const { records: nextRecords } = nextParseData;
85
91
86
-
finalResult.concat(nextRecords);
87
-
continueFetching = nextRecords.length < LIMIT;
92
+
finalResult = finalResult.concat(nextRecords);
93
+
94
+
continueFetching = nextRecords.length >= LIMIT;
88
95
currentCursor = nextParseData.cursor;
89
96
}
97
+
98
+
console.log(finalResult);
90
99
91
100
return finalResult;
92
101
};
···
95
104
did,
96
105
repoUrl,
97
106
}: {
98
-
did?: string;
99
-
repoUrl?: URL;
107
+
did?: string | null;
108
+
repoUrl?: URL | null;
100
109
}) =>
101
110
queryOptions({
102
111
queryKey: ["following", did, repoUrl && repoUrl.toString()],
···
110
119
did,
111
120
repoUrl,
112
121
}: {
113
-
did: string | undefined;
114
-
repoUrl: URL | undefined;
122
+
did?: string | null;
123
+
repoUrl?: URL | null;
115
124
}) => {
116
125
return useQuery(getFollowingQueryOpts({ did, repoUrl }));
117
126
};