feat: realtime sidebars (#557)

* pinned messages realtime * added realtime in starred messages * added realtine in usermentions * changed var name * added missing dependency auth * used some instead of find
RocketChat · Apr 12, 2024 · 789dea9 · 789dea9
1 parent e37e469
commit 789dea9
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 36 deletions.
diff --git a/packages/react/src/components/PinnedMessages/PinnedMessages.js b/packages/react/src/components/PinnedMessages/PinnedMessages.js
@@ -1,7 +1,6 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { isSameDay, format } from 'date-fns';
-import RCContext from '../../context/RCInstance';
-import { usePinnedMessageStore } from '../../store';
+import { usePinnedMessageStore, useMessageStore } from '../../store';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
 import { MessageDivider } from '../Message/MessageDivider';
@@ -10,20 +9,19 @@ import { Throbber } from '../Throbber';
 import Sidebar from '../Sidebar/Sidebar';
 
 const PinnedMessages = () => {
-  const { RCInstance } = useContext(RCContext);
   const setShowPinned = usePinnedMessageStore((state) => state.setShowPinned);
-
-  const [messageList, setMessageList] = useState([]);
+  const messages = useMessageStore((state) => state.messages);
   const [loading, setLoading] = useState(true);
+  const [messageList, setMessageList] = useState([]);
 
   useEffect(() => {
-    const getPinnedMessages = async () => {
-      const { messages } = await RCInstance.getPinnedMessages();
-      setMessageList(messages);
-      setLoading(false);
-    };
-    getPinnedMessages();
-  }, [RCInstance, setMessageList, setLoading]);
+    setLoading(true);
+    const filtered = messages.filter(
+      (message) => 'pinned' in message && message.pinned === true
+    );
+    setMessageList(filtered);
+    setLoading(false);
+  }, [messages]);
 
   const isMessageNewDay = (current, previous) =>
     !previous || !isSameDay(new Date(current.ts), new Date(previous.ts));

diff --git a/packages/react/src/components/StarredMessages/StarredMessages.js b/packages/react/src/components/StarredMessages/StarredMessages.js
@@ -1,7 +1,10 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { isSameDay, format } from 'date-fns';
-import RCContext from '../../context/RCInstance';
-import { useStarredMessageStore } from '../../store';
+import {
+  useStarredMessageStore,
+  useMessageStore,
+  useUserStore,
+} from '../../store';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
 import { MessageDivider } from '../Message/MessageDivider';
@@ -10,22 +13,24 @@ import { Throbber } from '../Throbber';
 import Sidebar from '../Sidebar/Sidebar';
 
 const StarredMessages = () => {
-  const { RCInstance } = useContext(RCContext);
   const setShowStarred = useStarredMessageStore(
     (state) => state.setShowStarred
   );
-
+  const authenticatedUserId = useUserStore((state) => state.userId);
+  const messages = useMessageStore((state) => state.messages);
   const [messageList, setMessageList] = useState([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const getStarredMessages = async () => {
-      const { messages } = await RCInstance.getStarredMessages();
-      setMessageList(messages);
-      setLoading(false);
-    };
-    getStarredMessages();
-  }, [RCInstance, setMessageList, setLoading]);
+    setLoading(true);
+    const filtered = messages.filter(
+      (message) =>
+        'starred' in message &&
+        message.starred.some((msg) => msg._id === authenticatedUserId)
+    );
+    setMessageList(filtered);
+    setLoading(false);
+  }, [authenticatedUserId, messages]);
 
   const isMessageNewDay = (current, previous) =>
     !previous || !isSameDay(new Date(current.ts), new Date(previous.ts));

diff --git a/packages/react/src/components/UserMentions/UserMentions.js b/packages/react/src/components/UserMentions/UserMentions.js
@@ -7,7 +7,6 @@ import { Attachments } from '../Attachments';
 import { useMessageStore, useUserStore, useMentionsStore } from '../../store';
 import { MessageBody } from '../Message/MessageBody';
 import { MessageMetrics } from '../Message/MessageMetrics';
-import { useRCContext } from '../../context/RCInstance';
 import { Markdown } from '../Markdown';
 import { MessageDivider } from '../Message/MessageDivider';
 import MessageAvatarContainer from '../Message/MessageAvatarContainer';
@@ -37,7 +36,8 @@ const MessageCss = css`
 const UserMentions = () => {
   const showAvatar = useUserStore((state) => state.showAvatar);
   const setShowMentions = useMentionsStore((state) => state.setShowMentions);
-  const { RCInstance } = useRCContext();
+  const messages = useMessageStore((state) => state.messages);
+  const authenticatedUserId = useUserStore((state) => state.userId);
   const [mentionedMessages, setMentionedMessages] = useState([]);
   const [isLoaded, setIsLoaded] = useState(false);
 
@@ -54,15 +54,15 @@ const UserMentions = () => {
     !previous || !isSameDay(new Date(current.ts), new Date(previous.ts));
 
   useEffect(() => {
-    const fetchMentionedMsgs = async () => {
-      const response = await RCInstance.getMentionedMessages();
-      if (response && response.messages) {
-        setMentionedMessages(response.messages);
-        setIsLoaded(true);
-      }
-    };
-    fetchMentionedMsgs();
-  }, [RCInstance, setMentionedMessages]);
+    setIsLoaded(false);
+    const filtered = messages.filter(
+      (message) =>
+        'mentions' in message &&
+        message.mentions.some((msg) => msg._id === authenticatedUserId)
+    );
+    setMentionedMessages(filtered);
+    setIsLoaded(true);
+  }, [authenticatedUserId, messages]);
 
   return (
     <Sidebar title="Mentions" iconName="at" setShowWindow={setShowMentions}>