74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
/**
|
||
* MessageReactions Component
|
||
* Displays and manages emoji reactions on messages
|
||
*/
|
||
|
||
import React, { useState } from 'react';
|
||
import ReactionPicker from './ReactionPicker';
|
||
import './MessageReactions.css';
|
||
|
||
export default function MessageReactions({
|
||
reactions = [],
|
||
onAddReaction,
|
||
onRemoveReaction,
|
||
currentUserId,
|
||
messageId,
|
||
}) {
|
||
const [showPicker, setShowPicker] = useState(false);
|
||
|
||
const handleReactionClick = (emoji) => {
|
||
// Check if user already reacted with this emoji
|
||
const existingReaction = reactions.find((r) => r.emoji === emoji);
|
||
|
||
if (existingReaction?.users?.includes(currentUserId)) {
|
||
// Remove reaction
|
||
onRemoveReaction?.(messageId, emoji, currentUserId);
|
||
} else {
|
||
// Add reaction
|
||
onAddReaction?.(messageId, emoji, currentUserId);
|
||
}
|
||
};
|
||
|
||
const handleAddReaction = (emoji) => {
|
||
onAddReaction?.(messageId, emoji, currentUserId);
|
||
};
|
||
|
||
return (
|
||
<div className="message-reactions-container">
|
||
<div className="reactions-list">
|
||
{reactions.map((reaction, idx) => {
|
||
const userReacted = reaction.users?.includes(currentUserId);
|
||
return (
|
||
<button
|
||
key={idx}
|
||
className={`reaction-button ${userReacted ? 'user-reacted' : ''}`}
|
||
onClick={() => handleReactionClick(reaction.emoji)}
|
||
title={reaction.users?.join(', ') || 'Add reaction'}
|
||
>
|
||
<span className="reaction-emoji">{reaction.emoji}</span>
|
||
{reaction.users?.length > 0 && (
|
||
<span className="reaction-count">{reaction.users.length}</span>
|
||
)}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<div className="add-reaction-container">
|
||
{showPicker && (
|
||
<ReactionPicker
|
||
onReactionSelect={handleAddReaction}
|
||
onClose={() => setShowPicker(false)}
|
||
/>
|
||
)}
|
||
<button
|
||
className="btn-add-reaction"
|
||
onClick={() => setShowPicker(!showPicker)}
|
||
title="Add reaction"
|
||
>
|
||
➕
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|