bug: fix infinite scroll loading

src/Util.ts

@@ -142,3 +142,7 @@ export function extractLnAddress(lnurl: string) {
     }
     return lnurl;
 }
+
+export function unixNow() {
+    return Math.floor(new Date().getTime() / 1000);
+} 

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 ? <LoadMore key={until} onLoadMore={loadMore} /> : null}
+            {mainFeed.length > 0 ? <LoadMore onLoadMore={loadMore} /> : null}
         </>
     );
 }

src/feed/Subscription.ts

@@ -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);

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<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);
+            }
+        }
     };
 }

src/pages/ProfilePage.tsx

@@ -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 (

src/pages/Root.tsx

@@ -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"} />
         </>
     );
 }