diff --git a/src/views/badges/components/badge-award-card.tsx b/src/views/badges/components/badge-award-card.tsx index 8fdf86f2b..c8ca9b3f9 100644 --- a/src/views/badges/components/badge-award-card.tsx +++ b/src/views/badges/components/badge-award-card.tsx @@ -1,5 +1,5 @@ -import { useRef } from "react"; -import { Card, Flex, Image, Link, LinkBox, Text } from "@chakra-ui/react"; +import { memo, useRef } from "react"; +import { Button, Card, Flex, Image, Link, LinkBox, Text, useDisclosure } from "@chakra-ui/react"; import { Link as RouterLink } from "react-router-dom"; import { getBadgeAwardBadge, getBadgeAwardPubkeys, getBadgeImage, getBadgeName } from "../../../helpers/nostr/badges"; @@ -12,8 +12,16 @@ import { UserLink } from "../../../components/user-link"; import Timestamp from "../../../components/timestamp"; import UserAvatarLink from "../../../components/user-avatar-link"; +const UserCard = memo(({ pubkey }: { pubkey: string }) => ( + + + + +)); + export default function BadgeAwardCard({ award, showImage = true }: { award: NostrEvent; showImage?: boolean }) { const badge = useReplaceableEvent(getBadgeAwardBadge(award)); + const showAll = useDisclosure(); // if there is a parent intersection observer, register this card const ref = useRef(null); @@ -21,6 +29,9 @@ export default function BadgeAwardCard({ award, showImage = true }: { award: Nos if (!badge) return null; + const awards = getBadgeAwardPubkeys(award); + const collapsed = !showAll.isOpen && awards.length > 10; + const naddr = getSharableEventAddress(badge); return ( @@ -41,12 +52,14 @@ export default function BadgeAwardCard({ award, showImage = true }: { award: Nos - {getBadgeAwardPubkeys(award).map(({ pubkey }) => ( - - - - + {(collapsed ? awards.slice(0, 10) : awards).map(({ pubkey }) => ( + ))} + {collapsed && ( + + )} diff --git a/src/views/badges/index.tsx b/src/views/badges/index.tsx index 1981b4dcd..820b466e2 100644 --- a/src/views/badges/index.tsx +++ b/src/views/badges/index.tsx @@ -13,14 +13,29 @@ import IntersectionObserverProvider from "../../providers/intersection-observer" import { useTimelineCurserIntersectionCallback } from "../../hooks/use-timeline-cursor-intersection-callback"; import BadgeAwardCard from "./components/badge-award-card"; import { ErrorBoundary } from "../../components/error-boundary"; +import useClientSideMuteFilter from "../../hooks/use-client-side-mute-filter"; +import { useCallback } from "react"; function BadgesPage() { const { filter, listId } = usePeopleListContext(); + const muteFilter = useClientSideMuteFilter(); + const eventFilter = useCallback( + (e) => { + if (muteFilter(e)) return false; + return true; + }, + [muteFilter], + ); const readRelays = useReadRelayUrls(); - const timeline = useTimelineLoader(`${listId}-lists`, readRelays, { - "#p": filter?.authors, - kinds: [Kind.BadgeAward], - }); + const timeline = useTimelineLoader( + `${listId}-lists`, + readRelays, + { + "#p": filter?.authors, + kinds: [Kind.BadgeAward], + }, + { eventFilter }, + ); const awards = useSubject(timeline.timeline); const callback = useTimelineCurserIntersectionCallback(timeline);