highperfocused/nostrudel
1
0
Fork 0
mirror of https://github.com/hzrd149/nostrudel.git synced 2025-03-26 17:52:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

show max 10 users in badge award

Browse Source
This commit is contained in:
hzrd149 2023-12-04 11:19:57 -06:00
parent d5c0f55bf0
commit 22c10b25a5
2 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/badges/components/badge-award-card.tsx
View File

@ -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 }) => (
<Flex gap="2" alignItems="center">
<UserAvatarLink pubkey={pubkey} size="sm" />
<UserLink pubkey={pubkey} fontWeight="bold" isTruncated />
</Flex>
));
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<HTMLDivElement | null>(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 (
<Card as={LinkBox} p="2" variant="outline" gap="2" flexDirection={["column", null, "row"]} ref={ref}>
@ -41,12 +52,14 @@ export default function BadgeAwardCard({ award, showImage = true }: { award: Nos
<Timestamp timestamp={award.created_at} ml="auto" />
</Flex>
<Flex gap="4" wrap="wrap">
{getBadgeAwardPubkeys(award).map(({ pubkey }) => (
<Flex key={pubkey} gap="2" alignItems="center">
<UserAvatarLink pubkey={pubkey} size="sm" />
<UserLink pubkey={pubkey} fontWeight="bold" isTruncated />
</Flex>
{(collapsed ? awards.slice(0, 10) : awards).map(({ pubkey }) => (
<UserCard key={pubkey} pubkey={pubkey} />
))}
{collapsed && (
<Button variant="ghost" onClick={showAll.onOpen}>
Show {awards.length - 10} more
</Button>
)}
</Flex>
</Flex>
</Card>

23
src/views/badges/index.tsx
View File

@ -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);