diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx index 69f41e2d59..580f31f0df 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.tsx +++ b/src/pages/common/components/ChatComponent/ChatComponent.tsx @@ -713,13 +713,13 @@ export default function ChatComponent({ discussionMessagesData.fetchDiscussionMessages(); dispatch(chatActions.clearCurrentDiscussionMessageReply()); } - }, [discussionId]); + }, [discussionId, dispatch]); useEffect(() => { if (isTopReached && discussionId) { discussionMessagesData.fetchDiscussionMessages(); } - }, [isTopReached, discussionId, dispatch]); + }, [isTopReached, discussionId]); return (
diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx index 9e54a4e3a6..3df2a9c9fd 100644 --- a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx +++ b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx @@ -58,10 +58,7 @@ interface ChatContentInterface { onInternalLinkClick?: (data: InternalLinkData) => void; isEmpty?: boolean; isChatChannel: boolean; - fetchReplied: ( - messageId: string, - endDate: Date, - ) => Promise; + fetchReplied: (messageId: string, endDate: Date) => Promise; } const isToday = (someDate: Date) => { @@ -160,13 +157,12 @@ const ChatContent: ForwardRefRenderFunction< useState(); useEffect(() => { - if (shouldScrollToElementId) { - if ( - discussionMessages?.find((item) => item.id === shouldScrollToElementId) - ) { - setHighlightedMessageId(shouldScrollToElementId); - setShouldScrollToElementId(""); - } + if ( + shouldScrollToElementId && + discussionMessages?.find((item) => item.id === shouldScrollToElementId) + ) { + setHighlightedMessageId(shouldScrollToElementId); + setShouldScrollToElementId(""); } }, [shouldScrollToElementId, discussionMessages]); diff --git a/src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts b/src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts index d303e0a8fa..ba39c257c5 100644 --- a/src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts +++ b/src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts @@ -28,18 +28,18 @@ interface Return { } export const useDiscussionChatAdapter = (options: Options): Return => { - const { hasPermissionToHide, textStyles, discussionId} = options; - + const { hasPermissionToHide, textStyles, discussionId } = options; + const user = useSelector(selectUser()); const userId = user?.uid; const { data: commonMembers, fetchCommonMembers } = useCommonMembers(); - const users = useMemo( - () => - commonMembers - .filter((member) => member.userId !== userId) - .map(({ user }) => user), - [userId, commonMembers], - ); + const users = useMemo( + () => + commonMembers + .filter((member) => member.userId !== userId) + .map(({ user }) => user), + [userId, commonMembers], + ); const discussionMessagesData = useDiscussionMessagesById({ discussionId, hasPermissionToHide, diff --git a/src/services/DiscussionMessage.ts b/src/services/DiscussionMessage.ts index ad0bfc0568..46be7f995c 100644 --- a/src/services/DiscussionMessage.ts +++ b/src/services/DiscussionMessage.ts @@ -26,25 +26,39 @@ class DiscussionMessageService { return transformFirebaseDataSingle(discussionMessage); } - public getDiscussionMessagesByEndDate = async (discussionId: string,lastVisible: firebase.firestore.QueryDocumentSnapshot | null, endDate: Date): Promise<{data: DiscussionMessage[], lastVisibleSnapshot: firebase.firestore.QueryDocumentSnapshot}> => { + public getDiscussionMessagesByEndDate = async ( + discussionId: string, + lastVisible: firebase.firestore.QueryDocumentSnapshot | null, + endDate: Date + ): Promise<{ data: DiscussionMessage[], lastVisibleSnapshot: firebase.firestore.QueryDocumentSnapshot }> => { const snapshot = await this.getDiscussionMessageCollection().where( "discussionId", "==", discussionId, - ).where("createdAt", ">=", endDate).orderBy('createdAt', 'desc').startAfter(lastVisible).get(); + ).where("createdAt", ">=", endDate) + .orderBy('createdAt', 'desc') + .startAfter(lastVisible) + .get(); const data = transformFirebaseDataList(snapshot); const snapshotOfItemsAfterEndDate = await this.getDiscussionMessageCollection().where( "discussionId", "==", discussionId, - ).orderBy('createdAt', 'desc').startAfter(snapshot.docs[data.length - 1]).limit(5).get(); + ).orderBy('createdAt', 'desc') + .startAfter(snapshot.docs[data.length - 1]) + .limit(5) + .get(); const dataAfterEndDate = transformFirebaseDataList(snapshotOfItemsAfterEndDate); - return {data: [...data, ...dataAfterEndDate], lastVisibleSnapshot: snapshotOfItemsAfterEndDate.docs[dataAfterEndDate.length - 1]}; + return { data: [...data, ...dataAfterEndDate], lastVisibleSnapshot: snapshotOfItemsAfterEndDate.docs[dataAfterEndDate.length - 1] }; } - public getDiscussionMessagesByDiscussionId = (discussionId: string, lastVisible: firebase.firestore.QueryDocumentSnapshot | null, callback: (snapshot: firebase.firestore.QuerySnapshot, discussion: DiscussionMessage[]) => void,): UnsubscribeFunction => { + public getDiscussionMessagesByDiscussionId = (discussionId: string, + lastVisible: firebase.firestore.QueryDocumentSnapshot | null, + callback: (snapshot: firebase.firestore.QuerySnapshot, + discussion: DiscussionMessage[]) => void + ): UnsubscribeFunction => { let query = this.getDiscussionMessageCollection().where( "discussionId", "==", diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx index 90fe88c56d..351adddae0 100644 --- a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx +++ b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx @@ -310,9 +310,7 @@ export default function ChatMessage({ isProposalMessage={chatType === ChatType.ProposalComments} isChatMessage={chatType === ChatType.ChatMessages} discussionMessage={discussionMessage} - onClose={() => { - setEditMode(false); - }} + onClose={() => setEditMode(false)} commonMember={commonMember} /> ) : ( @@ -399,9 +397,7 @@ export default function ChatMessage({ } userId={userId} commonId={discussionMessage.commonId} - onEdit={() => { - setEditMode(true); - }} + onEdit={() => setEditMode(true)} isControlledDropdown={false} isOpen={isMenuOpen} styles={{ diff --git a/src/shared/hooks/useCases/useDiscussionMessagesById.ts b/src/shared/hooks/useCases/useDiscussionMessagesById.ts index b60c9174f6..3fb957d5ba 100644 --- a/src/shared/hooks/useCases/useDiscussionMessagesById.ts +++ b/src/shared/hooks/useCases/useDiscussionMessagesById.ts @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import classNames from 'classnames'; import { isEqual, xor } from "lodash"; @@ -113,48 +113,48 @@ export const useDiscussionMessagesById = ({ ); }; - const fetchRepliedMessages = async (messageId: string, endDate: Date): Promise => { - if(state.data?.find((item) => item.id === discussionId)) { + const fetchRepliedMessages = async (messageId: string, endDate: Date): Promise => { + if (state.data?.find((item) => item.id === discussionId)) { return Promise.resolve(); } - const {data: updatedDiscussionMessages, lastVisibleSnapshot} = await DiscussionMessageService.getDiscussionMessagesByEndDate(discussionId, lastVisible && lastVisible[discussionId], endDate); + const { data: updatedDiscussionMessages, lastVisibleSnapshot } = await DiscussionMessageService.getDiscussionMessagesByEndDate(discussionId, lastVisible && lastVisible[discussionId], endDate); - setLastVisible((prevVisible) => ({...prevVisible, [discussionId]: lastVisibleSnapshot})); + setLastVisible((prevVisible) => ({ ...prevVisible, [discussionId]: lastVisibleSnapshot })); const discussionsWithText = await Promise.all((updatedDiscussionMessages.map(async (discussionMessage) => { const emojiCount = countTextEditorEmojiElements( parseStringToTextEditorValue(discussionMessage.text), ); const isUserDiscussionMessage = - checkIsUserDiscussionMessage(discussionMessage); + checkIsUserDiscussionMessage(discussionMessage); const isSystemMessage = checkIsSystemDiscussionMessage(discussionMessage); const isNotCurrentUserMessage = - !isUserDiscussionMessage || userId !== discussionMessage.ownerId; - const parsedText = await getTextFromTextEditorString({ - textEditorString: discussionMessage.text, - users, - mentionTextClassName: !isNotCurrentUserMessage - ? textStyles.mentionTextCurrentUser - : "", - emojiTextClassName: classNames({ - [textStyles.singleEmojiText]: emojiCount.isSingleEmoji, - [textStyles.multipleEmojiText]: emojiCount.isMultipleEmoji, - }), - commonId: discussionMessage.commonId, - systemMessage: isSystemMessage ? discussionMessage : undefined, - getCommonPagePath, - getCommonPageAboutTabPath, - directParent, - onUserClick, - onFeedItemClick, - }); + !isUserDiscussionMessage || userId !== discussionMessage.ownerId; + const parsedText = await getTextFromTextEditorString({ + textEditorString: discussionMessage.text, + users, + mentionTextClassName: !isNotCurrentUserMessage + ? textStyles.mentionTextCurrentUser + : "", + emojiTextClassName: classNames({ + [textStyles.singleEmojiText]: emojiCount.isSingleEmoji, + [textStyles.multipleEmojiText]: emojiCount.isMultipleEmoji, + }), + commonId: discussionMessage.commonId, + systemMessage: isSystemMessage ? discussionMessage : undefined, + getCommonPagePath, + getCommonPageAboutTabPath, + directParent, + onUserClick, + onFeedItemClick, + }); - return { - ...discussionMessage, - parsedText, - } + return { + ...discussionMessage, + parsedText, + } }))) dispatch( cacheActions.updateDiscussionMessagesStateByDiscussionId({ @@ -165,7 +165,7 @@ export const useDiscussionMessagesById = ({ data: discussionsWithText as any, }, }), - ) + ) } const fetchDiscussionMessages = () => { @@ -176,7 +176,7 @@ export const useDiscussionMessagesById = ({ return null; } - if(!state.data?.length) { + if (!state.data?.length) { setDefaultState({ ...DEFAULT_STATE }); } @@ -184,68 +184,66 @@ export const useDiscussionMessagesById = ({ discussionId, lastVisible && lastVisible[discussionId], async (snapshot, updatedDiscussionMessages) => { - const lastVisibleDocument = - snapshot.docs[updatedDiscussionMessages.length - 1]; + const lastVisibleDocument = snapshot.docs[updatedDiscussionMessages.length - 1]; - setLastVisible((prevVisible) => ({...prevVisible, [discussionId]: lastVisibleDocument})); + setLastVisible((prevVisible) => ({ ...prevVisible, [discussionId]: lastVisibleDocument })); - const hasLastVisibleDocument = !!lastVisibleDocument?.data(); - - const discussionsWithText = await Promise.all((updatedDiscussionMessages.map(async (discussionMessage) => { - const emojiCount = countTextEditorEmojiElements( - parseStringToTextEditorValue(discussionMessage.text), - ); + const hasLastVisibleDocument = !!lastVisibleDocument?.data(); - const isUserDiscussionMessage = - checkIsUserDiscussionMessage(discussionMessage); - const isSystemMessage = checkIsSystemDiscussionMessage(discussionMessage); + const discussionsWithText = await Promise.all((updatedDiscussionMessages.map(async (discussionMessage) => { + const emojiCount = countTextEditorEmojiElements( + parseStringToTextEditorValue(discussionMessage.text), + ); - const isNotCurrentUserMessage = - !isUserDiscussionMessage || userId !== discussionMessage.ownerId; - const parsedText = await getTextFromTextEditorString({ - textEditorString: discussionMessage.text, - users, - mentionTextClassName: !isNotCurrentUserMessage - ? textStyles.mentionTextCurrentUser - : "", - emojiTextClassName: classNames({ - [textStyles.singleEmojiText]: emojiCount.isSingleEmoji, - [textStyles.multipleEmojiText]: emojiCount.isMultipleEmoji, - }), - commonId: discussionMessage.commonId, - systemMessage: isSystemMessage ? discussionMessage : undefined, - getCommonPagePath, - getCommonPageAboutTabPath, - directParent, - onUserClick, - onFeedItemClick, - }); + const isUserDiscussionMessage = checkIsUserDiscussionMessage(discussionMessage); + const isSystemMessage = checkIsSystemDiscussionMessage(discussionMessage); - return { - ...discussionMessage, - parsedText, - } - }))) - dispatch( - cacheActions.updateDiscussionMessagesStateByDiscussionId({ - discussionId, - state: { - loading: false, - fetched: true, - data: discussionsWithText as any, - }, + const isNotCurrentUserMessage = + !isUserDiscussionMessage || userId !== discussionMessage.ownerId; + const parsedText = await getTextFromTextEditorString({ + textEditorString: discussionMessage.text, + users, + mentionTextClassName: !isNotCurrentUserMessage + ? textStyles.mentionTextCurrentUser + : "", + emojiTextClassName: classNames({ + [textStyles.singleEmojiText]: emojiCount.isSingleEmoji, + [textStyles.multipleEmojiText]: emojiCount.isMultipleEmoji, }), - ) - - if ( - discussionsWithText.length < 15 && - !hasLastVisibleDocument - ) { - setIsEndOfList((prevIsEndOfList) => ({...prevIsEndOfList, [discussionId]: true})); - } + commonId: discussionMessage.commonId, + systemMessage: isSystemMessage ? discussionMessage : undefined, + getCommonPagePath, + getCommonPageAboutTabPath, + directParent, + onUserClick, + onFeedItemClick, + }); + + return { + ...discussionMessage, + parsedText, + } + }))); + dispatch( + cacheActions.updateDiscussionMessagesStateByDiscussionId({ + discussionId, + state: { + loading: false, + fetched: true, + data: discussionsWithText as any, + }, + }), + ) + + if ( + discussionsWithText.length < 15 && + !hasLastVisibleDocument + ) { + setIsEndOfList((prevIsEndOfList) => ({ ...prevIsEndOfList, [discussionId]: true })); + } }, ); - }; + }; const fetchMessageOwners = async (ids: string[]): Promise => { if (isEqual(messageOwnersIds, ids)) { @@ -287,17 +285,17 @@ export const useDiscussionMessagesById = ({ } newDiscussionMessage.parentMessage = parentMessage ? { - id: parentMessage.id, - text: parentMessage.text, - ownerName: parentMessage?.ownerName, - ...(checkIsUserDiscussionMessage(parentMessage) && { - ownerId: parentMessage.ownerId, - }), - moderation: parentMessage?.moderation, - images: parentMessage?.images, - files: parentMessage?.files, - createdAt: parentMessage.createdAt - } + id: parentMessage.id, + text: parentMessage.text, + ownerName: parentMessage?.ownerName, + ...(checkIsUserDiscussionMessage(parentMessage) && { + ownerId: parentMessage.ownerId, + }), + moderation: parentMessage?.moderation, + images: parentMessage?.images, + files: parentMessage?.files, + createdAt: parentMessage.createdAt + } : null; return newDiscussionMessage; }));