mirror of
https://github.com/hzrd149/nostrudel.git
synced 2025-09-25 19:23:45 +02:00
show total number of replies
This commit is contained in:
@@ -1,12 +1,16 @@
|
|||||||
import { NostrEvent } from "../types/nostr-event";
|
import { NostrEvent } from "../types/nostr-event";
|
||||||
import { EventReferences, getReferences } from "./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 = {
|
export type ThreadItem = {
|
||||||
event: NostrEvent;
|
event: NostrEvent;
|
||||||
root?: ThreadItem;
|
root?: ThreadItem;
|
||||||
reply?: ThreadItem;
|
reply?: ThreadItem;
|
||||||
refs: EventReferences;
|
refs: EventReferences;
|
||||||
children: ThreadItem[];
|
replies: ThreadItem[];
|
||||||
};
|
};
|
||||||
|
|
||||||
export function linkEvents(events: NostrEvent[]) {
|
export function linkEvents(events: NostrEvent[]) {
|
||||||
@@ -24,7 +28,7 @@ export function linkEvents(events: NostrEvent[]) {
|
|||||||
replies.set(event.id, {
|
replies.set(event.id, {
|
||||||
event,
|
event,
|
||||||
refs,
|
refs,
|
||||||
children: [],
|
replies: [],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -33,7 +37,7 @@ export function linkEvents(events: NostrEvent[]) {
|
|||||||
|
|
||||||
reply.reply = reply.refs.replyId ? replies.get(reply.refs.replyId) : undefined;
|
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;
|
return replies;
|
||||||
|
@@ -25,7 +25,7 @@ export const HomeView = () => {
|
|||||||
>
|
>
|
||||||
<TabList>
|
<TabList>
|
||||||
{tabs.map(({ label }) => (
|
{tabs.map(({ label }) => (
|
||||||
<Tab>{label}</Tab>
|
<Tab key={label}>{label}</Tab>
|
||||||
))}
|
))}
|
||||||
</TabList>
|
</TabList>
|
||||||
<TabPanels overflow="auto" height="100%">
|
<TabPanels overflow="auto" height="100%">
|
||||||
|
@@ -1,7 +1,7 @@
|
|||||||
import { Button, Flex, useDisclosure } from "@chakra-ui/react";
|
import { Button, Flex, useDisclosure } from "@chakra-ui/react";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Note } from "../../components/note";
|
import { Note } from "../../components/note";
|
||||||
import { ThreadItem as ThreadItemData } from "../../helpers/thread";
|
import { countReplies, ThreadItem as ThreadItemData } from "../../helpers/thread";
|
||||||
|
|
||||||
export type ThreadItemProps = {
|
export type ThreadItemProps = {
|
||||||
post: ThreadItemData;
|
post: ThreadItemData;
|
||||||
@@ -12,17 +12,19 @@ export const ThreadPost = ({ post, initShowReplies }: ThreadItemProps) => {
|
|||||||
const [showReplies, setShowReplies] = useState(!!initShowReplies);
|
const [showReplies, setShowReplies] = useState(!!initShowReplies);
|
||||||
const toggle = () => setShowReplies((v) => !v);
|
const toggle = () => setShowReplies((v) => !v);
|
||||||
|
|
||||||
|
const numberOfReplies = countReplies(post);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex direction="column" gap="2">
|
<Flex direction="column" gap="2">
|
||||||
<Note event={post.event} />
|
<Note event={post.event} />
|
||||||
{post.children.length > 0 && (
|
{post.replies.length > 0 && (
|
||||||
<>
|
<>
|
||||||
<Button variant="link" size="sm" alignSelf="flex-start" onClick={toggle}>
|
<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>
|
</Button>
|
||||||
{showReplies && (
|
{showReplies && (
|
||||||
<Flex direction="column" gap="2" pl="4" borderLeftColor="gray.500" borderLeftWidth="1px">
|
<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} />
|
<ThreadPost key={child.event.id} post={child} />
|
||||||
))}
|
))}
|
||||||
</Flex>
|
</Flex>
|
||||||
|
@@ -21,7 +21,6 @@ const UserView = () => {
|
|||||||
|
|
||||||
const matches = useMatches();
|
const matches = useMatches();
|
||||||
const lastMatch = matches[matches.length - 1];
|
const lastMatch = matches[matches.length - 1];
|
||||||
console.log(lastMatch);
|
|
||||||
|
|
||||||
const activeTab = tabs.indexOf(tabs.find((t) => lastMatch.pathname.includes(t.path)) ?? tabs[0]);
|
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}>
|
<TabList overflow={isMobile ? "auto" : undefined}>
|
||||||
{tabs.map(({ label }) => (
|
{tabs.map(({ label }) => (
|
||||||
<Tab>{label}</Tab>
|
<Tab key={label}>{label}</Tab>
|
||||||
))}
|
))}
|
||||||
</TabList>
|
</TabList>
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user