Add ReactionService and integrate reactions functionality into NostrFeed module
- Introduced ReactionService to manage event reactions, including likes and dislikes. - Updated NostrFeed module to register ReactionService in the DI container and initialize it during installation. - Enhanced NostrFeed.vue to utilize the reactions service for displaying and managing likes on posts. - Created useReactions composable for handling reactions, including fetching event reactions and subscribing to updates. These changes enhance user engagement by allowing users to interact with posts through reactions, improving the overall experience within the feed. Refactor reactions handling in NostrFeed module - Renamed `likeEvent` to `toggleLike` in the useReactions composable to better reflect its functionality of toggling likes. - Updated NostrFeed.vue to utilize the new `toggleLike` method for handling like interactions. - Enhanced ReactionService to support deletion of reactions and improved handling of reaction events, including subscription to deletion events. - Added logic to manage user reaction IDs for better tracking of likes and unlikes. These changes streamline the reactions functionality, improving user interaction and feedback within the NostrFeed. Refactor content filters and event inclusion logic in NostrFeed module - Removed market-related content filters from the presets, as they now have a dedicated section. - Updated the handling of reactions in content filters, clarifying that reactions are processed separately by the ReactionService. - Enhanced the FeedService to exclude reactions and deletions from the main feed, ensuring cleaner event management. These changes streamline the content filtering process and improve the clarity of event handling within the NostrFeed. Refactor content filters and FeedService logic for marketplace separation - Removed marketplace-related filters from the general presets in content-filters.ts, as they now have a dedicated section. - Updated FeedService to exclude marketplace events from the main feed, ensuring clearer event management. - Adjusted Home.vue to reflect the removal of the marketplace filter preset. These changes streamline content filtering and improve the organization of marketplace events within the NostrFeed module. Enhance ReactionService to support global deletion monitoring and improve reaction handling - Added functionality to monitor deletion events for reactions, ensuring accurate updates when reactions are deleted. - Implemented logic to handle deletion requests, processing only those from the original reaction authors as per NIP-09 spec. - Updated reaction management to ensure only the latest reaction from each user is counted, improving the accuracy of like/dislike tallies. - Refactored event reaction updates to clear deleted reactions and maintain a clean state. These changes enhance the reliability and user experience of the reactions feature within the NostrFeed module.
This commit is contained in:
parent
45391cbaa1
commit
005b78bf0e
8 changed files with 698 additions and 12 deletions
|
|
@ -6,6 +6,7 @@ import { formatDistanceToNow } from 'date-fns'
|
|||
import { Megaphone, RefreshCw, AlertCircle, Reply, Heart, Share } from 'lucide-vue-next'
|
||||
import { useFeed } from '../composables/useFeed'
|
||||
import { useProfiles } from '../composables/useProfiles'
|
||||
import { useReactions } from '../composables/useReactions'
|
||||
import appConfig from '@/app.config'
|
||||
import type { ContentFilter } from '../services/FeedService'
|
||||
import MarketProduct from './MarketProduct.vue'
|
||||
|
|
@ -39,11 +40,20 @@ const { posts: notes, isLoading, error, refreshFeed } = useFeed({
|
|||
// Use profiles service for display names
|
||||
const { getDisplayName, fetchProfiles } = useProfiles()
|
||||
|
||||
// Watch for new posts and fetch their profiles
|
||||
// Use reactions service for likes/hearts
|
||||
const { getEventReactions, subscribeToReactions, toggleLike } = useReactions()
|
||||
|
||||
// Watch for new posts and fetch their profiles and reactions
|
||||
watch(notes, async (newNotes) => {
|
||||
if (newNotes.length > 0) {
|
||||
const pubkeys = [...new Set(newNotes.map(note => note.pubkey))]
|
||||
await fetchProfiles(pubkeys)
|
||||
const eventIds = newNotes.map(note => note.id)
|
||||
|
||||
// Fetch profiles and subscribe to reactions in parallel
|
||||
await Promise.all([
|
||||
fetchProfiles(pubkeys),
|
||||
subscribeToReactions(eventIds)
|
||||
])
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
|
|
@ -118,6 +128,15 @@ function onReplyToNote(note: any) {
|
|||
pubkey: note.pubkey
|
||||
})
|
||||
}
|
||||
|
||||
// Handle like/heart reaction toggle
|
||||
async function onToggleLike(note: any) {
|
||||
try {
|
||||
await toggleLike(note.id, note.pubkey, note.kind)
|
||||
} catch (error) {
|
||||
console.error('Failed to toggle like:', error)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -303,9 +322,19 @@ function onReplyToNote(note: any) {
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
class="h-7 px-1.5 text-muted-foreground hover:text-foreground"
|
||||
:class="{ 'text-red-500 hover:text-red-600': getEventReactions(note.id).userHasLiked }"
|
||||
@click="onToggleLike(note)"
|
||||
>
|
||||
<Heart class="h-3.5 w-3.5 sm:mr-1" />
|
||||
<span class="hidden sm:inline">Like</span>
|
||||
<Heart
|
||||
class="h-3.5 w-3.5 sm:mr-1"
|
||||
:class="{ 'fill-current': getEventReactions(note.id).userHasLiked }"
|
||||
/>
|
||||
<span class="hidden sm:inline">
|
||||
{{ getEventReactions(note.id).userHasLiked ? 'Liked' : 'Like' }}
|
||||
</span>
|
||||
<span v-if="getEventReactions(note.id).likes > 0" class="ml-1 text-xs">
|
||||
{{ getEventReactions(note.id).likes }}
|
||||
</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue