diff --git a/src/components/feed/NoteActions.tsx b/src/components/feed/NoteActions.tsx index f32dfeb..3307e15 100644 --- a/src/components/feed/NoteActions.tsx +++ b/src/components/feed/NoteActions.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; import { NDKEvent, nip19 } from "@nostr-dev-kit/ndk"; import { useProfile } from "../../hooks/useProfile"; -import { useReactionCount } from "../../hooks/useReactionCount"; +import { useReactions } from "../../hooks/useReactions"; import { useReplyCount } from "../../hooks/useReplyCount"; import { useZapCount } from "../../hooks/useZapCount"; import { useUserStore } from "../../stores/user"; @@ -26,14 +26,8 @@ export function NoteActions({ event, onReplyToggle, showReply }: NoteActionsProp const { bookmarkedIds, addBookmark, removeBookmark } = useBookmarkStore(); const isBookmarked = bookmarkedIds.includes(event.id!); - const likedKey = "wrystr_liked"; - const getLiked = () => { - try { return new Set(JSON.parse(localStorage.getItem(likedKey) || "[]")); } - catch { return new Set(); } - }; - const [liked, setLiked] = useState(() => getLiked().has(event.id)); - const [liking, setLiking] = useState(false); - const [reactionCount, adjustReactionCount] = useReactionCount(event.id); + const [reactionsData, addReaction] = useReactions(event.id); + const [reacting, setReacting] = useState(false); const [showEmojiPicker, setShowEmojiPicker] = useState(false); const [replyCount] = useReplyCount(event.id); const [copied, setCopied] = useState(false); @@ -43,19 +37,17 @@ export function NoteActions({ event, onReplyToggle, showReply }: NoteActionsProp const [reposting, setReposting] = useState(false); const [reposted, setReposted] = useState(false); - const handleReact = async (emoji?: string) => { - if (!loggedIn || liked || liking) return; - setLiking(true); + const myReactions = reactionsData?.myReactions ?? new Set(); + + const handleReact = async (emoji: string) => { + if (!loggedIn || reacting || myReactions.has(emoji)) return; + setReacting(true); setShowEmojiPicker(false); try { - await publishReaction(event.id, event.pubkey, emoji || "+"); - const likedSet = getLiked(); - likedSet.add(event.id); - localStorage.setItem(likedKey, JSON.stringify(Array.from(likedSet))); - setLiked(true); - adjustReactionCount(1); + await publishReaction(event.id, event.pubkey, emoji); + addReaction(emoji); } finally { - setLiking(false); + setReacting(false); } }; @@ -77,9 +69,14 @@ export function NoteActions({ event, onReplyToggle, showReply }: NoteActionsProp } }; + // Sort emoji groups: most popular first + const sortedGroups = reactionsData + ? Array.from(reactionsData.groups.entries()).sort((a, b) => b[1] - a[1]) + : []; + return ( <> -
+
-
- - {!liked && !liking && ( + + {/* Emoji reaction pills */} +
+ {sortedGroups.map(([emoji, count]) => ( + + ))} + + {/* Add reaction button */} + {loggedIn && ( )} + + {/* Emoji picker popover */} {showEmojiPicker && ( <>
setShowEmojiPicker(false)} /> @@ -115,7 +125,10 @@ export function NoteActions({ event, onReplyToggle, showReply }: NoteActionsProp @@ -124,6 +137,7 @@ export function NoteActions({ event, onReplyToggle, showReply }: NoteActionsProp )}
+