wip: add reaction count with react-query

src/components/PostItems/PostReactions/hook.ts

@@ -0,0 +1,66 @@
+import { useQueryMsg } from 'components/TimelineRender/hook/useQueryMsg';
+import { EventId, Filter, WellKnownEventKind } from 'core/nostr/type';
+import { CallWorker } from 'core/worker/caller';
+import { useCallback, useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+
+export interface ReactionCountProp {
+  worker: CallWorker | undefined;
+  eventId: EventId;
+}
+
+export interface ReactionCount {
+  repost: number;
+  zap: number;
+  comment: number;
+  bookmark: number;
+}
+
+export function useReactionCount({ worker, eventId }: ReactionCountProp) {
+  const relayUrls = useMemo(
+    () => worker?.relays.map(r => r.url) || [],
+    [worker?.relays],
+  );
+  const filter: Filter = useMemo(() => {
+    return {
+      '#e': [eventId],
+      kinds: [
+        WellKnownEventKind.text_note,
+        WellKnownEventKind.reposts,
+        WellKnownEventKind.zap_receipt,
+        WellKnownEventKind.bookmark_list,
+      ],
+    };
+  }, [eventId]);
+
+  const { queryMsg } = useQueryMsg();
+
+  const queryFn = useCallback(async () => {
+    return await queryMsg({ filter, worker });
+  }, [filter, relayUrls, worker, queryMsg]);
+
+  const queryKey = ['reaction-count', filter, relayUrls];
+  const { data, isFetching } = useQuery({
+    queryKey,
+    queryFn,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    staleTime: Infinity,
+  });
+
+  const reactCount = useMemo(() => {
+    if (!data) return undefined;
+
+    const reactCount: ReactionCount = {
+      repost: data.filter(e => e.kind === WellKnownEventKind.reposts).length,
+      comment: data.filter(e => e.kind === WellKnownEventKind.reposts).length,
+      zap: data.filter(e => e.kind === WellKnownEventKind.zap_receipt).length,
+      bookmark: data.filter(e => e.kind === WellKnownEventKind.bookmark_list)
+        .length,
+    };
+    return reactCount;
+  }, [data]);
+
+  return { reactCount, isFetching };
+}

src/components/PostItems/PostReactions/index.tsx

@@ -18,6 +18,7 @@ import { RootState } from 'store/configureStore';
 import { noticePubEventResult } from 'components/PubEventNotice';
 import { useRouter } from 'next/router';
 import { dexieDb } from 'core/db';
+import { useReactionCount } from './hook';
 
 import Icon from 'components/Icon';
 import styles from './index.module.scss';
@@ -136,17 +137,28 @@ const PostReactions: React.FC<PostReactionsProp> = ({
     setIsBookMarking(false);
   };
 
+  const { reactCount } = useReactionCount({
+    worker,
+    eventId: ownerEvent.id,
+  });
+
+  const displayCount = (count?: number) => (
+    <>{count && count > 0 ? <span>{count}</span> : ''}</>
+  );
+
   return (
     <ul className={styles.reactions}>
       {contextHolder}
       <li>
         <Tooltip placement="top" title={'repost'}>
           <Icon onClick={repost} type="icon-repost" className={styles.upload} />
+          {displayCount(reactCount?.repost)}
         </Tooltip>
       </li>
       <li>
         <Tooltip placement="top" title={'zap'}>
           <Icon onClick={zap} type="icon-bolt" className={styles.upload} />
+          {displayCount(reactCount?.zap)}
         </Tooltip>
       </li>
       <li>
@@ -156,6 +168,7 @@ const PostReactions: React.FC<PostReactionsProp> = ({
             type="icon-comment"
             className={styles.upload}
           />
+          {displayCount(reactCount?.comment)}
         </Tooltip>
       </li>
       <li>
@@ -166,6 +179,7 @@ const PostReactions: React.FC<PostReactionsProp> = ({
             type="icon-bookmark"
             className={styles.upload}
           />
+          {displayCount(reactCount?.bookmark)}
         </Tooltip>
       </li>
     </ul>