From b2a446df5900646150d05c17647b3ea57bd3b111 Mon Sep 17 00:00:00 2001 From: Barrylimarti Date: Sat, 9 Nov 2024 00:59:37 +0530 Subject: [PATCH 1/4] fetch starred message api called --- packages/react/src/hooks/useFetchChatData.js | 24 +++++++++++++- .../react/src/store/starredMessageStore.js | 2 ++ packages/react/src/views/ChatBody/ChatBody.js | 3 +- .../react/src/views/ChatHeader/ChatHeader.js | 2 +- .../react/src/views/ChatLayout/ChatLayout.js | 33 ++++++++++++++++--- packages/react/src/views/Message/Message.js | 4 ++- .../MessageAggregators/StarredMessages.js | 9 +++-- .../common/MessageAggregator.js | 5 +-- 8 files changed, 70 insertions(+), 12 deletions(-) diff --git a/packages/react/src/hooks/useFetchChatData.js b/packages/react/src/hooks/useFetchChatData.js index 1d08f0eaf..38820e7a8 100644 --- a/packages/react/src/hooks/useFetchChatData.js +++ b/packages/react/src/hooks/useFetchChatData.js @@ -5,6 +5,7 @@ import { useChannelStore, useMemberStore, useMessageStore, + useStarredMessageStore, } from '../store'; const useFetchChatData = (showRoles) => { @@ -13,6 +14,7 @@ const useFetchChatData = (showRoles) => { const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate); const setMessages = useMessageStore((state) => state.setMessages); const setAdmins = useMemberStore((state) => state.setAdmins); + const setStarredMessages=useStarredMessageStore((state)=>state.setStarredMessages) const isUserAuthenticated = useUserStore( (state) => state.isUserAuthenticated ); @@ -78,9 +80,29 @@ const useFetchChatData = (showRoles) => { setAdmins, setMemberRoles, ] + ); - return getMessagesAndRoles; + const getStarredMessages = useCallback( + async (anonymousMode) => { + console.log("asjlndlkas") + if (isUserAuthenticated) { + try { + if (!isUserAuthenticated && !anonymousMode) { + return; + } + const { messages } = await RCInstance.getStarredMessages(); + console.log("starred messages", messages); + setStarredMessages(messages); + } catch (e) { + console.error(e); + } + } + }, + [isUserAuthenticated, RCInstance, setStarredMessages] + ); + + return { getMessagesAndRoles, getStarredMessages }; }; export default useFetchChatData; diff --git a/packages/react/src/store/starredMessageStore.js b/packages/react/src/store/starredMessageStore.js index a564df3c4..94f3d3091 100644 --- a/packages/react/src/store/starredMessageStore.js +++ b/packages/react/src/store/starredMessageStore.js @@ -3,6 +3,8 @@ import { create } from 'zustand'; const useStarredMessageStore = create((set) => ({ showStarred: false, setShowStarred: (showStarred) => set(() => ({ showStarred })), + starredMessages:[], + setStarredMessages:(messages)=>set(()=>({starredMessages:messages})) })); export default useStarredMessageStore; diff --git a/packages/react/src/views/ChatBody/ChatBody.js b/packages/react/src/views/ChatBody/ChatBody.js index e5a6bd1a3..d70e9b46b 100644 --- a/packages/react/src/views/ChatBody/ChatBody.js +++ b/packages/react/src/views/ChatBody/ChatBody.js @@ -69,7 +69,7 @@ const ChatBody = ({ const username = useUserStore((state) => state.username); - const getMessagesAndRoles = useFetchChatData(showRoles); + const { getMessagesAndRoles } = useFetchChatData(showRoles); const getThreadMessages = useCallback(async () => { if (isUserAuthenticated && threadMainMessage?._id) { @@ -103,6 +103,7 @@ const ChatBody = ({ const addMessage = useCallback( (message) => { + console.log("message from listener",message) if (message.u.username !== username) { const isScrolledUp = messageListRef?.current?.scrollTop !== 0; if (isScrolledUp && !('pinned' in message) && !('starred' in message)) { diff --git a/packages/react/src/views/ChatHeader/ChatHeader.js b/packages/react/src/views/ChatHeader/ChatHeader.js index 0e46b9ccd..1e99ce649 100644 --- a/packages/react/src/views/ChatHeader/ChatHeader.js +++ b/packages/react/src/views/ChatHeader/ChatHeader.js @@ -86,7 +86,7 @@ const ChatHeader = ({ ); const dispatchToastMessage = useToastBarDispatch(); - const getMessagesAndRoles = useFetchChatData(showRoles); + const { getMessagesAndRoles } = useFetchChatData(showRoles); const setMessageLimit = useSettingsStore((state) => state.setMessageLimit); const avatarUrl = useUserStore((state) => state.avatarUrl); diff --git a/packages/react/src/views/ChatLayout/ChatLayout.js b/packages/react/src/views/ChatLayout/ChatLayout.js index 6243dc0cc..4052e1093 100644 --- a/packages/react/src/views/ChatLayout/ChatLayout.js +++ b/packages/react/src/views/ChatLayout/ChatLayout.js @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React, { useEffect, useRef, useCallback, useState } from 'react'; import { Box, useComponentOverrides } from '@embeddedchat/ui-elements'; import styles from './ChatLayout.styles'; import { @@ -36,9 +36,11 @@ import useUiKitStore from '../../store/uiKitStore'; const ChatLayout = () => { const messageListRef = useRef(null); const { classNames, styleOverrides } = useComponentOverrides('ChatBody'); - const { ECOptions } = useRCContext(); + const { RCInstance,ECOptions } = useRCContext(); const anonymousMode = ECOptions?.anonymousMode; const showRoles = ECOptions?.anonymousMode; + const setStarredMessages=useStarredMessageStore((state)=>state.setStarredMessages) + const starredMessages=useStarredMessageStore((state)=>state.starredMessages) const showSidebar = useSidebarStore((state) => state.showSidebar); const showMentions = useMentionsStore((state) => state.showMentions); const showAllFiles = useFileStore((state) => state.showAllFiles); @@ -57,6 +59,9 @@ const ChatLayout = () => { const attachmentWindowOpen = useAttachmentWindowStore( (state) => state.attachmentWindowOpen ); + const isUserAuthenticated = useUserStore( + (state) => state.isUserAuthenticated + ); const { data, handleDrag, handleDragDrop } = useDropBox(); const { uiKitContextualBarOpen, uiKitContextualBarData } = useUiKitStore( (state) => ({ @@ -72,7 +77,27 @@ const ChatLayout = () => { }); } }; - + const getStarredMessages = useCallback(async () => { + if (isUserAuthenticated) { + try { + if (!isUserAuthenticated && !anonymousMode) { + return; + } + const { messages } = await RCInstance.getStarredMessages(); + console.log("starred messages",messages) + setStarredMessages(messages) + } catch (e) { + console.error(e); + } + } + }, [ + isUserAuthenticated, + anonymousMode, + RCInstance + ]); + useEffect(()=>{ + getStarredMessages() + },[showSidebar]) return ( { {showAllFiles && } {showMentions && } {showPinned && } - {showStarred && } + {showStarred && } {showCurrentUserInfo && } {uiKitContextualBarOpen && ( state.setQuoteMessage); const openThread = useMessageStore((state) => state.openThread); - + const {getStarredMessages}=useFetchChatData() const dispatchToastMessage = useToastBarDispatch(); const { editMessage, setEditMessage } = useMessageStore((state) => ({ editMessage: state.editMessage, @@ -87,6 +88,7 @@ const Message = ({ message: 'Message unstarred', }); } + getStarredMessages(); }; const handlePinMessage = async (msg) => { diff --git a/packages/react/src/views/MessageAggregators/StarredMessages.js b/packages/react/src/views/MessageAggregators/StarredMessages.js index b7d77b864..f0daf5d61 100644 --- a/packages/react/src/views/MessageAggregators/StarredMessages.js +++ b/packages/react/src/views/MessageAggregators/StarredMessages.js @@ -1,23 +1,28 @@ -import React, { useCallback } from 'react'; +import React, { useCallback, useEffect } from 'react'; import { useComponentOverrides } from '@embeddedchat/ui-elements'; -import { useUserStore } from '../../store'; +import { useStarredMessageStore, useUserStore } from '../../store'; import { MessageAggregator } from './common/MessageAggregator'; const StarredMessages = () => { const authenticatedUserId = useUserStore((state) => state.userId); const { variantOverrides } = useComponentOverrides('StarredMessages'); const viewType = variantOverrides.viewType || 'Sidebar'; + const starredMessages=useStarredMessageStore((state)=>state.starredMessages) const shouldRender = useCallback( (msg) => msg.starred && msg.starred.some((star) => star._id === authenticatedUserId), [authenticatedUserId] ); + useEffect(()=>{ + console.log("star",starredMessages) + },[starredMessages]) return ( diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js index 079582e86..f5704fc0e 100644 --- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js +++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js @@ -16,6 +16,7 @@ export const MessageAggregator = ({ iconName, noMessageInfo, shouldRender, + messageList, searchProps, searchFiltered, fetching, @@ -32,7 +33,7 @@ export const MessageAggregator = ({ [messages, threadMessages] ); const [messageRendered, setMessageRendered] = useState(false); - const { loading, messageList } = useSetMessageList( + const { loading } = useSetMessageList( searchFiltered || allMessages, shouldRender ); @@ -44,7 +45,7 @@ export const MessageAggregator = ({ const noMessages = messageList?.length === 0 || !messageRendered; const ViewComponent = viewType === 'Popup' ? Popup : Sidebar; - + console.log("messages",messages) return ( Date: Wed, 13 Nov 2024 02:42:14 +0530 Subject: [PATCH 2/4] starred messages fetching from api --- packages/react/src/hooks/useFetchChatData.js | 7 +++-- .../react/src/store/starredMessageStore.js | 4 +-- packages/react/src/views/ChatBody/ChatBody.js | 1 - .../react/src/views/ChatLayout/ChatLayout.js | 27 +++++++++---------- packages/react/src/views/Message/Message.js | 2 +- .../MessageAggregators/StarredMessages.js | 9 +++---- .../common/MessageAggregator.js | 15 +++++------ 7 files changed, 30 insertions(+), 35 deletions(-) diff --git a/packages/react/src/hooks/useFetchChatData.js b/packages/react/src/hooks/useFetchChatData.js index 38820e7a8..99c48aa1e 100644 --- a/packages/react/src/hooks/useFetchChatData.js +++ b/packages/react/src/hooks/useFetchChatData.js @@ -14,7 +14,9 @@ const useFetchChatData = (showRoles) => { const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate); const setMessages = useMessageStore((state) => state.setMessages); const setAdmins = useMemberStore((state) => state.setAdmins); - const setStarredMessages=useStarredMessageStore((state)=>state.setStarredMessages) + const setStarredMessages = useStarredMessageStore( + (state) => state.setStarredMessages + ); const isUserAuthenticated = useUserStore( (state) => state.isUserAuthenticated ); @@ -80,19 +82,16 @@ const useFetchChatData = (showRoles) => { setAdmins, setMemberRoles, ] - ); const getStarredMessages = useCallback( async (anonymousMode) => { - console.log("asjlndlkas") if (isUserAuthenticated) { try { if (!isUserAuthenticated && !anonymousMode) { return; } const { messages } = await RCInstance.getStarredMessages(); - console.log("starred messages", messages); setStarredMessages(messages); } catch (e) { console.error(e); diff --git a/packages/react/src/store/starredMessageStore.js b/packages/react/src/store/starredMessageStore.js index 94f3d3091..989ec8b6f 100644 --- a/packages/react/src/store/starredMessageStore.js +++ b/packages/react/src/store/starredMessageStore.js @@ -3,8 +3,8 @@ import { create } from 'zustand'; const useStarredMessageStore = create((set) => ({ showStarred: false, setShowStarred: (showStarred) => set(() => ({ showStarred })), - starredMessages:[], - setStarredMessages:(messages)=>set(()=>({starredMessages:messages})) + starredMessages: [], + setStarredMessages: (messages) => set(() => ({ starredMessages: messages })), })); export default useStarredMessageStore; diff --git a/packages/react/src/views/ChatBody/ChatBody.js b/packages/react/src/views/ChatBody/ChatBody.js index d70e9b46b..a582244d0 100644 --- a/packages/react/src/views/ChatBody/ChatBody.js +++ b/packages/react/src/views/ChatBody/ChatBody.js @@ -103,7 +103,6 @@ const ChatBody = ({ const addMessage = useCallback( (message) => { - console.log("message from listener",message) if (message.u.username !== username) { const isScrolledUp = messageListRef?.current?.scrollTop !== 0; if (isScrolledUp && !('pinned' in message) && !('starred' in message)) { diff --git a/packages/react/src/views/ChatLayout/ChatLayout.js b/packages/react/src/views/ChatLayout/ChatLayout.js index 4052e1093..ee6b0c1b9 100644 --- a/packages/react/src/views/ChatLayout/ChatLayout.js +++ b/packages/react/src/views/ChatLayout/ChatLayout.js @@ -36,11 +36,15 @@ import useUiKitStore from '../../store/uiKitStore'; const ChatLayout = () => { const messageListRef = useRef(null); const { classNames, styleOverrides } = useComponentOverrides('ChatBody'); - const { RCInstance,ECOptions } = useRCContext(); + const { RCInstance, ECOptions } = useRCContext(); const anonymousMode = ECOptions?.anonymousMode; const showRoles = ECOptions?.anonymousMode; - const setStarredMessages=useStarredMessageStore((state)=>state.setStarredMessages) - const starredMessages=useStarredMessageStore((state)=>state.starredMessages) + const setStarredMessages = useStarredMessageStore( + (state) => state.setStarredMessages + ); + const starredMessages = useStarredMessageStore( + (state) => state.starredMessages + ); const showSidebar = useSidebarStore((state) => state.showSidebar); const showMentions = useMentionsStore((state) => state.showMentions); const showAllFiles = useFileStore((state) => state.showAllFiles); @@ -84,20 +88,15 @@ const ChatLayout = () => { return; } const { messages } = await RCInstance.getStarredMessages(); - console.log("starred messages",messages) - setStarredMessages(messages) + setStarredMessages(messages); } catch (e) { console.error(e); } } - }, [ - isUserAuthenticated, - anonymousMode, - RCInstance - ]); - useEffect(()=>{ - getStarredMessages() - },[showSidebar]) + }, [isUserAuthenticated, anonymousMode, RCInstance]); + useEffect(() => { + getStarredMessages(); + }, [showSidebar]); return ( { {showAllFiles && } {showMentions && } {showPinned && } - {showStarred && } + {showStarred && } {showCurrentUserInfo && } {uiKitContextualBarOpen && ( state.setQuoteMessage); const openThread = useMessageStore((state) => state.openThread); - const {getStarredMessages}=useFetchChatData() + const { getStarredMessages } = useFetchChatData(); const dispatchToastMessage = useToastBarDispatch(); const { editMessage, setEditMessage } = useMessageStore((state) => ({ editMessage: state.editMessage, diff --git a/packages/react/src/views/MessageAggregators/StarredMessages.js b/packages/react/src/views/MessageAggregators/StarredMessages.js index f0daf5d61..5ced944f0 100644 --- a/packages/react/src/views/MessageAggregators/StarredMessages.js +++ b/packages/react/src/views/MessageAggregators/StarredMessages.js @@ -7,22 +7,21 @@ const StarredMessages = () => { const authenticatedUserId = useUserStore((state) => state.userId); const { variantOverrides } = useComponentOverrides('StarredMessages'); const viewType = variantOverrides.viewType || 'Sidebar'; - const starredMessages=useStarredMessageStore((state)=>state.starredMessages) + const starredMessages = useStarredMessageStore( + (state) => state.starredMessages + ); const shouldRender = useCallback( (msg) => msg.starred && msg.starred.some((star) => star._id === authenticatedUserId), [authenticatedUserId] ); - useEffect(()=>{ - console.log("star",starredMessages) - },[starredMessages]) return ( diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js index f5704fc0e..c39e36ab0 100644 --- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js +++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js @@ -16,7 +16,7 @@ export const MessageAggregator = ({ iconName, noMessageInfo, shouldRender, - messageList, + fetchedMessageList, searchProps, searchFiltered, fetching, @@ -33,19 +33,18 @@ export const MessageAggregator = ({ [messages, threadMessages] ); const [messageRendered, setMessageRendered] = useState(false); - const { loading } = useSetMessageList( - searchFiltered || allMessages, - shouldRender - ); + const { loading, messageList } = fetchedMessageList + ? { loading: false, messageList: fetchedMessageList } + : useSetMessageList(searchFiltered || allMessages, shouldRender); const isMessageNewDay = (current, previous) => !previous || - !shouldRender(previous) || + (fetchedMessageList && shouldRender(previous)) || !isSameDay(new Date(current.ts), new Date(previous.ts)); const noMessages = messageList?.length === 0 || !messageRendered; const ViewComponent = viewType === 'Popup' ? Popup : Sidebar; - console.log("messages",messages) + return ( { const newDay = isMessageNewDay(msg, arr[index - 1]); - if (!messageRendered && shouldRender(msg)) { + if (!messageRendered && fetchedMessageList && shouldRender(msg)) { setMessageRendered(true); } From 4b57b3be09a1cb4d7158a0a777b2832d494aef0a Mon Sep 17 00:00:00 2001 From: Barrylimarti Date: Wed, 13 Nov 2024 03:14:51 +0530 Subject: [PATCH 3/4] ran prettier --- .../src/views/MessageAggregators/common/MessageAggregator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js index c39e36ab0..46c603c2b 100644 --- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js +++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js @@ -44,7 +44,7 @@ export const MessageAggregator = ({ const noMessages = messageList?.length === 0 || !messageRendered; const ViewComponent = viewType === 'Popup' ? Popup : Sidebar; - + return ( Date: Wed, 13 Nov 2024 03:30:54 +0530 Subject: [PATCH 4/4] fixed linting errors --- .../MessageAggregators/common/MessageAggregator.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js index 46c603c2b..a012d0b85 100644 --- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js +++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js @@ -33,13 +33,14 @@ export const MessageAggregator = ({ [messages, threadMessages] ); const [messageRendered, setMessageRendered] = useState(false); - const { loading, messageList } = fetchedMessageList - ? { loading: false, messageList: fetchedMessageList } - : useSetMessageList(searchFiltered || allMessages, shouldRender); + const { loading, messageList } = useSetMessageList( + fetchedMessageList || searchFiltered || allMessages, + shouldRender + ); const isMessageNewDay = (current, previous) => !previous || - (fetchedMessageList && shouldRender(previous)) || + shouldRender(previous) || !isSameDay(new Date(current.ts), new Date(previous.ts)); const noMessages = messageList?.length === 0 || !messageRendered; @@ -73,7 +74,7 @@ export const MessageAggregator = ({ {messageList.map((msg, index, arr) => { const newDay = isMessageNewDay(msg, arr[index - 1]); - if (!messageRendered && fetchedMessageList && shouldRender(msg)) { + if (!messageRendered && shouldRender(msg)) { setMessageRendered(true); }