fix reaction bug

This commit is contained in:
PhilReact 2024-09-27 16:16:45 +03:00
parent 56b66cf988
commit 1144e4280a
2 changed files with 57 additions and 38 deletions

View File

@ -101,7 +101,6 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
} }
const decryptMessages = (encryptedMessages: any[])=> { const decryptMessages = (encryptedMessages: any[])=> {
try { try {
if(!secretKeyRef.current){ if(!secretKeyRef.current){
@ -162,26 +161,33 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
organizedChatReferences[item.chatReference].reactions[content] = organizedChatReferences[item.chatReference].reactions[content] =
organizedChatReferences[item.chatReference].reactions[content] || []; organizedChatReferences[item.chatReference].reactions[content] || [];
const existingReactionIndex = organizedChatReferences[item.chatReference].reactions[content] // Remove any existing reactions from the same sender before adding the new one
.findIndex(reaction => reaction.sender === sender); let latestTimestampForSender = null;
// Handle contentState: if false, remove the reaction // Track the latest reaction timestamp for the same content and sender
if (contentState === false) { organizedChatReferences[item.chatReference].reactions[content] =
if (existingReactionIndex !== -1) { organizedChatReferences[item.chatReference].reactions[content].filter((reaction) => {
organizedChatReferences[item.chatReference].reactions[content].splice(existingReactionIndex, 1); if (reaction.sender === sender) {
// Track the latest timestamp for this sender
latestTimestampForSender = Math.max(latestTimestampForSender || 0, reaction.timestamp);
} }
} else { return reaction.sender !== sender;
// Add or update reaction });
if (existingReactionIndex !== -1) {
const existingReaction = organizedChatReferences[item.chatReference].reactions[content][existingReactionIndex];
const existingTimestamp = existingReaction.timestamp;
if (newTimestamp > existingTimestamp) { // Compare with the latest tracked timestamp for this sender
organizedChatReferences[item.chatReference].reactions[content][existingReactionIndex] = item; if (latestTimestampForSender && newTimestamp < latestTimestampForSender) {
// Ignore this item if it's older than the latest known reaction
return;
} }
} else {
// Add the new reaction only if contentState is true
if (contentState !== false) {
organizedChatReferences[item.chatReference].reactions[content].push(item); organizedChatReferences[item.chatReference].reactions[content].push(item);
} }
// If the reactions for a specific content are empty, clean up the object
if (organizedChatReferences[item.chatReference].reactions[content].length === 0) {
delete organizedChatReferences[item.chatReference].reactions[content];
} }
} catch (error) { } catch (error) {
console.error("Error processing reaction item:", error, item); console.error("Error processing reaction item:", error, item);
@ -192,6 +198,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
}); });
} else { } else {
const formatted = response.filter((rawItem)=> !rawItem?.chatReference).map((item: any)=> { const formatted = response.filter((rawItem)=> !rawItem?.chatReference).map((item: any)=> {
return { return {
@ -230,26 +237,33 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
organizedChatReferences[item.chatReference].reactions[content] = organizedChatReferences[item.chatReference].reactions[content] =
organizedChatReferences[item.chatReference].reactions[content] || []; organizedChatReferences[item.chatReference].reactions[content] || [];
const existingReactionIndex = organizedChatReferences[item.chatReference].reactions[content] // Remove any existing reactions from the same sender before adding the new one
.findIndex(reaction => reaction.sender === sender); let latestTimestampForSender = null;
// Handle contentState: if false, remove the reaction // Track the latest reaction timestamp for the same content and sender
if (contentState === false) { organizedChatReferences[item.chatReference].reactions[content] =
if (existingReactionIndex !== -1) { organizedChatReferences[item.chatReference].reactions[content].filter((reaction) => {
organizedChatReferences[item.chatReference].reactions[content].splice(existingReactionIndex, 1); if (reaction.sender === sender) {
// Track the latest timestamp for this sender
latestTimestampForSender = Math.max(latestTimestampForSender || 0, reaction.timestamp);
} }
} else { return reaction.sender !== sender;
// Add or update reaction });
if (existingReactionIndex !== -1) {
const existingReaction = organizedChatReferences[item.chatReference].reactions[content][existingReactionIndex];
const existingTimestamp = existingReaction.timestamp;
if (newTimestamp > existingTimestamp) { // Compare with the latest tracked timestamp for this sender
organizedChatReferences[item.chatReference].reactions[content][existingReactionIndex] = item; if (latestTimestampForSender && newTimestamp < latestTimestampForSender) {
// Ignore this item if it's older than the latest known reaction
return;
} }
} else {
// Add the new reaction only if contentState is true
if (contentState !== false) {
organizedChatReferences[item.chatReference].reactions[content].push(item); organizedChatReferences[item.chatReference].reactions[content].push(item);
} }
// If the reactions for a specific content are empty, clean up the object
if (organizedChatReferences[item.chatReference].reactions[content].length === 0) {
delete organizedChatReferences[item.chatReference].reactions[content];
} }
} catch (error) { } catch (error) {
console.error("Error processing reaction item:", error, item); console.error("Error processing reaction item:", error, item);
@ -262,6 +276,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
} }
} }
rej(response.error) rej(response.error)

View File

@ -234,7 +234,11 @@ export const MessageItem = ({
handleReaction(reaction, message, true) handleReaction(reaction, message, true)
} }
}}> }}>
<div>{reaction}</div> <div>{reaction}</div> {numberOfReactions > 1 && (
<Typography sx={{
marginLeft: '4px'
}}>{' '} {numberOfReactions}</Typography>
)}
</ButtonBase> </ButtonBase>
) )
})} })}