feat: load more

syusui-s · Jan 7, 2024 · fd08875 · fd08875
1 parent 022256e
commit fd08875
Show file tree

Hide file tree

Showing 13 changed files with 294 additions and 44 deletions.
diff --git a/src/components/column/Column.tsx b/src/components/column/Column.tsx
@@ -8,6 +8,7 @@ import { useHandleCommand } from '@/hooks/useCommandBus';
 import { useTranslation } from '@/i18n/useTranslation';
 
 export type ColumnProps = {
+  timelineRef?: (el: HTMLDivElement) => void;
   columnIndex: number;
   lastColumn: boolean;
   width: 'widest' | 'wide' | 'medium' | 'narrow' | null | undefined;
@@ -59,7 +60,7 @@ const Column: Component<ColumnProps> = (props) => {
           fallback={
             <>
               <div class="shrink-0 border-b border-border">{props.header}</div>
-              <div class="scrollbar flex flex-col overflow-y-scroll scroll-smooth pb-16">
+              <div ref={props.timelineRef} class="scrollbar flex flex-col overflow-y-scroll pb-16">
                 {props.children}
               </div>
             </>

diff --git a/src/components/column/FollwingColumn.tsx b/src/components/column/FollwingColumn.tsx
@@ -6,14 +6,14 @@ import { uniq } from 'lodash';
 import BasicColumnHeader from '@/components/column/BasicColumnHeader';
 import Column from '@/components/column/Column';
 import ColumnSettings from '@/components/column/ColumnSettings';
+import LoadMore, { useLoadMore } from '@/components/column/LoadMore';
 import Timeline from '@/components/timeline/Timeline';
 import { FollowingColumnType } from '@/core/column';
 import { applyContentFilter } from '@/core/contentFilter';
 import useConfig from '@/core/useConfig';
 import { useTranslation } from '@/i18n/useTranslation';
 import useFollowings from '@/nostr/useFollowings';
 import useSubscription from '@/nostr/useSubscription';
-import epoch from '@/utils/epoch';
 
 type FollowingColumnDisplayProps = {
   columnIndex: number;
@@ -27,7 +27,11 @@ const FollowingColumn: Component<FollowingColumnDisplayProps> = (props) => {
 
   const { followingPubkeys } = useFollowings(() => ({ pubkey: props.column.pubkey }));
 
-  const { events } = useSubscription(() => {
+  const loadMore = useLoadMore(() => ({
+    duration: 4 * 60 * 60,
+  }));
+
+  const { events, eose } = useSubscription(() => {
     const authors = uniq([...followingPubkeys()]);
     if (authors.length === 0) return null;
     return {
@@ -37,10 +41,13 @@ const FollowingColumn: Component<FollowingColumnDisplayProps> = (props) => {
         {
           kinds: [1, 6],
           authors,
-          limit: 10,
-          since: epoch() - 4 * 60 * 60,
+          limit: 20,
+          since: loadMore.since(),
+          until: loadMore.until(),
         },
       ],
+      eoseLimit: 20,
+      continuous: loadMore.continuous(),
       clientEventFilter: (event) => {
         if (props.column.contentFilter == null) return true;
         return applyContentFilter(props.column.contentFilter)(event.content);
@@ -50,6 +57,7 @@ const FollowingColumn: Component<FollowingColumnDisplayProps> = (props) => {
 
   createEffect(() => {
     console.log('home', events());
+    loadMore.setEvents(events());
   });
 
   onMount(() => console.log('home timeline mounted'));
@@ -68,8 +76,11 @@ const FollowingColumn: Component<FollowingColumnDisplayProps> = (props) => {
       width={props.column.width}
       columnIndex={props.columnIndex}
       lastColumn={props.lastColumn}
+      timelineRef={loadMore.timelineRef}
     >
-      <Timeline events={events()} />
+      <LoadMore loadMore={loadMore} eose={eose()}>
+        <Timeline events={events()} />
+      </LoadMore>
     </Column>
   );
 };

diff --git a/src/components/column/LoadMore.tsx b/src/components/column/LoadMore.tsx
@@ -0,0 +1,112 @@
+import {
+  createSignal,
+  createMemo,
+  batch,
+  Show,
+  type JSX,
+  type Accessor,
+  type Component,
+} from 'solid-js';
+
+import { type Event as NostrEvent } from 'nostr-tools';
+
+import ColumnItem from '@/components/ColumnItem';
+import useScroll from '@/hooks/useScroll';
+import { useTranslation } from '@/i18n/useTranslation';
+import { pickOldestEvent } from '@/nostr/event/comparator';
+import epoch from '@/utils/epoch';
+
+export type UseLoadMoreProps = {
+  duration: number | null;
+};
+
+export type UseLoadMore = {
+  timelineRef: (el: HTMLElement) => void;
+  setEvents: (event: NostrEvent[]) => void;
+  since: Accessor<number | undefined>;
+  until: Accessor<number | undefined>;
+  continuous: Accessor<boolean>;
+  loadLatest: () => void;
+  loadOld: () => void;
+};
+
+export type LoadMoreProps = {
+  loadMore: UseLoadMore;
+  children: JSX.Element;
+  eose: boolean;
+};
+
+export const useLoadMore = (propsProvider: () => UseLoadMoreProps): UseLoadMore => {
+  const props = createMemo(propsProvider);
+  const calcSince = (base: number): number | undefined => {
+    const { duration } = props();
+    if (duration == null) return undefined;
+    return base - duration;
+  };
+
+  const [events, setEvents] = createSignal<NostrEvent[]>([]);
+  const [since, setSince] = createSignal<number | undefined>(calcSince(epoch()));
+  const [until, setUntil] = createSignal<number | undefined>();
+  const continuous = () => until() == null;
+
+  const scroll = useScroll();
+
+  const loadLatest = () => {
+    batch(() => {
+      setUntil(undefined);
+      setSince(calcSince(epoch()));
+    });
+    scroll.scrollToTop();
+  };
+
+  const loadOld = () => {
+    const oldest = pickOldestEvent(events());
+    if (oldest == null) return;
+    batch(() => {
+      setUntil(oldest.created_at);
+      setSince(calcSince(oldest.created_at));
+    });
+    scroll.scrollToTop();
+  };
+
+  return {
+    timelineRef: scroll.targetRef,
+    setEvents,
+    since,
+    until,
+    continuous,
+    loadLatest,
+    loadOld,
+  };
+};
+
+const LoadMore: Component<LoadMoreProps> = (props) => {
+  const i18n = useTranslation();
+
+  return (
+    <>
+      <Show when={!props.loadMore.continuous()}>
+        <ColumnItem>
+          <button
+            class="flex h-12 w-full flex-col items-center justify-center hover:text-fg-secondary"
+            onClick={() => props.loadMore.loadLatest()}
+          >
+            <span>{i18n()('column.loadLatest')}</span>
+          </button>
+        </ColumnItem>
+      </Show>
+      {props.children}
+      <ColumnItem>
+        <button
+          class="flex h-12 w-full flex-col items-center justify-center hover:text-fg-secondary disabled:text-fg-secondary/30"
+          disabled={!props.eose}
+          onClick={() => props.loadMore.loadOld()}
+        >
+          <span>{i18n()('column.loadOld')}</span>
+        </button>
+      </ColumnItem>
+    </>
+  );
+};
+
+export default LoadMore;
diff --git a/src/components/column/NotificationColumn.tsx b/src/components/column/NotificationColumn.tsx
@@ -1,10 +1,11 @@
-import { Component } from 'solid-js';
+import { createEffect, Component } from 'solid-js';
 
 import Bell from 'heroicons/24/outline/bell.svg';
 
 import BasicColumnHeader from '@/components/column/BasicColumnHeader';
 import Column from '@/components/column/Column';
 import ColumnSettings from '@/components/column/ColumnSettings';
+import LoadMore, { useLoadMore } from '@/components/column/LoadMore';
 import Notification from '@/components/timeline/Notification';
 import { NotificationColumnType } from '@/core/column';
 import { applyContentFilter } from '@/core/contentFilter';
@@ -22,21 +23,28 @@ const NotificationColumn: Component<NotificationColumnDisplayProps> = (props) =>
   const i18n = useTranslation();
   const { config, removeColumn } = useConfig();
 
-  const { events: notifications } = useSubscription(() => ({
+  const loadMore = useLoadMore(() => ({ duration: null }));
+
+  const { events: notifications, eose } = useSubscription(() => ({
     relayUrls: config().relayUrls,
     filters: [
       {
         kinds: [1, 6, 7, 9735],
         '#p': [props.column.pubkey],
-        limit: 10,
+        limit: 20,
+        since: loadMore.since(),
+        until: loadMore.until(),
       },
     ],
+    eoseLimit: 20,
     clientEventFilter: (event) => {
       if (props.column.contentFilter == null) return true;
       return applyContentFilter(props.column.contentFilter)(event.content);
     },
   }));
 
+  createEffect(() => loadMore.setEvents(notifications()));
+
   return (
     <Column
       header={
@@ -50,8 +58,11 @@ const NotificationColumn: Component<NotificationColumnDisplayProps> = (props) =>
       width={props.column.width}
       columnIndex={props.columnIndex}
       lastColumn={props.lastColumn}
+      timelineRef={loadMore.timelineRef}
     >
-      <Notification events={notifications()} />
+      <LoadMore loadMore={loadMore} eose={eose()}>
+        <Notification events={notifications()} />
+      </LoadMore>
     </Column>
   );
 };

diff --git a/src/components/column/PostsColumn.tsx b/src/components/column/PostsColumn.tsx
@@ -1,10 +1,11 @@
-import { Component } from 'solid-js';
+import { createEffect, Component } from 'solid-js';
 
 import User from 'heroicons/24/outline/user.svg';
 
 import BasicColumnHeader from '@/components/column/BasicColumnHeader';
 import Column from '@/components/column/Column';
 import ColumnSettings from '@/components/column/ColumnSettings';
+import LoadMore, { useLoadMore } from '@/components/column/LoadMore';
 import Timeline from '@/components/timeline/Timeline';
 import { PostsColumnType } from '@/core/column';
 import { applyContentFilter } from '@/core/contentFilter';
@@ -22,21 +23,28 @@ const PostsColumn: Component<PostsColumnDisplayProps> = (props) => {
   const i18n = useTranslation();
   const { config, removeColumn } = useConfig();
 
-  const { events } = useSubscription(() => ({
+  const loadMore = useLoadMore(() => ({ duration: null }));
+
+  const { events, eose } = useSubscription(() => ({
     relayUrls: config().relayUrls,
     filters: [
       {
         kinds: [1, 6],
         authors: [props.column.pubkey],
         limit: 10,
+        since: loadMore.since(),
+        until: loadMore.until(),
       },
     ],
+    eoseLimit: 10,
     clientEventFilter: (event) => {
       if (props.column.contentFilter == null) return true;
       return applyContentFilter(props.column.contentFilter)(event.content);
     },
   }));
 
+  createEffect(() => loadMore.setEvents(events()));
+
   return (
     <Column
       header={
@@ -50,8 +58,11 @@ const PostsColumn: Component<PostsColumnDisplayProps> = (props) => {
       width={props.column.width}
       columnIndex={props.columnIndex}
       lastColumn={props.lastColumn}
+      timelineRef={loadMore.timelineRef}
     >
-      <Timeline events={events()} />
+      <LoadMore loadMore={loadMore} eose={eose()}>
+        <Timeline events={events()} />
+      </LoadMore>
     </Column>
   );
 };

diff --git a/src/components/column/ReactionsColumn.tsx b/src/components/column/ReactionsColumn.tsx
@@ -1,10 +1,11 @@
-import { Component } from 'solid-js';
+import { createEffect, Component } from 'solid-js';
 
 import Heart from 'heroicons/24/outline/heart.svg';
 
 import BasicColumnHeader from '@/components/column/BasicColumnHeader';
 import Column from '@/components/column/Column';
 import ColumnSettings from '@/components/column/ColumnSettings';
+import LoadMore, { useLoadMore } from '@/components/column/LoadMore';
 import Notification from '@/components/timeline/Notification';
 import { ReactionsColumnType } from '@/core/column';
 import { applyContentFilter } from '@/core/contentFilter';
@@ -22,21 +23,28 @@ const ReactionsColumn: Component<ReactionsColumnDisplayProps> = (props) => {
   const i18n = useTranslation();
   const { config, removeColumn } = useConfig();
 
-  const { events: reactions } = useSubscription(() => ({
+  const loadMore = useLoadMore(() => ({ duration: null }));
+
+  const { events: reactions, eose } = useSubscription(() => ({
     relayUrls: config().relayUrls,
     filters: [
       {
         kinds: [7],
         authors: [props.column.pubkey],
         limit: 10,
+        since: loadMore.since(),
+        until: loadMore.until(),
       },
     ],
+    eoseLimit: 10,
     clientEventFilter: (event) => {
       if (props.column.contentFilter == null) return true;
       return applyContentFilter(props.column.contentFilter)(event.content);
     },
   }));
 
+  createEffect(() => loadMore.setEvents(reactions()));
+
   return (
     <Column
       header={
@@ -50,8 +58,11 @@ const ReactionsColumn: Component<ReactionsColumnDisplayProps> = (props) => {
       width={props.column.width}
       columnIndex={props.columnIndex}
       lastColumn={props.lastColumn}
+      timelineRef={loadMore.timelineRef}
     >
-      <Notification events={reactions()} />
+      <LoadMore loadMore={loadMore} eose={eose()}>
+        <Notification events={reactions()} />
+      </LoadMore>
     </Column>
   );
 };