[Fix] Channel Members' Roles fetching from ChannelStore instead of Us…

…erStore (#518) * useChannelStore for channel member roles * fixed review changes
RocketChat · Apr 9, 2024 · ac9e900 · ac9e900
1 parent f31b805
commit ac9e900
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/packages/react-native/src/views/ChatRoomView/ChatRoomView.js b/packages/react-native/src/views/ChatRoomView/ChatRoomView.js
@@ -4,7 +4,7 @@ import { ChatInput } from '../../components/ChatInput';
 import { MessageActionsSheet } from '../../components/MessageActionsSheet';
 import { MessageList } from '../../components/MessageList';
 import { useRCContext } from '../../contexts/RCInstance';
-import { useMessageStore, useUserStore } from '../../store';
+import { useMessageStore, useMemberStore, useUserStore } from '../../store';
 
 const styles = StyleSheet.create({
 	container: {
@@ -16,7 +16,7 @@ const ChatRoomView = () => {
 	const { RCInstance, ECOptions } = useRCContext();
 
 	const isUserAuthenticated = useUserStore((state) => state.isUserAuthenticated);
-	const setRoles = useUserStore((state) => state.setRoles);
+	const setMemberRoles = useMemberStore((state) => state.setMemberRoles);
 
 	const setMessages = useMessageStore((state) => state.setMessages);
 	const upsertMessage = useMessageStore((state) => state.upsertMessage);
@@ -56,7 +56,7 @@ const ChatRoomView = () => {
 							Object.assign(obj, { [item.u.username]: item }),
 						{}
 					);
-					setRoles(rolesObj);
+					setMemberRoles(rolesObj);
 				}
 			} catch (e) {
 				console.error(e);
@@ -117,4 +117,4 @@ const ChatRoomView = () => {
 	)
 }
 
-export default ChatRoomView;
+export default ChatRoomView;
diff --git a/packages/react/src/components/EmbeddedChat.js b/packages/react/src/components/EmbeddedChat.js
@@ -116,6 +116,7 @@ const EmbeddedChat = ({
   );
   const setAuthenticatedUserId = useUserStore((state) => state.setUserId);
   const setAuthenticatedName = useUserStore((state) => state.setName);
+  const setAuthenticatedUserRoles = useUserStore((state) => state.setRoles);
 
   useEffect(() => {
     RCInstance.auth.onAuthChange((user) => {
@@ -130,6 +131,7 @@ const EmbeddedChat = ({
             setAuthenticatedUserUsername(me.username);
             setAuthenticatedUserId(me._id);
             setAuthenticatedName(me.name);
+            setAuthenticatedUserRoles(me.roles);
             setIsUserAuthenticated(true);
           })
           .catch(console.error);
@@ -143,6 +145,7 @@ const EmbeddedChat = ({
     setAuthenticatedUserAvatarUrl,
     setAuthenticatedUserId,
     setAuthenticatedUserUsername,
+    setAuthenticatedUserRoles,
     setIsUserAuthenticated,
   ]);
 

diff --git a/packages/react/src/hooks/useFetchChatData.js b/packages/react/src/hooks/useFetchChatData.js
@@ -1,10 +1,15 @@
 import { useCallback, useContext } from 'react';
 import RCContext from '../context/RCInstance';
-import { useUserStore, useChannelStore, useMessageStore } from '../store';
+import {
+  useUserStore,
+  useChannelStore,
+  useMemberStore,
+  useMessageStore,
+} from '../store';
 
 const useFetchChatData = (showRoles) => {
   const { RCInstance, ECOptions } = useContext(RCContext);
-  const setRoles = useUserStore((state) => state.setRoles);
+  const setMemberRoles = useMemberStore((state) => state.setMemberRoles);
   const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate);
   const setMessages = useMessageStore((state) => state.setMessages);
   const isUserAuthenticated = useUserStore(
@@ -53,7 +58,7 @@ const useFetchChatData = (showRoles) => {
                 )
               : {};
 
-          setRoles(rolesObj);
+          setMemberRoles(rolesObj);
         }
       } catch (e) {
         console.error(e);
@@ -65,7 +70,7 @@ const useFetchChatData = (showRoles) => {
       ECOptions?.enableThreads,
       showRoles,
       setMessages,
-      setRoles,
+      setMemberRoles,
       isChannelPrivate,
     ]
   );

diff --git a/packages/react/src/store/memberStore.js b/packages/react/src/store/memberStore.js
@@ -3,6 +3,8 @@ import { create } from 'zustand';
 const useMemberStore = create((set) => ({
   members: [],
   showMembers: false,
+  memberRoles: {},
+  setMemberRoles: (memberRoles) => set((state) => ({ ...state, memberRoles })),
   toggleShowMembers: () =>
     set((state) => ({ showMembers: !state.showMembers })),
   setMembersHandler: (memberList) => set(() => ({ members: memberList })),