{message.type === "message" && message.modified && "Edited"}
@@ -63,136 +69,6 @@ const ReplyToMessage = ({ message }: { message: Message }) => {
}
};
-const ReactionQuickView = ({
- reactions,
-}: {
- reactions: Doc<"reactions">[];
-}) => {
- const [animatingEmojis, setAnimatingEmojis] = useState
>(
- new Set(),
- );
- const previousReactions = useRef([]);
- const isFirstRender = useRef(true);
-
- useEffect(() => {
- if (isFirstRender.current) {
- isFirstRender.current = false;
- previousReactions.current = reactions.map((r) => r.emoji);
- return; // Skip animation logic on first render
- }
-
- const currentReactions = reactions.map((r) => r.emoji);
- const newReactions = currentReactions.filter(
- (emoji) => !previousReactions.current.includes(emoji),
- );
-
- if (newReactions.length > 0) {
- setAnimatingEmojis(new Set(newReactions));
- const timeoutId = setTimeout(() => {
- setAnimatingEmojis(new Set());
- }, 500); // Match this with your animation duration
- // The setTimeout should be cleaned up when the component unmounts or when new reactions are added before the animation completes.
- return () => clearTimeout(timeoutId);
- }
-
- previousReactions.current = currentReactions;
- }, [reactions]);
-
- return (
- reactions
- // Reduce the reactions array to count occurrences of each emoji
- // acc: accumulator array of {emoji, count} objects
- // reaction: current reaction being processed
- // Returns: array of unique emojis with their counts
- .reduce(
- (acc, reaction) => {
- const existingReaction = acc.find((r) => r.emoji === reaction.emoji);
- if (existingReaction) {
- existingReaction.count++;
- } else {
- acc.push({
- emoji: reaction.emoji,
- count: 1,
- });
- }
- return acc;
- },
- [] as { emoji: string; count: number }[],
- )
- .map((reaction, index) => (
-
-
- {reaction.emoji}
-
- {reaction.count > 1 && (
-
- {reaction.count}
-
- )}
-
- ))
- );
-};
-
-const ReactionDetails = ({
- reactions,
- userInfos,
-}: {
- reactions: Doc<"reactions">[];
- userInfos: [
- FunctionReturnType | undefined,
- (
- | undefined
- | NonNullable<
- FunctionReturnType
- >["otherUser"]
- ),
- ];
-}) => {
- // Group reactions by emoji
- const reactionsByEmoji = reactions.reduce(
- (acc, reaction) => {
- (acc[reaction.emoji] = acc[reaction.emoji] ?? []).push(reaction);
- return acc;
- },
- {} as Record,
- );
-
- return (
-
- {Object.entries(reactionsByEmoji).map(([emoji, reactions]) => (
-
-
-
{emoji}
-
- {reactions
- .map((reaction) => {
- const user =
- userInfos[0]?._id === reaction.userId
- ? userInfos[0]
- : Array.isArray(userInfos[1])
- ? userInfos[1].find((u) => u._id === reaction.userId)
- : userInfos[1];
- return user?.username;
- })
- .join(", ")}
-
-
-
- ))}
-
{message.type == "message" && !message.deleted
@@ -853,26 +707,12 @@ export const Message = ({
)}
- {message.type === "message" &&
- message.reactions &&
- message.reactions.length > 0 && (
-