show max 10 users in badge award

hzrd149 · Dec 4, 2023 · 22c10b2 · 22c10b2
1 parent d5c0f55
commit 22c10b2
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 11 deletions.
diff --git 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,15 +12,26 @@ 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);
   useRegisterIntersectionEntity(ref, getEventUID(award));
 
   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>

diff --git 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);