Fix: Sidebar starred messages fetched by api to include thread messages. (#669)

* fetch starred message api called

* starred messages fetching from api

* ran prettier

* fixed linting errors

Author: Barrylimarti

packages/react/src/hooks/useFetchChatData.js

@@ -5,6 +5,7 @@ import {
   useChannelStore,
   useMemberStore,
   useMessageStore,
+  useStarredMessageStore,
 } from '../store';
 
 const useFetchChatData = (showRoles) => {
@@ -13,6 +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 isUserAuthenticated = useUserStore(
     (state) => state.isUserAuthenticated
   );
@@ -80,7 +84,24 @@ const useFetchChatData = (showRoles) => {
     ]
   );
 
-  return getMessagesAndRoles;
+  const getStarredMessages = useCallback(
+    async (anonymousMode) => {
+      if (isUserAuthenticated) {
+        try {
+          if (!isUserAuthenticated && !anonymousMode) {
+            return;
+          }
+          const { messages } = await RCInstance.getStarredMessages();
+          setStarredMessages(messages);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    },
+    [isUserAuthenticated, RCInstance, setStarredMessages]
+  );
+
+  return { getMessagesAndRoles, getStarredMessages };
 };
 
 export default useFetchChatData;

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;

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) {

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 setMessages = useMessageStore((state) => state.setMessages);
   const avatarUrl = useUserStore((state) => state.avatarUrl);

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,15 @@ 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 +63,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 +81,22 @@ const ChatLayout = () => {
       });
     }
   };
-
+  const getStarredMessages = useCallback(async () => {
+    if (isUserAuthenticated) {
+      try {
+        if (!isUserAuthenticated && !anonymousMode) {
+          return;
+        }
+        const { messages } = await RCInstance.getStarredMessages();
+        setStarredMessages(messages);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }, [isUserAuthenticated, anonymousMode, RCInstance]);
+  useEffect(() => {
+    getStarredMessages();
+  }, [showSidebar]);
   return (
     <Box
       css={styles.layout}

packages/react/src/views/Message/Message.js

@@ -24,6 +24,7 @@ import { LinkPreview } from '../LinkPreview';
 import { getMessageStyles } from './Message.styles';
 import useBubbleStyles from './BubbleVariant/useBubbleStyles';
 import UiKitMessageBlock from './uiKit/UiKitMessageBlock';
+import useFetchChatData from '../../hooks/useFetchChatData';
 
 const Message = ({
   message,
@@ -60,7 +61,7 @@ const Message = ({
   );
   const addQuoteMessage = useMessageStore((state) => state.addQuoteMessage);
   const openThread = useMessageStore((state) => state.openThread);
-
+  const { getStarredMessages } = useFetchChatData();
   const dispatchToastMessage = useToastBarDispatch();
   const { editMessage, setEditMessage } = useMessageStore((state) => ({
     editMessage: state.editMessage,
@@ -92,6 +93,7 @@ const Message = ({
         message: 'Message unstarred',
       });
     }
+    getStarredMessages();
   };
 
   const handlePinMessage = async (msg) => {

packages/react/src/views/MessageAggregators/StarredMessages.js

@@ -1,12 +1,15 @@
-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 &&
@@ -18,6 +21,7 @@ const StarredMessages = () => {
       title="Starred Messages"
       iconName="star"
       noMessageInfo="No Starred Messages"
+      fetchedMessageList={starredMessages}
       shouldRender={shouldRender}
       viewType={viewType}
     />

packages/react/src/views/MessageAggregators/common/MessageAggregator.js

@@ -23,6 +23,7 @@ export const MessageAggregator = ({
   iconName,
   noMessageInfo,
   shouldRender,
+  fetchedMessageList,
   searchProps,
   searchFiltered,
   fetching,
@@ -40,7 +41,7 @@ export const MessageAggregator = ({
   );
   const [messageRendered, setMessageRendered] = useState(false);
   const { loading, messageList } = useSetMessageList(
-    searchFiltered || allMessages,
+    fetchedMessageList || searchFiltered || allMessages,
     shouldRender
   );
 
@@ -57,7 +58,7 @@ export const MessageAggregator = ({
 
   const isMessageNewDay = (current, previous) =>
     !previous ||
-    !shouldRender(previous) ||
+    shouldRender(previous) ||
     !isSameDay(new Date(current.ts), new Date(previous.ts));
 
   const noMessages = messageList?.length === 0 || !messageRendered;