createTimeline: fix viewport and dupelication

This commit is contained in:
thislight 2024-10-13 15:52:42 +08:00
parent e3f592554b
commit b34580951f
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
2 changed files with 78 additions and 155 deletions

View file

@ -11,114 +11,19 @@ import {
} from "solid-js"; } from "solid-js";
import { createStore } from "solid-js/store"; import { createStore } from "solid-js/store";
type TimelineFetchTips = {
direction?: "new" | "old";
};
type Timeline = { type Timeline = {
list(params: { list(params: {
/** Return results older than this ID. */
readonly maxId?: string;
/** Return results newer than this ID. */
readonly sinceId?: string;
/** Get a list of items with ID greater than this value excluding this ID */
readonly minId?: string;
/** Maximum number of results to return per page. Defaults to 40. NOTE: Pagination is done with the Link header from the response. */
readonly limit?: number; readonly limit?: number;
}): mastodon.Paginator<mastodon.v1.Status[], unknown>; }): mastodon.Paginator<mastodon.v1.Status[], unknown>;
}; };
export function useTimeline(
timeline: Accessor<Timeline>,
cfg?: {
/**
* Use full refresh mode. This mode ignores paging, it will refetch the specified number
* of toots at every refetch().
*/
fullRefresh?: number;
},
) {
let otl: Timeline | undefined;
let npager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined;
let opager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined;
const [snapshot, { refetch }] = createResource<
{
records: mastodon.v1.Status[];
direction: "new" | "old" | "items";
tlChanged: boolean;
},
[Timeline],
TimelineFetchTips | undefined
>(
() => [timeline()] as const,
async ([tl], info) => {
let tlChanged = false;
if (otl !== tl) {
npager = opager = undefined;
otl = tl;
tlChanged = true;
}
const fullRefresh = cfg?.fullRefresh;
if (typeof fullRefresh !== "undefined") {
const records = await tl
.list({
limit: fullRefresh,
})
.next();
return {
direction: "items",
records: records.value ?? [],
end: records.done,
tlChanged,
};
}
const direction =
typeof info.refetching !== "boolean"
? (info.refetching?.direction ?? "old")
: "old";
if (direction === "old") {
if (!opager) {
opager = tl.list({}).setDirection("next");
}
const next = await opager.next();
return {
direction,
records: next.value ?? [],
end: next.done,
tlChanged,
};
} else {
if (!npager) {
npager = tl.list({}).setDirection("prev");
}
const next = await npager.next();
const page = next.value ?? [];
return { direction, records: page, end: next.done, tlChanged };
}
},
);
const [store, setStore] = createStore([] as mastodon.v1.Status[]);
createEffect(() => {
const shot = snapshot();
if (!shot) return;
const { direction, records, tlChanged } = shot;
if (tlChanged) {
setStore(() => []);
}
if (direction === "new") {
setStore((x) => [...records, ...x]);
} else if (direction === "old") {
setStore((x) => [...x, ...records]);
} else if (direction === "items") {
setStore(() => records);
}
});
return [
store,
snapshot,
{
refetch,
mutate: setStore,
},
] as const;
}
export function createTimelineSnapshot( export function createTimelineSnapshot(
timeline: Accessor<Timeline>, timeline: Accessor<Timeline>,
limit: Accessor<number>, limit: Accessor<number>,
@ -176,30 +81,13 @@ export function createTimelineSnapshot(
export type TimelineFetchDirection = mastodon.Direction; export type TimelineFetchDirection = mastodon.Direction;
export type TimelineChunk = { export type TimelineChunk = {
pager: mastodon.Paginator<mastodon.v1.Status[], unknown>; tl: Timeline;
chunk: readonly mastodon.v1.Status[]; chunk: readonly mastodon.v1.Status[];
done?: boolean; done?: boolean;
direction: TimelineFetchDirection; direction: TimelineFetchDirection;
limit: number; limit: number;
}; };
function checkOrCreatePager(
timeline: Timeline,
limit: number,
lastPager: TimelineChunk["pager"] | undefined,
newDirection: TimelineFetchDirection,
) {
if (!lastPager) {
return timeline.list({}).setDirection(newDirection);
} else {
let pager = lastPager;
if (pager.getDirection() !== newDirection) {
pager = pager.setDirection(newDirection);
}
return pager;
}
}
type TreeNode<T> = { type TreeNode<T> = {
parent?: TreeNode<T>; parent?: TreeNode<T>;
value: T; value: T;
@ -226,6 +114,38 @@ export function createTimeline(
const lookup = new ReactiveMap<string, TreeNode<mastodon.v1.Status>>(); const lookup = new ReactiveMap<string, TreeNode<mastodon.v1.Status>>();
const [threads, setThreads] = createStore([] as mastodon.v1.Status["id"][]); const [threads, setThreads] = createStore([] as mastodon.v1.Status["id"][]);
let vpMaxId: string | undefined, vpMinId: string | undefined;
const fetchExtendingPage = async (
tl: Timeline,
direction: TimelineFetchDirection,
limit: number,
) => {
switch (direction) {
case "next": {
const page = await tl
.list({ limit, sinceId: vpMaxId })
.setDirection(direction)
.next();
if ((page.value?.length ?? 0) > 0) {
vpMaxId = page.value![0].id;
}
return page;
}
case "prev": {
const page = await tl
.list({ limit, maxId: vpMinId })
.setDirection(direction)
.next();
if ((page.value?.length ?? 0) > 0) {
vpMinId = page.value![page.value!.length - 1].id;
}
return page;
}
}
};
const [chunk, { refetch }] = createResource( const [chunk, { refetch }] = createResource(
() => [timeline(), limit()] as const, () => [timeline(), limit()] as const,
async ( async (
@ -237,17 +157,16 @@ export function createTimeline(
) => { ) => {
const direction = const direction =
typeof info.refetching === "boolean" ? "prev" : info.refetching; typeof info.refetching === "boolean" ? "prev" : info.refetching;
const rebuildTimeline = limit !== info.value?.limit; const rebuildTimeline = tl !== info.value?.tl;
const pager = rebuildTimeline
? checkOrCreatePager(tl, limit, undefined, direction)
: checkOrCreatePager(tl, limit, info.value?.pager, direction);
if (rebuildTimeline) { if (rebuildTimeline) {
vpMaxId = undefined;
vpMinId = undefined;
lookup.clear(); lookup.clear();
setThreads([]); setThreads([]);
} }
const posts = await pager.next(); const posts = await fetchExtendingPage(tl, direction, limit);
return { return {
pager, tl,
chunk: posts.value ?? [], chunk: posts.value ?? [],
done: posts.done, done: posts.done,
direction, direction,
@ -262,17 +181,17 @@ export function createTimeline(
return; return;
} }
console.debug("fetched chunk", chk); const existence = [] as boolean[];
batch(() => { for (const [idx, status] of chk.chunk.entries()) {
for (const status of chk.chunk) { existence[idx] = !!untrack(() => lookup.get(status.id));
lookup.set(status.id, { lookup.set(status.id, {
value: status, value: status,
}); });
} }
for (const status of chk.chunk) { for (const status of chk.chunk) {
const node = lookup.get(status.id)!; const node = untrack(() => lookup.get(status.id))!;
if (status.inReplyToId) { if (status.inReplyToId) {
const parent = lookup.get(status.inReplyToId); const parent = lookup.get(status.inReplyToId);
if (parent) { if (parent) {
@ -285,10 +204,16 @@ export function createTimeline(
} }
} }
} }
if (chk.direction === "next") {
setThreads((threads) => [...threads, ...chk.chunk.map((x) => x.id)]); const nThreadIds = chk.chunk
} else if (chk.direction === "prev") { .filter((x, i) => !existence[i])
setThreads((threads) => [...chk.chunk.map((x) => x.id), ...threads]); .map((x) => x.id);
batch(() => {
if (chk.direction === "prev") {
setThreads((threads) => [...threads, ...nThreadIds]);
} else if (chk.direction === "next") {
setThreads((threads) => [...nThreadIds, ...threads]);
} }
setThreads((threads) => setThreads((threads) =>

View file

@ -21,7 +21,6 @@ const TimelinePanel: Component<{
client: mastodon.rest.Client; client: mastodon.rest.Client;
name: "home" | "public"; name: "home" | "public";
prefetch?: boolean; prefetch?: boolean;
fullRefetch?: number;
openFullScreenToot: ( openFullScreenToot: (
toot: mastodon.v1.Status, toot: mastodon.v1.Status,
@ -91,7 +90,7 @@ const TimelinePanel: Component<{
<PullDownToRefresh <PullDownToRefresh
linkedElement={scrollLinked()} linkedElement={scrollLinked()}
loading={snapshot.loading} loading={snapshot.loading}
onRefresh={() => refetchTimeline("prev")} onRefresh={() => refetchTimeline("next")}
/> />
<div <div
ref={(e) => ref={(e) =>
@ -121,8 +120,7 @@ const TimelinePanel: Component<{
toots={toots} toots={toots}
onBoost={onBoost} onBoost={onBoost}
onBookmark={onBookmark} onBookmark={onBookmark}
onReply={ onReply={({ status }, element) =>
({ status }, element) =>
props.openFullScreenToot(status, element, true) props.openFullScreenToot(status, element, true)
} }
client={props.client} client={props.client}
@ -173,10 +171,10 @@ const TimelinePanel: Component<{
Retry Retry
</Button> </Button>
</Match> </Match>
<Match when={typeof props.fullRefetch === "undefined"}> <Match when={true}>
<Button <Button
variant="contained" variant="contained"
onClick={[refetchTimeline, "next"]} onClick={[refetchTimeline, "prev"]}
disabled={snapshot.loading} disabled={snapshot.loading}
> >
Load More Load More