bug: fix infinite scroll loading
This commit is contained in:
parent
077b1d02b2
commit
9c755fa69f
@ -142,3 +142,7 @@ export function extractLnAddress(lnurl: string) {
|
||||
}
|
||||
return lnurl;
|
||||
}
|
||||
|
||||
export function unixNow() {
|
||||
return Math.floor(new Date().getTime() / 1000);
|
||||
}
|
@ -9,14 +9,18 @@ import NoteReaction from "./NoteReaction";
|
||||
export interface TimelineProps {
|
||||
global: boolean,
|
||||
postsOnly: boolean,
|
||||
pubkeys: HexKey[]
|
||||
pubkeys: HexKey[],
|
||||
method: "TIME_RANGE" | "LIMIT_UNTIL"
|
||||
}
|
||||
|
||||
/**
|
||||
* A list of notes by pubkeys
|
||||
*/
|
||||
export default function Timeline({ global, pubkeys, postsOnly = false }: TimelineProps) {
|
||||
const { main, others, loadMore, until } = useTimelineFeed(pubkeys, global);
|
||||
export default function Timeline({ global, pubkeys, postsOnly = false, method }: TimelineProps) {
|
||||
const { main, others, loadMore } = useTimelineFeed(pubkeys, {
|
||||
global,
|
||||
method
|
||||
});
|
||||
|
||||
const mainFeed = useMemo(() => {
|
||||
return main?.sort((a, b) => b.created_at - a.created_at)?.filter(a => postsOnly ? !a.tags.some(b => b[0] === "e") : true);
|
||||
@ -37,7 +41,7 @@ export default function Timeline({ global, pubkeys, postsOnly = false }: Timelin
|
||||
return (
|
||||
<>
|
||||
{mainFeed.map(eventElement)}
|
||||
{mainFeed.length > 0 ? <LoadMore key={until} onLoadMore={loadMore} /> : null}
|
||||
{mainFeed.length > 0 ? <LoadMore onLoadMore={loadMore} /> : null}
|
||||
</>
|
||||
);
|
||||
}
|
@ -4,15 +4,29 @@ import { TaggedRawEvent } from "../nostr";
|
||||
import { Subscriptions } from "../nostr/Subscriptions";
|
||||
|
||||
export type NoteStore = {
|
||||
notes: Array<TaggedRawEvent>
|
||||
notes: Array<TaggedRawEvent>,
|
||||
end: boolean
|
||||
};
|
||||
|
||||
export type UseSubscriptionOptions = {
|
||||
leaveOpen: boolean
|
||||
}
|
||||
|
||||
function notesReducer(state: NoteStore, ev: TaggedRawEvent) {
|
||||
interface ReducerArg {
|
||||
type: "END" | "EVENT"
|
||||
ev?: TaggedRawEvent,
|
||||
end?: boolean
|
||||
}
|
||||
|
||||
function notesReducer(state: NoteStore, arg: ReducerArg) {
|
||||
if (arg.type === "END") {
|
||||
state.end = arg.end!;
|
||||
return state;
|
||||
}
|
||||
|
||||
let ev = arg.ev!;
|
||||
if (state.notes.some(a => a.id === ev.id)) {
|
||||
//state.notes.find(a => a.id == ev.id)?.relays?.push(ev.relays[0]);
|
||||
return state;
|
||||
}
|
||||
|
||||
@ -21,9 +35,14 @@ function notesReducer(state: NoteStore, ev: TaggedRawEvent) {
|
||||
...state.notes,
|
||||
ev
|
||||
]
|
||||
}
|
||||
} as NoteStore;
|
||||
}
|
||||
|
||||
const initStore: NoteStore = {
|
||||
notes: [],
|
||||
end: false
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {Subscriptions} sub
|
||||
@ -31,23 +50,30 @@ function notesReducer(state: NoteStore, ev: TaggedRawEvent) {
|
||||
* @returns
|
||||
*/
|
||||
export default function useSubscription(sub: Subscriptions | null, options?: UseSubscriptionOptions) {
|
||||
const [state, dispatch] = useReducer(notesReducer, <NoteStore>{ notes: [] });
|
||||
const [state, dispatch] = useReducer(notesReducer, initStore);
|
||||
const [debounce, setDebounce] = useState<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (sub) {
|
||||
sub.OnEvent = (e) => {
|
||||
dispatch(e);
|
||||
dispatch({
|
||||
type: "EVENT",
|
||||
ev: e
|
||||
});
|
||||
};
|
||||
|
||||
if (!(options?.leaveOpen ?? false)) {
|
||||
sub.OnEnd = (c) => {
|
||||
sub.OnEnd = (c) => {
|
||||
if (!(options?.leaveOpen ?? false)) {
|
||||
c.RemoveSubscription(sub.Id);
|
||||
if (sub.IsFinished()) {
|
||||
System.RemoveSubscription(sub.Id);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
dispatch({
|
||||
type: "END",
|
||||
end: true
|
||||
});
|
||||
};
|
||||
|
||||
console.debug("Adding sub: ", sub.ToObject());
|
||||
System.AddSubscription(sub);
|
||||
|
@ -2,31 +2,48 @@ import { useEffect, useMemo, useState } from "react";
|
||||
import { HexKey, u256 } from "../nostr";
|
||||
import EventKind from "../nostr/EventKind";
|
||||
import { Subscriptions } from "../nostr/Subscriptions";
|
||||
import { unixNow } from "../Util";
|
||||
import useSubscription from "./Subscription";
|
||||
|
||||
export default function useTimelineFeed(pubKeys: HexKey | Array<HexKey>, global: boolean = false) {
|
||||
const [until, setUntil] = useState<number>();
|
||||
export interface TimelineFeedOptions {
|
||||
global: boolean,
|
||||
method: "TIME_RANGE" | "LIMIT_UNTIL"
|
||||
}
|
||||
|
||||
export default function useTimelineFeed(pubKeys: HexKey | Array<HexKey>, options: TimelineFeedOptions) {
|
||||
const now = unixNow();
|
||||
const [window, setWindow] = useState<number>(60 * 60);
|
||||
const [until, setUntil] = useState<number>(now);
|
||||
const [since, setSince] = useState<number>(now - window);
|
||||
const [trackingEvents, setTrackingEvent] = useState<u256[]>([]);
|
||||
|
||||
const subTab = global ? "global" : "follows";
|
||||
const subTab = options.global ? "global" : "follows";
|
||||
const sub = useMemo(() => {
|
||||
if (!Array.isArray(pubKeys)) {
|
||||
pubKeys = [pubKeys];
|
||||
}
|
||||
|
||||
if (!global && (!pubKeys || pubKeys.length === 0)) {
|
||||
if (!options.global && (!pubKeys || pubKeys.length === 0)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let sub = new Subscriptions();
|
||||
sub.Id = `timeline:${subTab}`;
|
||||
sub.Authors = global ? undefined : new Set(pubKeys);
|
||||
sub.Authors = options.global ? undefined : new Set(pubKeys);
|
||||
sub.Kinds = new Set([EventKind.TextNote, EventKind.Repost]);
|
||||
sub.Limit = 20;
|
||||
sub.Until = until;
|
||||
if (options.method === "LIMIT_UNTIL") {
|
||||
sub.Until = until;
|
||||
sub.Limit = 10;
|
||||
} else {
|
||||
sub.Since = since;
|
||||
sub.Until = until;
|
||||
if (since === undefined) {
|
||||
sub.Limit = 50;
|
||||
}
|
||||
}
|
||||
|
||||
return sub;
|
||||
}, [pubKeys, global, until]);
|
||||
}, [pubKeys, until, since, window]);
|
||||
|
||||
const main = useSubscription(sub, { leaveOpen: true });
|
||||
|
||||
@ -45,15 +62,11 @@ export default function useTimelineFeed(pubKeys: HexKey | Array<HexKey>, global:
|
||||
|
||||
useEffect(() => {
|
||||
if (main.notes.length > 0) {
|
||||
// debounce
|
||||
let t = setTimeout(() => {
|
||||
setTrackingEvent(s => {
|
||||
let ids = main.notes.map(a => a.id);
|
||||
let temp = new Set([...s, ...ids]);
|
||||
return Array.from(temp);
|
||||
});
|
||||
}, 200);
|
||||
return () => clearTimeout(t);
|
||||
setTrackingEvent(s => {
|
||||
let ids = main.notes.map(a => a.id);
|
||||
let temp = new Set([...s, ...ids]);
|
||||
return Array.from(temp);
|
||||
});
|
||||
}
|
||||
}, [main.notes]);
|
||||
|
||||
@ -61,10 +74,13 @@ export default function useTimelineFeed(pubKeys: HexKey | Array<HexKey>, global:
|
||||
main: main.notes,
|
||||
others: others.notes,
|
||||
loadMore: () => {
|
||||
let now = Math.floor(new Date().getTime() / 1000);
|
||||
let oldest = main.notes.reduce((acc, v) => acc = v.created_at < acc ? v.created_at : acc, now);
|
||||
setUntil(oldest);
|
||||
},
|
||||
until
|
||||
if (options.method === "LIMIT_UNTIL") {
|
||||
let oldest = main.notes.reduce((acc, v) => acc = v.created_at < acc ? v.created_at : acc, unixNow());
|
||||
setUntil(oldest);
|
||||
} else {
|
||||
setUntil(s => s - window);
|
||||
setSince(s => s - window);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
@ -84,7 +84,7 @@ export default function ProfilePage() {
|
||||
function tabContent() {
|
||||
switch (tab) {
|
||||
case ProfileTab.Notes:
|
||||
return <Timeline key={id} pubkeys={[id]} global={false} postsOnly={false} />;
|
||||
return <Timeline key={id} pubkeys={[id]} global={false} postsOnly={false} method={"LIMIT_UNTIL"} />;
|
||||
case ProfileTab.Follows: {
|
||||
if (isMe) {
|
||||
return (
|
||||
|
@ -41,7 +41,7 @@ export default function RootPage() {
|
||||
</div>
|
||||
</div></> : null}
|
||||
{followHints()}
|
||||
<Timeline key={tab} pubkeys={follows} global={loggedOut || tab === RootTab.Global} postsOnly={tab === RootTab.Posts} />
|
||||
<Timeline key={tab} pubkeys={follows} global={loggedOut || tab === RootTab.Global} postsOnly={tab === RootTab.Posts} method={"TIME_RANGE"} />
|
||||
</>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user