From 9c755fa69f5e58c0323e6c7650692543fc518b36 Mon Sep 17 00:00:00 2001 From: Kieran Date: Tue, 17 Jan 2023 21:55:53 +0000 Subject: [PATCH] bug: fix infinite scroll loading --- src/Util.ts | 4 +++ src/element/Timeline.tsx | 12 +++++--- src/feed/Subscription.ts | 44 ++++++++++++++++++++++------ src/feed/TimelineFeed.ts | 60 +++++++++++++++++++++++++-------------- src/pages/ProfilePage.tsx | 2 +- src/pages/Root.tsx | 2 +- 6 files changed, 87 insertions(+), 37 deletions(-) diff --git a/src/Util.ts b/src/Util.ts index f8fe939f..0871674e 100644 --- a/src/Util.ts +++ b/src/Util.ts @@ -142,3 +142,7 @@ export function extractLnAddress(lnurl: string) { } return lnurl; } + +export function unixNow() { + return Math.floor(new Date().getTime() / 1000); +} \ No newline at end of file diff --git a/src/element/Timeline.tsx b/src/element/Timeline.tsx index 2a57fae6..1d5cea10 100644 --- a/src/element/Timeline.tsx +++ b/src/element/Timeline.tsx @@ -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 ? : null} + {mainFeed.length > 0 ? : null} ); } \ No newline at end of file diff --git a/src/feed/Subscription.ts b/src/feed/Subscription.ts index 3f35284a..5926cd50 100644 --- a/src/feed/Subscription.ts +++ b/src/feed/Subscription.ts @@ -4,15 +4,29 @@ import { TaggedRawEvent } from "../nostr"; import { Subscriptions } from "../nostr/Subscriptions"; export type NoteStore = { - notes: Array + notes: Array, + 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, { notes: [] }); + const [state, dispatch] = useReducer(notesReducer, initStore); const [debounce, setDebounce] = useState(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); diff --git a/src/feed/TimelineFeed.ts b/src/feed/TimelineFeed.ts index c7e905da..52b79ea9 100644 --- a/src/feed/TimelineFeed.ts +++ b/src/feed/TimelineFeed.ts @@ -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, global: boolean = false) { - const [until, setUntil] = useState(); +export interface TimelineFeedOptions { + global: boolean, + method: "TIME_RANGE" | "LIMIT_UNTIL" +} + +export default function useTimelineFeed(pubKeys: HexKey | Array, options: TimelineFeedOptions) { + const now = unixNow(); + const [window, setWindow] = useState(60 * 60); + const [until, setUntil] = useState(now); + const [since, setSince] = useState(now - window); const [trackingEvents, setTrackingEvent] = useState([]); - 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, 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, 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); + } + } }; } \ No newline at end of file diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index d730c6fd..7802601f 100644 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -84,7 +84,7 @@ export default function ProfilePage() { function tabContent() { switch (tab) { case ProfileTab.Notes: - return ; + return ; case ProfileTab.Follows: { if (isMe) { return ( diff --git a/src/pages/Root.tsx b/src/pages/Root.tsx index d1486e87..4b496cc9 100644 --- a/src/pages/Root.tsx +++ b/src/pages/Root.tsx @@ -41,7 +41,7 @@ export default function RootPage() { : null} {followHints()} - + ); } \ No newline at end of file