get note replies via useSubscribe

irislib · Aug 23, 2023 · 13354d5 · 13354d5
1 parent b621544
commit 13354d5
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 62 deletions.
diff --git a/src/js/components/events/EventComponent.tsx b/src/js/components/events/EventComponent.tsx
@@ -100,26 +100,17 @@ const EventComponent = (props: EventComponentProps) => {
     return props.asInlineQuote ? null : <EventDropdown id={props.id || ''} event={state.event} />;
   };
 
-  const getClassName = () => {
-    let className = 'msg';
-    if (props.standalone) className += ' standalone';
-    const isQuote = props.isQuote || (props.showReplies && state.sortedReplies?.length);
-    if (isQuote) className += ' quote';
-    return className;
-  };
-
   if (!props.id) {
     console.error('no id on event', props);
     return null;
   }
   if (!state.event) {
     return (
-      <div key={props.id} className={getClassName()}>
+      <div key={props.id}>
         <div
-          className={`msg-content retrieving ${
+          className={`m-2 md:mx-4 flex items-center ${
             state.retrieving ? 'opacity-100' : 'opacity-0'
           } transition-opacity duration-700 ease-in-out`}
-          style={{ display: 'flex', alignItems: 'center' }}
         >
           <div className="text">{t('looking_up_message')}</div>
           <div>{renderDropdown()}</div>
@@ -131,13 +122,9 @@ const EventComponent = (props: EventComponentProps) => {
   if (SocialNetwork.isBlocked(state.event.pubkey)) {
     if (props.standalone || props.isQuote) {
       return (
-        <div className="msg">
-          <div className="msg-content">
-            <p style={{ display: 'flex', alignItems: 'center' }}>
-              <i style={{ marginRight: '15px' }}>{Icons.newFollower}</i>
-              <span> Message from a blocked user</span>
-            </p>
-          </div>
+        <div className="m-2 md:mx-4 flex items-center">
+          <i className="mr-2">{Icons.newFollower}</i>
+          <span> Message from a blocked user</span>
         </div>
       );
     } else {
@@ -173,7 +160,6 @@ const EventComponent = (props: EventComponentProps) => {
     return (
       <Component
         key={props.id}
-        className={getClassName()}
         event={state.event}
         fullWidth={props.fullWidth}
         fadeIn={!props.feedOpenedAt || props.feedOpenedAt < state.event.created_at}

diff --git a/src/js/components/events/note/Note.tsx b/src/js/components/events/note/Note.tsx
@@ -1,12 +1,10 @@
-import { useMemo } from 'react';
-import { Event } from 'nostr-tools';
-import { useEffect, useState } from 'preact/hooks';
+import { useCallback, useMemo } from 'react';
+import { Filter } from 'nostr-tools';
 import { Link, route } from 'preact-router';
 
 import InfiniteScroll from '@/components/helpers/InfiniteScroll';
-import PubSub from '@/nostr/PubSub';
-import { getEventRoot, getNoteReplyingTo } from '@/nostr/utils';
-import SortedMap from '@/utils/SortedMap/SortedMap.tsx';
+import useSubscribe from '@/nostr/hooks/useSubscribe.ts';
+import { getEventReplyingTo, getEventRoot } from '@/nostr/utils';
 
 import Key from '../../../nostr/Key';
 import { translate as t } from '../../../translations/Translation.mjs';
@@ -27,8 +25,21 @@ const Note = ({
   standalone = false,
   fullWidth,
 }) => {
-  const [replies, setReplies] = useState([] as string[]);
-  const replyingTo = useMemo(() => getNoteReplyingTo(event), [event]);
+  const replyingTo = useMemo(() => getEventReplyingTo(event), [event]);
+
+  const repliesFilter = useMemo(() => {
+    const filter: Filter = { '#e': [event.id], kinds: [1] };
+    if (showReplies !== Infinity) {
+      filter.limit = showReplies;
+    }
+    return filter;
+  }, [event.id, showReplies]);
+  const repliesFilterFn = useCallback((e) => getEventReplyingTo(e) === event.id, [event.id]);
+  const { events: replies } = useSubscribe({
+    filter: repliesFilter,
+    filterFn: repliesFilterFn,
+    enabled: !!showReplies,
+  });
 
   if (!standalone && showReplies && replies.length) {
     isQuote = true;
@@ -67,37 +78,9 @@ const Note = ({
     return classNames.join(' ');
   }, [standalone, isQuote, isQuoting, asInlineQuote, fullWidth]);
 
-  useEffect(() => {
-    const comparator = (a: [string, Event], b: [string, Event]) => {
-      const aEvent = a[1];
-      const bEvent = b[1];
-
-      if (!aEvent && !bEvent) return 0;
-      if (!aEvent) return -1;
-      if (!bEvent) return 1;
-
-      return aEvent.created_at - bEvent.created_at;
-    };
-
-    const sortedRepliesMap = new SortedMap<string, Event>([], comparator);
-
-    const callback = (reply) => {
-      if (getNoteReplyingTo(reply) !== event.id) return;
-      sortedRepliesMap.set(reply.id, reply);
-      const sortedReplies = Array.from(sortedRepliesMap.keys()).slice(0, showReplies);
-      setReplies(sortedReplies);
-    };
-
-    const unsubscribe = PubSub.subscribe({ '#e': [event.id], kinds: [1] }, callback, false);
-
-    return () => {
-      unsubscribe();
-    };
-  }, [event.id, showReplies]);
-
-  let rootMsg = getEventRoot(event);
-  if (!rootMsg) {
-    rootMsg = replyingTo;
+  let threadRoot = getEventRoot(event);
+  if (!threadRoot) {
+    threadRoot = replyingTo;
   }
 
   function messageClicked(clickEvent) {
@@ -124,10 +107,10 @@ const Note = ({
     ) : null;
 
   const showThreadBtn = (
-    <Show when={!standalone && !isReply && !isQuoting && rootMsg}>
+    <Show when={!standalone && !isReply && !isQuoting && threadRoot}>
       <Link
         className="text-iris-blue text-sm block mb-2"
-        href={`/${Key.toNostrBech32Address(rootMsg || '', 'note')}`}
+        href={`/${Key.toNostrBech32Address(threadRoot || '', 'note')}`}
       >
         {t('show_thread')}
       </Link>
@@ -160,8 +143,14 @@ const Note = ({
         <hr className="opacity-10" />
       </Show>
       <InfiniteScroll>
-        {replies.map((r) => (
-          <EventComponent key={r} id={r} isReply={true} isQuoting={!standalone} showReplies={1} />
+        {replies.reverse().map((r) => (
+          <EventComponent
+            key={r.id}
+            id={r.id}
+            isReply={true}
+            isQuoting={!standalone}
+            showReplies={1}
+          />
         ))}
       </InfiniteScroll>
     </>

diff --git a/src/js/nostr/hooks/useSubscribe.ts b/src/js/nostr/hooks/useSubscribe.ts
@@ -36,6 +36,7 @@ const useSubscribe = (ops: SubscribeOptions) => {
   const lastUntilRef = useRef<number | null>(null);
 
   const updateEvents = useCallback(() => {
+    // maybe we should still add filter by displaycount?
     let e = EventDB.findArray({ ...filter, limit: undefined });
     if (filterFn) {
       e = e.filter(filterFn);