show total number of replies

src/helpers/thread.ts

@@ -1,12 +1,16 @@
 import { NostrEvent } from "../types/nostr-event";
 import { EventReferences, getReferences } from "./nostr-event";
 
+export function countReplies(thread: ThreadItem): number {
+  return thread.replies.reduce((c, item) => c + countReplies(item), 0) + thread.replies.length;
+}
+
 export type ThreadItem = {
   event: NostrEvent;
   root?: ThreadItem;
   reply?: ThreadItem;
   refs: EventReferences;
-  children: ThreadItem[];
+  replies: ThreadItem[];
 };
 
 export function linkEvents(events: NostrEvent[]) {
@@ -24,7 +28,7 @@ export function linkEvents(events: NostrEvent[]) {
     replies.set(event.id, {
       event,
       refs,
-      children: [],
+      replies: [],
     });
   }
 
@@ -33,7 +37,7 @@ export function linkEvents(events: NostrEvent[]) {
 
     reply.reply = reply.refs.replyId ? replies.get(reply.refs.replyId) : undefined;
 
-    reply.children = idToChildren[id]?.map((e) => replies.get(e.id) as ThreadItem) ?? [];
+    reply.replies = idToChildren[id]?.map((e) => replies.get(e.id) as ThreadItem) ?? [];
   }
 
   return replies;

src/views/home/index.tsx

@@ -25,7 +25,7 @@ export const HomeView = () => {
     >
       <TabList>
         {tabs.map(({ label }) => (
-          <Tab>{label}</Tab>
+          <Tab key={label}>{label}</Tab>
         ))}
       </TabList>
       <TabPanels overflow="auto" height="100%">

src/views/note/thread-post.tsx

@@ -1,7 +1,7 @@
 import { Button, Flex, useDisclosure } from "@chakra-ui/react";
 import { useState } from "react";
 import { Note } from "../../components/note";
-import { ThreadItem as ThreadItemData } from "../../helpers/thread";
+import { countReplies, ThreadItem as ThreadItemData } from "../../helpers/thread";
 
 export type ThreadItemProps = {
   post: ThreadItemData;
@@ -12,17 +12,19 @@ export const ThreadPost = ({ post, initShowReplies }: ThreadItemProps) => {
   const [showReplies, setShowReplies] = useState(!!initShowReplies);
   const toggle = () => setShowReplies((v) => !v);
 
+  const numberOfReplies = countReplies(post);
+
   return (
     <Flex direction="column" gap="2">
       <Note event={post.event} />
-      {post.children.length > 0 && (
+      {post.replies.length > 0 && (
         <>
           <Button variant="link" size="sm" alignSelf="flex-start" onClick={toggle}>
-            {post.children.length} {post.children.length > 1 ? "Replies" : "Reply"}
+            {numberOfReplies} {numberOfReplies > 1 ? "Replies" : "Reply"}
           </Button>
           {showReplies && (
             <Flex direction="column" gap="2" pl="4" borderLeftColor="gray.500" borderLeftWidth="1px">
-              {post.children.map((child) => (
+              {post.replies.map((child) => (
                 <ThreadPost key={child.event.id} post={child} />
               ))}
             </Flex>

src/views/user/index.tsx

@@ -21,7 +21,6 @@ const UserView = () => {
 
   const matches = useMatches();
   const lastMatch = matches[matches.length - 1];
-  console.log(lastMatch);
 
   const activeTab = tabs.indexOf(tabs.find((t) => lastMatch.pathname.includes(t.path)) ?? tabs[0]);
 
@@ -55,7 +54,7 @@ const UserView = () => {
       >
         <TabList overflow={isMobile ? "auto" : undefined}>
           {tabs.map(({ label }) => (
-            <Tab>{label}</Tab>
+            <Tab key={label}>{label}</Tab>
           ))}
         </TabList>