an appview-less Bluesky client using Constellation and PDS Queries
reddwarf.app
whey.party
frontend
spa
bluesky
reddwarf
microcosm
1import { createFileRoute } from "@tanstack/react-router";
2import { useAtom } from "jotai";
3import * as React from "react";
4import { useLayoutEffect, useState } from "react";
5
6import { Header } from "~/components/Header";
7import { InfiniteCustomFeed } from "~/components/InfiniteCustomFeed";
8import { useAuth } from "~/providers/UnifiedAuthProvider";
9import {
10 feedScrollPositionsAtom,
11 isAtTopAtom,
12 quickAuthAtom,
13 selectedFeedUriAtom,
14} from "~/utils/atoms";
15//import { usePersistentStore } from "~/providers/PersistentStoreProvider";
16import {
17 //constructArbitraryQuery,
18 //constructIdentityQuery,
19 //constructInfiniteFeedSkeletonQuery,
20 //constructPostQuery,
21 useQueryArbitrary,
22 useQueryIdentity,
23 useQueryPreferences,
24} from "~/utils/useQuery";
25
26export const Route = createFileRoute("/")({
27 // loader: async ({ context }) => {
28 // const { queryClient } = context;
29 // const atomauth = store.get(authedAtom);
30 // const atomagent = store.get(agentAtom);
31
32 // let identitypds: string | undefined;
33 // const initialselectedfeed = store.get(selectedFeedUriAtom);
34 // if (atomagent && atomauth && atomagent?.did) {
35 // const identityopts = constructIdentityQuery(atomagent.did);
36 // const identityresultmaybe =
37 // await queryClient.ensureQueryData(identityopts);
38 // identitypds = identityresultmaybe?.pds;
39 // }
40
41 // const arbitraryopts = constructArbitraryQuery(
42 // initialselectedfeed ??
43 // "at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot"
44 // );
45 // const feedGengetrecordquery =
46 // await queryClient.ensureQueryData(arbitraryopts);
47 // const feedServiceDid = (feedGengetrecordquery?.value as any)?.did;
48 // //queryClient.ensureInfiniteQueryData()
49
50 // const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery({
51 // feedUri:
52 // initialselectedfeed ??
53 // "at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot",
54 // agent: atomagent ?? undefined,
55 // isAuthed: atomauth ?? false,
56 // pdsUrl: identitypds,
57 // feedServiceDid: feedServiceDid,
58 // });
59
60 // const res = await queryClient.ensureInfiniteQueryData({
61 // queryKey,
62 // queryFn,
63 // initialPageParam: undefined as never,
64 // getNextPageParam: (lastPage: any) => lastPage.cursor as null | undefined,
65 // staleTime: Infinity,
66 // //refetchOnWindowFocus: false,
67 // //enabled: true,
68 // });
69 // await Promise.all(
70 // res.pages.map(async (page) => {
71 // await Promise.all(
72 // page.feed.map(async (feedviewpost) => {
73 // if (!feedviewpost.post) return;
74 // // /*mass comment*/ console.log("preloading: ", feedviewpost.post);
75 // const opts = constructPostQuery(feedviewpost.post);
76 // try {
77 // await queryClient.ensureQueryData(opts);
78 // } catch (e) {
79 // // /*mass comment*/ console.log(" failed:", e);
80 // }
81 // })
82 // );
83 // })
84 // );
85 // },
86 component: Home,
87 pendingComponent: PendingHome, // PendingHome,
88 staticData: { keepAlive: true },
89});
90function PendingHome() {
91 return <div>loading... (prefetching your timeline)</div>;
92}
93
94//function Homer() {
95// return <div></div>
96//}
97export function Home({ hidden = false }: { hidden?: boolean }) {
98 const {
99 agent,
100 status,
101 authMethod,
102 loginWithPassword,
103 loginWithOAuth,
104 logout,
105 } = useAuth();
106 const authed = !!agent?.did;
107
108 // i dont remember why this is even here
109 // useEffect(() => {
110 // if (agent?.did) {
111 // store.set(authedAtom, true);
112 // } else {
113 // store.set(authedAtom, false);
114 // }
115 // }, [status, agent, authed]);
116 // useEffect(() => {
117 // if (agent) {
118 // // eslint-disable-next-line @typescript-eslint/ban-ts-comment
119 // // @ts-ignore is it just me or is the type really weird here it should be Agent not AtpAgent
120 // store.set(agentAtom, agent);
121 // } else {
122 // store.set(agentAtom, null);
123 // }
124 // }, [status, agent, authed]);
125
126 //const { get, set } = usePersistentStore();
127 // const [feed, setFeed] = React.useState<any[]>([]);
128 // const [loading, setLoading] = React.useState(true);
129 // const [error, setError] = React.useState<string | null>(null);
130
131 // const [prefs, setPrefs] = React.useState<any>({});
132 // React.useEffect(() => {
133 // if (!loadering && authed && agent && agent.did) {
134 // const run = async () => {
135 // try {
136 // if (!agent.did) return;
137 // const prefs = await cachedGetPrefs({
138 // did: agent.did,
139 // agent,
140 // get,
141 // set,
142 // });
143
144 // // /*mass comment*/ console.log("alistoffeeds", prefs);
145 // setPrefs(prefs || {});
146 // } catch (err) {
147 // console.error("alistoffeeds Fetch error in preferences effect:", err);
148 // }
149 // };
150
151 // run();
152 // }
153 // }, [loadering, authed, agent]);
154
155 // const savedFeedsPref = React.useMemo(() => {
156 // if (!prefs?.preferences) return null;
157 // return prefs.preferences.find(
158 // (p: any) => p?.$type === "app.bsky.actor.defs#savedFeedsPrefV2",
159 // );
160 // }, [prefs]);
161
162 // const savedFeeds = savedFeedsPref?.items || [];
163
164 const [quickAuth, setQuickAuth] = useAtom(quickAuthAtom);
165 const isAuthRestoring = quickAuth ? status === "loading" : false;
166
167 const identityresultmaybe = useQueryIdentity(!isAuthRestoring ? agent?.did : undefined);
168 const identity = identityresultmaybe?.data;
169
170 const prefsresultmaybe = useQueryPreferences({
171 agent: !isAuthRestoring ? (agent ?? undefined) : undefined,
172 pdsUrl: !isAuthRestoring ? (identity?.pds) : undefined,
173 });
174 const prefs = prefsresultmaybe?.data;
175
176 const savedFeeds = React.useMemo(() => {
177 const savedFeedsPref = prefs?.preferences?.find(
178 (p: any) => p?.$type === "app.bsky.actor.defs#savedFeedsPrefV2"
179 );
180 return savedFeedsPref?.items || [];
181 }, [prefs]);
182
183 const [persistentSelectedFeed, setPersistentSelectedFeed] = useAtom(selectedFeedUriAtom);
184 const [unauthedSelectedFeed, setUnauthedSelectedFeed] = useState(persistentSelectedFeed);
185 const selectedFeed = agent?.did
186 ? persistentSelectedFeed
187 : unauthedSelectedFeed;
188 const setSelectedFeed = agent?.did
189 ? setPersistentSelectedFeed
190 : setUnauthedSelectedFeed;
191
192 // /*mass comment*/ console.log("my selectedFeed is: ", selectedFeed);
193 React.useEffect(() => {
194 const fallbackFeed =
195 "at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot";
196 if (authed) {
197 if (selectedFeed) return;
198 if (savedFeeds.length > 0) {
199 setSelectedFeed((prev) =>
200 prev && savedFeeds.some((f: any) => f.value === prev)
201 ? prev
202 : savedFeeds[0].value
203 );
204 } else {
205 if (selectedFeed) return;
206 setSelectedFeed(fallbackFeed);
207 }
208 } else {
209 if (selectedFeed) return;
210 setSelectedFeed(fallbackFeed);
211 }
212 }, [savedFeeds, authed, setSelectedFeed]);
213
214 // React.useEffect(() => {
215 // if (loadering || !selectedFeed) return;
216
217 // let ignore = false;
218
219 // const run = async () => {
220 // setLoading(true);
221 // setError(null);
222
223 // try {
224 // if (authed && agent) {
225 // if (!agent.did) return;
226
227 // const pdsurl = await cachedResolveIdentity({
228 // didOrHandle: agent.did,
229 // get,
230 // set,
231 // });
232
233 // const fetchstringcomplex = `${pdsurl.pdsUrl}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${selectedFeed}`;
234 // // /*mass comment*/ console.log("fetching feed authed: " + fetchstringcomplex);
235
236 // const feeddef = await cachedGetRecord({
237 // atUri: selectedFeed,
238 // get,
239 // set,
240 // });
241
242 // const feedservicedid = feeddef.value.did;
243
244 // const res = await agent.fetchHandler(fetchstringcomplex, {
245 // method: "GET",
246 // headers: {
247 // "atproto-proxy": `${feedservicedid}#bsky_fg`,
248 // "Content-Type": "application/json",
249 // },
250 // });
251
252 // if (!res.ok) throw new Error("Failed to fetch feed");
253 // const data = await res.json();
254
255 // if (!ignore) setFeed(data.feed || []);
256 // } else {
257 // // /*mass comment*/ console.log("falling back");
258 // // always use fallback feed for not logged in
259 // const fallbackFeed =
260 // "at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot";
261 // // const feeddef = await cachedGetRecord({
262 // // atUri: fallbackFeed,
263 // // get,
264 // // set,
265 // // });
266
267 // //const feedservicedid = "did:web:discover.bsky.app" //feeddef.did;
268 // const fetchstringsimple = `https://discover.bsky.app/xrpc/app.bsky.feed.getFeedSkeleton?feed=${fallbackFeed}`;
269 // // /*mass comment*/ console.log("fetching feed unauthed: " + fetchstringsimple);
270
271 // const res = await fetch(fetchstringsimple);
272 // if (!res.ok) throw new Error("Failed to fetch feed");
273 // const data = await res.json();
274
275 // if (!ignore) setFeed(data.feed || []);
276 // }
277 // } catch (e) {
278 // if (!ignore) {
279 // if (e instanceof Error) {
280 // setError(e.message);
281 // } else {
282 // setError("Unknown error");
283 // }
284 // }
285 // } finally {
286 // if (!ignore) setLoading(false);
287 // }
288 // };
289
290 // run();
291
292 // return () => {
293 // ignore = true;
294 // };
295 // }, [authed, agent, loadering, selectedFeed, get, set]);
296
297 const [scrollPositions, setScrollPositions] = useAtom(
298 feedScrollPositionsAtom
299 );
300
301 const scrollPositionsRef = React.useRef(scrollPositions);
302
303 React.useEffect(() => {
304 scrollPositionsRef.current = scrollPositions;
305 }, [scrollPositions]);
306
307 useLayoutEffect(() => {
308 if (isAuthRestoring) return;
309 const savedPosition = scrollPositions[selectedFeed ?? "null"] ?? 0;
310
311 window.scrollTo({ top: savedPosition, behavior: "instant" });
312 // eslint-disable-next-line react-hooks/exhaustive-deps
313 }, [selectedFeed, isAuthRestoring]);
314
315 useLayoutEffect(() => {
316 if (!selectedFeed || isAuthRestoring) return;
317
318 const handleScroll = () => {
319 scrollPositionsRef.current = {
320 ...scrollPositionsRef.current,
321 [selectedFeed]: window.scrollY,
322 };
323 };
324
325 window.addEventListener("scroll", handleScroll, { passive: true });
326 return () => {
327 window.removeEventListener("scroll", handleScroll);
328
329 setScrollPositions(scrollPositionsRef.current);
330 };
331 }, [isAuthRestoring, selectedFeed, setScrollPositions]);
332
333 const feedGengetrecordquery = useQueryArbitrary(!isAuthRestoring ? selectedFeed ?? undefined : undefined);
334 const feedServiceDid = !isAuthRestoring ? (feedGengetrecordquery?.data?.value as any)?.did as string | undefined : undefined;
335
336 // const {
337 // data: feedData,
338 // isLoading: isFeedLoading,
339 // error: feedError,
340 // } = useQueryFeedSkeleton({
341 // feedUri: selectedFeed!,
342 // agent: agent ?? undefined,
343 // isAuthed: authed ?? false,
344 // pdsUrl: identity?.pds,
345 // feedServiceDid: feedServiceDid,
346 // });
347
348 // const feed = feedData?.feed || [];
349
350 const isReadyForAuthedFeed = !isAuthRestoring && authed && agent && identity?.pds && feedServiceDid;
351 const isReadyForUnauthedFeed = !isAuthRestoring && !authed && selectedFeed;
352
353
354 const [isAtTop] = useAtom(isAtTopAtom);
355
356 return (
357 <div
358 className={`relative flex flex-col divide-y divide-gray-200 dark:divide-gray-800 ${hidden && "hidden"}`}
359 >
360 {!isAuthRestoring && savedFeeds.length > 0 ? (
361 <div className={`flex items-center px-4 py-2 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] ${!isAtTop && "shadow-sm"} sm:shadow-none sm:bg-white sm:dark:bg-gray-950 z-10 border-0 sm:border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden scroll-thin`}>
362 {savedFeeds.map((item: any, idx: number) => {
363 const label = item.value.split("/").pop() || item.value;
364 const isActive = selectedFeed === item.value;
365 return (
366 <button
367 key={item.value || idx}
368 className={`px-3 py-1 rounded-full whitespace-nowrap font-medium transition-colors ${
369 isActive
370 ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-700 bg-gray-200 hover:dark:bg-gray-600"
371 : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800"
372 // ? "bg-gray-500 text-white"
373 // : item.pinned
374 // ? "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200"
375 // : "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
376 }`}
377 onClick={() => setSelectedFeed(item.value)}
378 title={item.value}
379 >
380 {label}
381 {item.pinned && (
382 <span
383 className={`ml-1 text-xs ${
384 isActive
385 ? "text-gray-900 dark:text-gray-100"
386 : "text-gray-600 dark:text-gray-400"
387 }`}
388 >
389 ★
390 </span>
391 )}
392 </button>
393 );
394 })}
395 </div>
396 ) : (
397 // <span className="text-xl font-bold ml-2">Home</span>
398 <Header title="Home" />
399 )}
400 {/* {isFeedLoading && <div className="p-4 text-gray-500">Loading...</div>}
401 {feedError && <div className="p-4 text-red-500">{feedError.message}</div>}
402 {!isFeedLoading && !feedError && feed.length === 0 && (
403 <div className="p-4 text-gray-500">No posts found.</div>
404 )} */}
405 {/* {feed.map((item, i) => (
406 <UniversalPostRendererATURILoader
407 key={item.post || i}
408 atUri={item.post}
409 />
410 ))} */}
411
412 {isAuthRestoring || authed && (!identity?.pds || !feedServiceDid) && (
413 <div className="p-4 text-center text-gray-500">
414 Preparing your feed...
415 </div>
416 )}
417
418 {!isAuthRestoring && (isReadyForAuthedFeed || isReadyForUnauthedFeed) ? (
419 <InfiniteCustomFeed
420 key={selectedFeed!}
421 feedUri={selectedFeed!}
422 pdsUrl={identity?.pds}
423 feedServiceDid={feedServiceDid}
424 />
425 ) : (
426 <div className="p-4 text-center text-gray-500">
427 Loading.......
428 </div>
429 )}
430 {/* {false && restoringScrollPosition && (
431 <div className="fixed top-1/2 left-1/2 right-1/2">
432 restoringScrollPosition
433 </div>
434 )} */}
435 </div>
436 );
437}
438// not even used lmaooo
439
440// export async function cachedResolveDIDWEBDOC({
441// didweb,
442// cacheTimeout = CACHE_TIMEOUT,
443// get,
444// set,
445// }: {
446// didweb: string;
447// cacheTimeout?: number;
448// get: (key: string) => any;
449// set: (key: string, value: string) => void;
450// }): Promise<any> {
451// const isDidInput = didweb.startsWith("did:web:");
452// const cacheKey = `didwebdoc:${didweb}`;
453// const now = Date.now();
454// const cached = get(cacheKey);
455// if (
456// cached &&
457// cached.value &&
458// cached.time &&
459// now - cached.time < cacheTimeout
460// ) {
461// try {
462// return JSON.parse(cached.value);
463// } catch (_e) {/* whatever*/ }
464// }
465// const url = `https://free-fly-24.deno.dev/resolve-did-web?did=${encodeURIComponent(
466// didweb
467// )}`;
468// const res = await fetch(url);
469// if (!res.ok) throw new Error("Failed to resolve didwebdoc");
470// const data = await res.json();
471// set(cacheKey, JSON.stringify(data));
472// if (!isDidInput && data.did) {
473// set(`didwebdoc:${data.did}`, JSON.stringify(data));
474// }
475// return data;
476// }
477
478// export async function cachedGetPrefs({
479// did,
480// agent,
481// get,
482// set,
483// cacheTimeout = CACHE_TIMEOUT,
484// }: {
485// did: string;
486// agent: any; // or type properly if available
487// get: (key: string) => any;
488// set: (key: string, value: string) => void;
489// cacheTimeout?: number;
490// }): Promise<any> {
491// const cacheKey = `prefs:${did}`;
492// const cached = get(cacheKey);
493// const now = Date.now();
494
495// if (
496// cached &&
497// cached.value &&
498// cached.time &&
499// now - cached.time < cacheTimeout
500// ) {
501// try {
502// return JSON.parse(cached.value);
503// } catch {
504// // fall through to fetch
505// }
506// }
507
508// const resolved = await cachedResolveIdentity({
509// didOrHandle: did,
510// get,
511// set,
512// });
513
514// if (!resolved?.pdsUrl) throw new Error("Missing resolved PDS info");
515
516// const fetchUrl = `${resolved.pdsUrl}/xrpc/app.bsky.actor.getPreferences`;
517
518// const res = await agent.fetchHandler(fetchUrl, {
519// method: "GET",
520// headers: {
521// "Content-Type": "application/json",
522// },
523// });
524
525// if (!res.ok) throw new Error(`Failed to fetch preferences: ${res.status}`);
526
527// const text = await res.text();
528
529// let data: any;
530// try {
531// data = JSON.parse(text);
532// } catch (err) {
533// console.error("Failed to parse preferences JSON:", err);
534// throw err;
535// }
536
537// set(cacheKey, JSON.stringify(data));
538// return data;
539// }