diff --git a/.changeset/perfect-moons-help.md b/.changeset/perfect-moons-help.md new file mode 100644 index 000000000..625a995c4 --- /dev/null +++ b/.changeset/perfect-moons-help.md @@ -0,0 +1,5 @@ +--- +"nostrudel": minor +--- + +Clean up user reactions view diff --git a/src/components/embed-event/event-types/embedded-unknown.tsx b/src/components/embed-event/event-types/embedded-unknown.tsx index 765260ff6..e4497d546 100644 --- a/src/components/embed-event/event-types/embedded-unknown.tsx +++ b/src/components/embed-event/event-types/embedded-unknown.tsx @@ -1,4 +1,5 @@ -import { Card, CardBody, CardHeader, CardProps, Flex, Heading, Link, Text } from "@chakra-ui/react"; +import { Box, Card, CardBody, CardHeader, CardProps, Flex, Heading, Link, Text } from "@chakra-ui/react"; +import dayjs from "dayjs"; import { getSharableEventAddress } from "../../../helpers/nip19"; import { NostrEvent } from "../../../types/nostr-event"; @@ -7,11 +8,23 @@ import { UserLink } from "../../user-link"; import { truncatedId } from "../../../helpers/nostr/events"; import { buildAppSelectUrl } from "../../../helpers/nostr/apps"; import { UserDnsIdentityIcon } from "../../user-dns-identity-icon"; -import dayjs from "dayjs"; +import { useMemo } from "react"; +import { embedEmoji, embedNostrHashtags, embedNostrLinks, embedNostrMentions } from "../../embed-types"; +import { EmbedableContent } from "../../../helpers/embeds"; export default function EmbeddedUnknown({ event, ...props }: Omit & { event: NostrEvent }) { const address = getSharableEventAddress(event); + const content = useMemo(() => { + let jsx: EmbedableContent = [event.content]; + jsx = embedNostrLinks(jsx); + jsx = embedNostrMentions(jsx, event); + jsx = embedNostrHashtags(jsx, event); + jsx = embedEmoji(jsx, event); + + return jsx; + }, [event.content]); + return ( @@ -29,7 +42,7 @@ export default function EmbeddedUnknown({ event, ...props }: Omit - {event.content} + {content} ); diff --git a/src/views/user/reactions.tsx b/src/views/user/reactions.tsx index ecd82e82b..45e73530c 100644 --- a/src/views/user/reactions.tsx +++ b/src/views/user/reactions.tsx @@ -1,7 +1,6 @@ import { useRef } from "react"; import { useOutletContext } from "react-router-dom"; -import { Box, Flex, SkeletonText, Spacer, Text } from "@chakra-ui/react"; -import { Kind } from "nostr-tools"; +import { Box, Flex, Spacer, Text } from "@chakra-ui/react"; import { nip25 } from "nostr-tools"; import useTimelineLoader from "../../hooks/use-timeline-loader"; @@ -12,43 +11,36 @@ import TimelineActionAndStatus from "../../components/timeline-page/timeline-act import useSubject from "../../hooks/use-subject"; import IntersectionObserverProvider, { useRegisterIntersectionEntity } from "../../providers/intersection-observer"; import { useTimelineCurserIntersectionCallback } from "../../hooks/use-timeline-cursor-intersection-callback"; -import useSingleEvent from "../../hooks/use-single-event"; -import { Note } from "../../components/note"; import { TrustProvider } from "../../providers/trust"; import { UserAvatar } from "../../components/user-avatar"; import { UserLink } from "../../components/user-link"; import { NoteMenu } from "../../components/note/note-menu"; +import { EmbedEventPointer } from "../../components/embed-event"; +import { embedEmoji } from "../../components/embed-types"; -const Reaction = ({ event }: { event: NostrEvent }) => { +const Reaction = ({ reaction: reaction }: { reaction: NostrEvent }) => { const ref = useRef(null); - useRegisterIntersectionEntity(ref, event.id); + useRegisterIntersectionEntity(ref, reaction.id); - const contextRelays = useAdditionalRelayContext(); - const readRelays = useReadRelayUrls(contextRelays); + const pointer = nip25.getReactedEventPointer(reaction); + if (!pointer) return null; - const pointer = nip25.getReactedEventPointer(event); - const { event: note } = useSingleEvent(pointer?.id, readRelays); + const decoded = { type: "nevent", data: pointer } as const; - var content = <>; - if (!note) return ; - - if (note.kind === Kind.Text) { - content = ( - <> - - - - {event.content === "+" ? "liked" : "reacted with " + event.content} - - - - - - - ); - } else content = <>Unknown note type {note.kind}; - - return {content}; + return ( + + + + + {reaction.content === "+" ? "liked" : "reacted with "} + {embedEmoji([reaction.content], reaction)} + + + + + + + ); }; export default function UserReactionsTab() { @@ -67,7 +59,7 @@ export default function UserReactionsTab() { {likes.map((event) => ( - + ))}