From b6eb6ce7059fcaf11a1aacae05da27a67d5e3bda Mon Sep 17 00:00:00 2001 From: pranavmene2000 Date: Sat, 17 Aug 2024 12:11:23 +0530 Subject: [PATCH 01/10] feat: add reaction analytics --- .../ActionModals/ReactionAnalyticsModal.tsx | 111 ++++++++++++++++++ .../MessageActions/MessageActions.tsx | 31 +++-- .../MessageReactionAnalytics.tsx | 58 +++++++++ .../feature/chat/ChatMessage/MessageItem.tsx | 5 + .../chat/ChatMessage/MessageReactions.tsx | 2 +- frontend/src/utils/operations.ts | 10 ++ 6 files changed, 209 insertions(+), 8 deletions(-) create mode 100644 frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx create mode 100644 frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageReactionAnalytics.tsx diff --git a/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx b/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx new file mode 100644 index 000000000..a636a9c97 --- /dev/null +++ b/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx @@ -0,0 +1,111 @@ +import { useMemo } from "react" +import { IconButton, Dialog, Flex, Text, Tabs, Box } from "@radix-ui/themes" +import { BiX } from "react-icons/bi" +import { ReactionObject } from "../MessageReactions" +import { ReactionAnalyticsDialogProps } from "../MessageActions/MessageReactionAnalytics" +import { MdOutlineEmojiEmotions } from "react-icons/md"; +import { useGetUserRecords } from "@/hooks/useGetUserRecords" +import { UserAvatar } from "@/components/common/UserAvatar" +import { getUserImage } from "@/utils/operations" + +export const ReactionAnalyticsModal: React.FC = ({ reactions }) => { + + const { reaction_emojis, all_reacted_members } = useMemo(() => { + const reaction_emojis = reactions.map((reaction: ReactionObject) => reaction.reaction); + const all_reacted_members = reactions.flatMap((reaction: ReactionObject) => + reaction.users.map((user: string) => ({ user, reaction: reaction.reaction })) + ); + return { reaction_emojis, all_reacted_members }; + }, [reactions]); + + return ( + <> + {/* */} + + + + + {reaction_emojis.map((emojiStr) => { + const reaction = reactions.find((r) => r.reaction === emojiStr); + return ; + })} + + + + + + {reactions.map((reaction) => ( + + ({ user }))} /> + + ))} + + + + + ); +}; + +const DialogHeader = () => ( + + + + + Reaction Analytics + + + + + + + + +); + +const TabTrigger = ({ emojiStr, count }: { emojiStr: string; count?: number }) => ( + + + {emojiStr} + {count && {count}} + + +); + +interface UserItemProps { + user: string; + reaction?: string; +} +const UserList = ({ users }: { users: UserItemProps[] }) => ( + + + + {users.map((user, index) => ( + + ))} + + + +); + +const UserItem = ({ user, reaction }: UserItemProps) => { + const allUsers = useGetUserRecords(); + const userImage = getUserImage(user, allUsers) + + return ( + + + + + + {user} + + + {reaction && ( + + {reaction} + + )} + + + ); +}; \ No newline at end of file diff --git a/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx b/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx index 28d18fc49..381ee2375 100644 --- a/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx @@ -10,22 +10,33 @@ import { toast } from 'sonner' import { getErrorMessage } from '@/components/layout/AlertBanner/ErrorBanner' import { AiOutlineEdit } from 'react-icons/ai' import { LuForward, LuReply } from 'react-icons/lu' +import { MdOutlineEmojiEmotions } from "react-icons/md"; +import { ReactionObject } from '../MessageReactions' export interface MessageContextMenuProps { message?: Message | null, onDelete: VoidFunction onEdit: VoidFunction, onReply: VoidFunction, - onForward: VoidFunction + onForward: VoidFunction, } -export const MessageContextMenu = ({ message, onDelete, onEdit, onReply, onForward }: MessageContextMenuProps) => { +interface MessageReactionAnalyticsProps extends MessageContextMenuProps { + reactions: ReactionObject[], + onClose: VoidFunction, + isOpen: boolean, + open: VoidFunction +} + +export const MessageContextMenu = ({ message, onDelete, onEdit, onReply, onForward, ...reactionProps }: MessageReactionAnalyticsProps) => { const copy = useMessageCopy(message) const { currentUser } = useContext(UserContext) - const isOwner = currentUser === message?.owner + const isOwner = currentUser === message?.owner; + const { reactions, open: openReactionAnalytics } = reactionProps + return ( {message ? <> @@ -97,9 +108,16 @@ export const MessageContextMenu = ({ message, onDelete, onEdit, onReply, onForwa */} - - - + + {Object.keys(reactions).length !== 0 && + + + + + Reaction Analytics + + + } {isOwner && @@ -119,7 +137,6 @@ export const MessageContextMenu = ({ message, onDelete, onEdit, onReply, onForwa } : null} - ) } diff --git a/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageReactionAnalytics.tsx b/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageReactionAnalytics.tsx new file mode 100644 index 000000000..2ea5c2681 --- /dev/null +++ b/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageReactionAnalytics.tsx @@ -0,0 +1,58 @@ +import { useCallback, useState, useMemo } from "react" +import { Message } from "../../../../../../../types/Messaging/Message" +import { Dialog } from "@radix-ui/themes" +import { DIALOG_CONTENT_CLASS } from "@/utils/layout/dialog" +import { useIsDesktop } from "@/hooks/useMediaQuery" +import { Drawer, DrawerContent } from "@/components/layout/Drawer" +import { ReactionObject } from "../MessageReactions" +import { ReactionAnalyticsModal } from "../ActionModals/ReactionAnalyticsModal" + +export const useMessageReactionAnalytics = (message: Message) => { + const [isReactionDialogOpen, setIsReactionDialogOpen] = useState(false) + + const message_reactions = message?.message_reactions; + + const reactions: ReactionObject[] = useMemo(() => { + //Parse the string to a JSON object and get an array of reactions + const parsed_json = JSON.parse(message_reactions ?? '{}') as Record + return Object.values(parsed_json) + }, [message_reactions]) + + const onClose = useCallback(() => { + setIsReactionDialogOpen(false) + }, []) + + return { + reactions, + onClose, + isOpen: isReactionDialogOpen, + open: () => setIsReactionDialogOpen(true) + } + +} + +export interface ReactionAnalyticsDialogProps { + isOpen?: boolean, + onClose?: VoidFunction, + reactions: ReactionObject[] +} +export const ReactionAnalyticsDialog = ({ isOpen, onClose, ...reactionProps }: ReactionAnalyticsDialogProps) => { + + const isDesktop = useIsDesktop() + + if (isDesktop) { + return + + + + + } else { + return + +
+ +
+ + + } +} \ No newline at end of file diff --git a/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx b/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx index 6dbd65826..1239f0ad3 100644 --- a/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx @@ -25,6 +25,7 @@ import { useIsDesktop } from '@/hooks/useMediaQuery' import { useDoubleTap } from 'use-double-tap' import useOutsideClick from '@/hooks/useOutsideClick' import { getStatusText } from '../../userSettings/AvailabilityStatus/SetUserAvailabilityMenu' +import { ReactionAnalyticsDialog, useMessageReactionAnalytics } from './MessageActions/MessageReactionAnalytics' interface MessageBlockProps { message: Message, @@ -96,6 +97,8 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM const [isEmojiPickerOpen, setEmojiPickerOpen] = useState(false) + const { ...reactionProps } = useMessageReactionAnalytics(message as Message) + return ( @@ -182,8 +185,10 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM onEdit={onEdit} onReply={onReply} onForward={onForward} + {...reactionProps} /> + ) } diff --git a/frontend/src/components/feature/chat/ChatMessage/MessageReactions.tsx b/frontend/src/components/feature/chat/ChatMessage/MessageReactions.tsx index e9fc76984..50136d28d 100644 --- a/frontend/src/components/feature/chat/ChatMessage/MessageReactions.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/MessageReactions.tsx @@ -6,7 +6,7 @@ import { useGetUserRecords } from "@/hooks/useGetUserRecords" import { Flex, IconButton, Text, Tooltip } from "@radix-ui/themes" import { clsx } from "clsx" -interface ReactionObject { +export interface ReactionObject { // The emoji reaction: string, // The users who reacted with this emoji diff --git a/frontend/src/utils/operations.ts b/frontend/src/utils/operations.ts index 3f9f9c578..24df3a744 100644 --- a/frontend/src/utils/operations.ts +++ b/frontend/src/utils/operations.ts @@ -128,4 +128,14 @@ export const formatBytes = (bytes: number, decimals = 2) => { */ export const replaceCurrentUserFromDMChannelName = (channelName: string, currentUser: string) => { return channelName.replace(currentUser, '').replace(' _ ', '') +} + +/** + * Function to get user_image from user + * @param user + * @param allUsers + * @returns user image + */ +export const getUserImage = (user: string, allUsers: Record) => { + return allUsers[user] && allUsers[user]?.user_image || '' } \ No newline at end of file From d2708c7af2f9eca5dc62d9728f4f701b3985550c Mon Sep 17 00:00:00 2001 From: pranavmene2000 Date: Sat, 17 Aug 2024 14:31:11 +0530 Subject: [PATCH 02/10] fix: type rollback --- .../MessageActions/MessageActions.tsx | 17 +++++------------ .../feature/chat/ChatMessage/MessageItem.tsx | 4 ++-- 2 files changed, 7 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx b/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx index 381ee2375..a28f1a261 100644 --- a/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx @@ -11,7 +11,6 @@ import { getErrorMessage } from '@/components/layout/AlertBanner/ErrorBanner' import { AiOutlineEdit } from 'react-icons/ai' import { LuForward, LuReply } from 'react-icons/lu' import { MdOutlineEmojiEmotions } from "react-icons/md"; -import { ReactionObject } from '../MessageReactions' export interface MessageContextMenuProps { message?: Message | null, @@ -19,23 +18,17 @@ export interface MessageContextMenuProps { onEdit: VoidFunction, onReply: VoidFunction, onForward: VoidFunction, + onViewReaction?: VoidFunction } -interface MessageReactionAnalyticsProps extends MessageContextMenuProps { - reactions: ReactionObject[], - onClose: VoidFunction, - isOpen: boolean, - open: VoidFunction -} - -export const MessageContextMenu = ({ message, onDelete, onEdit, onReply, onForward, ...reactionProps }: MessageReactionAnalyticsProps) => { +export const MessageContextMenu = ({ message, onDelete, onEdit, onReply, onForward, onViewReaction }: MessageContextMenuProps) => { const copy = useMessageCopy(message) const { currentUser } = useContext(UserContext) const isOwner = currentUser === message?.owner; - const { reactions, open: openReactionAnalytics } = reactionProps + const isReactionsAvailable = Object.keys(JSON.parse(message?.message_reactions ?? '{}')).length !== 0 return ( @@ -109,9 +102,9 @@ export const MessageContextMenu = ({ message, onDelete, onEdit, onReply, onForwa - {Object.keys(reactions).length !== 0 && + {isReactionsAvailable && - + Reaction Analytics diff --git a/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx b/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx index 1239f0ad3..516331ee0 100644 --- a/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx @@ -97,7 +97,7 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM const [isEmojiPickerOpen, setEmojiPickerOpen] = useState(false) - const { ...reactionProps } = useMessageReactionAnalytics(message as Message) + const { open: onViewReaction, ...reactionProps } = useMessageReactionAnalytics(message as Message) return ( @@ -185,7 +185,7 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM onEdit={onEdit} onReply={onReply} onForward={onForward} - {...reactionProps} + onViewReaction={onViewReaction} /> From 569554bf9a21ccc4bf1515bb90cffe1738bbb552 Mon Sep 17 00:00:00 2001 From: pranavmene2000 Date: Sat, 17 Aug 2024 14:34:02 +0530 Subject: [PATCH 03/10] fix: reaction prop destructure --- .../ChatMessage/ActionModals/ReactionAnalyticsModal.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx b/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx index a636a9c97..a73e80d26 100644 --- a/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx @@ -8,12 +8,12 @@ import { useGetUserRecords } from "@/hooks/useGetUserRecords" import { UserAvatar } from "@/components/common/UserAvatar" import { getUserImage } from "@/utils/operations" -export const ReactionAnalyticsModal: React.FC = ({ reactions }) => { +export const ReactionAnalyticsModal = ({ reactions }: ReactionAnalyticsDialogProps) => { const { reaction_emojis, all_reacted_members } = useMemo(() => { const reaction_emojis = reactions.map((reaction: ReactionObject) => reaction.reaction); - const all_reacted_members = reactions.flatMap((reaction: ReactionObject) => - reaction.users.map((user: string) => ({ user, reaction: reaction.reaction })) + const all_reacted_members = reactions.flatMap(({ reaction, users }: ReactionObject) => + users.map((user: string) => ({ user, reaction })) ); return { reaction_emojis, all_reacted_members }; }, [reactions]); From 08ecd297920c2488453759f411245c1efbed9fcd Mon Sep 17 00:00:00 2001 From: pranavmene2000 Date: Sat, 17 Aug 2024 14:42:59 +0530 Subject: [PATCH 04/10] fix: rename reaction context menu item --- .../ActionModals/ReactionAnalyticsModal.tsx | 30 +++++++++---------- .../MessageActions/MessageActions.tsx | 2 +- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx b/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx index a73e80d26..fa23dbd65 100644 --- a/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx @@ -46,21 +46,21 @@ export const ReactionAnalyticsModal = ({ reactions }: ReactionAnalyticsDialogPro ); }; -const DialogHeader = () => ( - - - - - Reaction Analytics - - - - - - - - -); +// const DialogHeader = () => ( +// +// +// +// +// Reactions +// +// +// +// +// +// +// +// +// ); const TabTrigger = ({ emojiStr, count }: { emojiStr: string; count?: number }) => ( diff --git a/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx b/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx index a28f1a261..da2f14a7f 100644 --- a/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx @@ -107,7 +107,7 @@ export const MessageContextMenu = ({ message, onDelete, onEdit, onReply, onForwa - Reaction Analytics + View Reactions } From c98a896f0299282ac2541369ee9ccbb6f2d10a77 Mon Sep 17 00:00:00 2001 From: pranavmene2000 Date: Sat, 17 Aug 2024 16:52:00 +0530 Subject: [PATCH 05/10] fix: change reaction dialog declaration --- .../ChatMessage/MessageActions/MessageActions.tsx | 1 - .../MessageActions/MessageReactionAnalytics.tsx | 12 ++++++------ .../feature/chat/ChatMessage/MessageItem.tsx | 13 +++++++++---- .../feature/chat/ChatStream/ChatStream.tsx | 8 +++++++- 4 files changed, 22 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx b/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx index b1be3905c..1ae811fb9 100644 --- a/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx @@ -22,7 +22,6 @@ export interface MessageContextMenuProps { onViewReaction?: VoidFunction onAttachDocument: VoidFunction } - export const MessageContextMenu = ({ message, onDelete, onEdit, onReply, onForward, onAttachDocument, onViewReaction }: MessageContextMenuProps) => { const copy = useMessageCopy(message) diff --git a/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageReactionAnalytics.tsx b/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageReactionAnalytics.tsx index 2ea5c2681..85a3b03b5 100644 --- a/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageReactionAnalytics.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageReactionAnalytics.tsx @@ -7,8 +7,8 @@ import { Drawer, DrawerContent } from "@/components/layout/Drawer" import { ReactionObject } from "../MessageReactions" import { ReactionAnalyticsModal } from "../ActionModals/ReactionAnalyticsModal" -export const useMessageReactionAnalytics = (message: Message) => { - const [isReactionDialogOpen, setIsReactionDialogOpen] = useState(false) +export const useMessageReactionAnalytics = () => { + const [message, setMessage] = useState(null) const message_reactions = message?.message_reactions; @@ -19,16 +19,16 @@ export const useMessageReactionAnalytics = (message: Message) => { }, [message_reactions]) const onClose = useCallback(() => { - setIsReactionDialogOpen(false) + setMessage(null) }, []) return { reactions, + message, onClose, - isOpen: isReactionDialogOpen, - open: () => setIsReactionDialogOpen(true) + isOpen: message !== null, + setReactionMessage: setMessage } - } export interface ReactionAnalyticsDialogProps { diff --git a/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx b/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx index 439dd237f..d6edd7ce9 100644 --- a/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx @@ -35,10 +35,11 @@ interface MessageBlockProps { forwardMessage: (message: Message) => void, onReplyMessageClick: (messageID: string) => void, onAttachDocument: (message: Message) => void, - isHighlighted?: boolean + isHighlighted?: boolean, + setReactionMessage: (message: Message) => void, } -export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyMessageClick, setEditMessage, replyToMessage, forwardMessage, onAttachDocument }: MessageBlockProps) => { +export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyMessageClick, setEditMessage, replyToMessage, forwardMessage, onAttachDocument, setReactionMessage }: MessageBlockProps) => { const { name, owner: userID, is_bot_message, bot, creation: timestamp, message_reactions, is_continuation, linked_message, replied_message_details } = message @@ -64,6 +65,10 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM onAttachDocument(message) } + const onViewReaction = () => { + setReactionMessage(message) + } + const isDesktop = useIsDesktop() const [isHovered, setIsHovered] = useState(false) @@ -102,7 +107,7 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM const [isEmojiPickerOpen, setEmojiPickerOpen] = useState(false) - const { open: onViewReaction, ...reactionProps } = useMessageReactionAnalytics(message as Message) + // const { open: onViewReaction, ...reactionProps } = useMessageReactionAnalytics(message as Message) return ( @@ -195,7 +200,7 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM onAttachDocument={onAttachToDocument} /> - + {/* */} ) } diff --git a/frontend/src/components/feature/chat/ChatStream/ChatStream.tsx b/frontend/src/components/feature/chat/ChatStream/ChatStream.tsx index 2c68fe3d1..c199a107b 100644 --- a/frontend/src/components/feature/chat/ChatStream/ChatStream.tsx +++ b/frontend/src/components/feature/chat/ChatStream/ChatStream.tsx @@ -16,6 +16,7 @@ import { FiArrowDown } from 'react-icons/fi' import { ErrorBanner } from '@/components/layout/AlertBanner' import { ForwardMessageDialog, useForwardMessage } from '../ChatMessage/MessageActions/ForwardMessage' import AttachFileToDocumentDialog, { useAttachFileToDocument } from '../ChatMessage/MessageActions/AttachFileToDocument' +import { ReactionAnalyticsDialog, useMessageReactionAnalytics } from '../ChatMessage/MessageActions/MessageReactionAnalytics' /** * Anatomy of a message @@ -79,6 +80,8 @@ const ChatStream = ({ replyToMessage }: Props) => { const { setForwardMessage, ...forwardProps } = useForwardMessage() const { setAttachDocument, ...attachDocProps } = useAttachFileToDocument() + const { setReactionMessage, ...reactionProps } = useMessageReactionAnalytics() + const onReplyMessageClick = (messageID: string) => { scrollToMessage(messageID) } @@ -140,7 +143,9 @@ const ChatStream = ({ replyToMessage }: Props) => { replyToMessage={replyToMessage} forwardMessage={setForwardMessage} onAttachDocument={setAttachDocument} - setDeleteMessage={setDeleteMessage} /> + setDeleteMessage={setDeleteMessage} + setReactionMessage={setReactionMessage} + /> } @@ -165,6 +170,7 @@ const ChatStream = ({ replyToMessage }: Props) => { + ) From d05a3adf92f7534c5e9c54444db5137a24699568 Mon Sep 17 00:00:00 2001 From: pranavmene2000 Date: Sat, 17 Aug 2024 16:53:54 +0530 Subject: [PATCH 06/10] feat: remove dialog header --- .../ActionModals/ReactionAnalyticsModal.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx b/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx index fa23dbd65..79b6d6d6f 100644 --- a/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx @@ -20,7 +20,6 @@ export const ReactionAnalyticsModal = ({ reactions }: ReactionAnalyticsDialogPro return ( <> - {/* */} @@ -46,22 +45,6 @@ export const ReactionAnalyticsModal = ({ reactions }: ReactionAnalyticsDialogPro ); }; -// const DialogHeader = () => ( -// -// -// -// -// Reactions -// -// -// -// -// -// -// -// -// ); - const TabTrigger = ({ emojiStr, count }: { emojiStr: string; count?: number }) => ( From e6fa518a64d1a9f066a9c40e1cdbe5737fdb8867 Mon Sep 17 00:00:00 2001 From: pranavmene2000 Date: Sat, 17 Aug 2024 16:59:01 +0530 Subject: [PATCH 07/10] fix: get user avatar by hook --- .../ActionModals/ReactionAnalyticsModal.tsx | 15 ++++++--------- frontend/src/utils/operations.ts | 10 ---------- 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx b/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx index 79b6d6d6f..53551c112 100644 --- a/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx @@ -1,12 +1,9 @@ import { useMemo } from "react" -import { IconButton, Dialog, Flex, Text, Tabs, Box } from "@radix-ui/themes" -import { BiX } from "react-icons/bi" +import { Flex, Text, Tabs, Box } from "@radix-ui/themes" import { ReactionObject } from "../MessageReactions" import { ReactionAnalyticsDialogProps } from "../MessageActions/MessageReactionAnalytics" -import { MdOutlineEmojiEmotions } from "react-icons/md"; -import { useGetUserRecords } from "@/hooks/useGetUserRecords" import { UserAvatar } from "@/components/common/UserAvatar" -import { getUserImage } from "@/utils/operations" +import { useGetUser } from "@/hooks/useGetUser" export const ReactionAnalyticsModal = ({ reactions }: ReactionAnalyticsDialogProps) => { @@ -71,16 +68,16 @@ const UserList = ({ users }: { users: UserItemProps[] }) => ( ); const UserItem = ({ user, reaction }: UserItemProps) => { - const allUsers = useGetUserRecords(); - const userImage = getUserImage(user, allUsers) + const userDetails = useGetUser(user) + const userName = userDetails?.full_name ?? user; return ( - + - {user} + {userName} {reaction && ( diff --git a/frontend/src/utils/operations.ts b/frontend/src/utils/operations.ts index 24df3a744..3f9f9c578 100644 --- a/frontend/src/utils/operations.ts +++ b/frontend/src/utils/operations.ts @@ -128,14 +128,4 @@ export const formatBytes = (bytes: number, decimals = 2) => { */ export const replaceCurrentUserFromDMChannelName = (channelName: string, currentUser: string) => { return channelName.replace(currentUser, '').replace(' _ ', '') -} - -/** - * Function to get user_image from user - * @param user - * @param allUsers - * @returns user image - */ -export const getUserImage = (user: string, allUsers: Record) => { - return allUsers[user] && allUsers[user]?.user_image || '' } \ No newline at end of file From 9a3170d8a81386b6f2d31362d7b826ed4d1d394f Mon Sep 17 00:00:00 2001 From: pranavmene2000 Date: Sat, 17 Aug 2024 17:05:22 +0530 Subject: [PATCH 08/10] fix: add style to avoid emoji fade --- .../chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx b/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx index 53551c112..7eca1313c 100644 --- a/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx @@ -43,7 +43,7 @@ export const ReactionAnalyticsModal = ({ reactions }: ReactionAnalyticsDialogPro }; const TabTrigger = ({ emojiStr, count }: { emojiStr: string; count?: number }) => ( - + {emojiStr} {count && {count}} From 55e5a5e24f70baa9e409998ceb441490340efac8 Mon Sep 17 00:00:00 2001 From: Nikhil Kothari Date: Sat, 17 Aug 2024 17:42:28 +0530 Subject: [PATCH 09/10] Apply suggestions from code review --- .../src/components/feature/chat/ChatMessage/MessageItem.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx b/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx index d6edd7ce9..c5edf2f6f 100644 --- a/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx @@ -25,7 +25,6 @@ import { useIsDesktop } from '@/hooks/useMediaQuery' import { useDoubleTap } from 'use-double-tap' import useOutsideClick from '@/hooks/useOutsideClick' import { getStatusText } from '../../userSettings/AvailabilityStatus/SetUserAvailabilityMenu' -import { ReactionAnalyticsDialog, useMessageReactionAnalytics } from './MessageActions/MessageReactionAnalytics' interface MessageBlockProps { message: Message, @@ -107,8 +106,6 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM const [isEmojiPickerOpen, setEmojiPickerOpen] = useState(false) - // const { open: onViewReaction, ...reactionProps } = useMessageReactionAnalytics(message as Message) - return ( @@ -200,7 +197,6 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM onAttachDocument={onAttachToDocument} /> - {/* */} ) } From b095822b03d78719d903f24f0baeec5b1c8ac52f Mon Sep 17 00:00:00 2001 From: Nikhil Kothari Date: Sat, 17 Aug 2024 17:50:46 +0530 Subject: [PATCH 10/10] fix: do not scroll to image on load --- frontend/package.json | 2 +- .../ChatMessage/Renderers/ImageMessage.tsx | 19 +++++++++---------- package.json | 2 +- raven/__init__.py | 2 +- raven/package.json | 2 +- 5 files changed, 13 insertions(+), 14 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 604608a9b..aee6f044b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -2,7 +2,7 @@ "name": "raven-ui", "private": true, "license": "AGPL-3.0-only", - "version": "1.6.8", + "version": "1.6.9", "type": "module", "scripts": { "dev": "vite", diff --git a/frontend/src/components/feature/chat/ChatMessage/Renderers/ImageMessage.tsx b/frontend/src/components/feature/chat/ChatMessage/Renderers/ImageMessage.tsx index 8267ba0ee..db116832b 100644 --- a/frontend/src/components/feature/chat/ChatMessage/Renderers/ImageMessage.tsx +++ b/frontend/src/components/feature/chat/ChatMessage/Renderers/ImageMessage.tsx @@ -33,15 +33,14 @@ export const ImageMessageBlock = memo(({ message, isScrolling = false, user }: I const width = message.thumbnail_width ? isMobile ? message.thumbnail_width / 2 : message.thumbnail_width : '300' const contentRef = useRef(null); - useEffect(() => { - if (isVisible && contentRef.current) { - setTimeout(() => { - if (contentRef.current) { - contentRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' }); - } - }, 200); - } - }, [isVisible]); + const showImage = () => { + setIsVisible(true) + setTimeout(() => { + if (contentRef.current) { + contentRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + }, 200); + } return ( @@ -54,7 +53,7 @@ export const ImageMessageBlock = memo(({ message, isScrolling = false, user }: I className='pl-0 mr-[1px] cursor-pointer font-bold hover:bg-transparent text-accent-a11 hover:text-gray-12' aria-label={`Click to ${isVisible ? "hide" : "show"} image`} title={`${isVisible ? "Hide" : "Show"} image`} - onClick={() => setIsVisible(prev => !prev)} + onClick={() => isVisible ? setIsVisible(false) : showImage()} > {isVisible ? : } diff --git a/package.json b/package.json index f9b5bfef8..8b00d2706 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "raven", - "version": "1.6.8", + "version": "1.6.9", "description": "Messaging Application", "workspaces": [ "frontend" diff --git a/raven/__init__.py b/raven/__init__.py index 2382cc119..773631a95 100644 --- a/raven/__init__.py +++ b/raven/__init__.py @@ -1 +1 @@ -__version__ = "1.6.8" +__version__ = "1.6.9" diff --git a/raven/package.json b/raven/package.json index 6c662cf2b..e65f36bf9 100644 --- a/raven/package.json +++ b/raven/package.json @@ -1,6 +1,6 @@ { "name": "raven-app", - "version": "1.6.8", + "version": "1.6.9", "description": "", "main": "index.js", "scripts": {