Refactor/zustand slices chat store

packages/markups/src/mentions/UserMention.js

@@ -1,16 +1,17 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Box, Tooltip } from '@embeddedchat/ui-elements';
-import { useUserStore } from '@embeddedchat/react/src/store';
-import useSetExclusiveState from '@embeddedchat/react/src/hooks/useSetExclusiveState';
+import { useChatLayoutStore, useUserStore } from '@embeddedchat/react/src/store';
 import RCContext from '@embeddedchat/react/src/context/RCInstance';
 import { MarkupInteractionContext } from '../MarkupInteractionContext';
 import useMentionStyles from '../elements/elements.styles';
 
 const UserMention = ({ contents }) => {
   const { members, username } = useContext(MarkupInteractionContext);
   const { RCInstance } = useContext(RCContext);
-  const setExclusiveState = useSetExclusiveState();
+  const openExclusivePanel = useChatLayoutStore(
+    (state) => state.openExclusivePanel
+  );
   const { setShowCurrentUserInfo, setCurrentUser } = useUserStore((state) => ({
     setShowCurrentUserInfo: state.setShowCurrentUserInfo,
     setCurrentUser: state.setCurrentUser,
@@ -23,7 +24,8 @@ const UserMention = ({ contents }) => {
       username: data.user.username,
       name: data.user.name,
     });
-    setExclusiveState(setShowCurrentUserInfo);
+    setShowCurrentUserInfo(true);
+    openExclusivePanel('showCurrentUserInfo');
   };
 
   const hasMember = (user) => {

packages/react/src/hooks/useFetchChatData.js

@@ -5,7 +5,7 @@ import {
   useChannelStore,
   useMemberStore,
   useMessageStore,
-  useStarredMessageStore,
+  useChatDataStore,
 } from '../store';
 
 const useFetchChatData = (showRoles) => {
@@ -16,9 +16,7 @@ const useFetchChatData = (showRoles) => {
   const setMessagesOffset = useMessageStore((state) => state.setMessagesOffset);
   const setAdmins = useMemberStore((state) => state.setAdmins);
   const permissionsRef = useRef(null);
-  const setStarredMessages = useStarredMessageStore(
-    (state) => state.setStarredMessages
-  );
+  const setStarredMessages = useChatDataStore((state) => state.setStarredMessages);
   const isUserAuthenticated = useUserStore(
     (state) => state.isUserAuthenticated
   );

packages/react/src/hooks/useRCAuth.js

@@ -1,15 +1,13 @@
 import { useContext } from 'react';
 import { useToastBarDispatch } from '@embeddedchat/ui-elements';
 import RCContext from '../context/RCInstance';
-import { useUserStore, totpModalStore, useLoginStore } from '../store';
+import { useAuthStore, useUserStore } from '../store';
 
 export const useRCAuth = () => {
   const { RCInstance } = useContext(RCContext);
-  const setIsTotpModalOpen = totpModalStore(
-    (state) => state.setIsTotpModalOpen
-  );
+  const setIsTotpModalOpen = useAuthStore((state) => state.setIsTotpModalOpen);
   const setUserAvatarUrl = useUserStore((state) => state.setUserAvatarUrl);
-  const setIsLoginModalOpen = useLoginStore(
+  const setIsLoginModalOpen = useAuthStore(
     (state) => state.setIsLoginModalOpen
   );
   const setAuthenticatedUserUsername = useUserStore(

packages/react/src/store/authStore.js

@@ -0,0 +1,55 @@
+import { create } from 'zustand';
+
+const useAuthStore = create((set) => ({
+  userId: '',
+  setUserId: (userId) => set({ userId }),
+
+  name: '',
+  setName: (name) => set({ name }),
+
+  username: '',
+  setUsername: (username) => set({ username }),
+
+  avatarUrl: '',
+  setUserAvatarUrl: (avatarUrl) => set({ avatarUrl }),
+
+  isUserAuthenticated: false,
+  setIsUserAuthenticated: (isUserAuthenticated) => set({ isUserAuthenticated }),
+
+  canSendMsg: true,
+  setCanSendMsg: (canSendMsg) => set({ canSendMsg }),
+
+  password: null,
+  setPassword: (password) => set({ password }),
+
+  emailoruser: null,
+  setEmailorUser: (emailoruser) => set({ emailoruser }),
+
+  roles: [],
+  setRoles: (roles) => set({ roles }),
+
+  userPinPermissions: {},
+  setUserPinPermissions: (userPinPermissions) => set({ userPinPermissions }),
+
+  viewUserInfoPermissions: {},
+  setViewUserInfoPermissions: (viewUserInfoPermissions) =>
+    set({ viewUserInfoPermissions }),
+
+  showCurrentUserInfo: false,
+  setShowCurrentUserInfo: (showCurrentUserInfo) => set({ showCurrentUserInfo }),
+
+  currentUser: {},
+  setCurrentUser: (currentUser) => set({ currentUser }),
+
+  isLoginIn: false,
+  setIsLoginIn: (isLoginIn) => set({ isLoginIn }),
+
+  isLoginModalOpen: false,
+  setIsLoginModalOpen: (isLoginModalOpen) => set({ isLoginModalOpen }),
+
+  isTotpModalOpen: false,
+  setIsTotpModalOpen: (isTotpModalOpen) => set({ isTotpModalOpen }),
+}));
+
+export default useAuthStore;
+

packages/react/src/store/chatDataStore.js

@@ -0,0 +1,9 @@
+import { create } from 'zustand';
+
+const useChatDataStore = create((set) => ({
+  starredMessages: [],
+  setStarredMessages: (messages) => set({ starredMessages: messages || [] }),
+}));
+
+export default useChatDataStore;
+

packages/react/src/store/chatLayoutStore.js

@@ -0,0 +1,50 @@
+import { create } from 'zustand';
+
+const initialPanelsState = {
+  showMembers: false,
+  showSearch: false,
+  showPinned: false,
+  showStarred: false,
+  showAllThreads: false,
+  showAllFiles: false,
+  showMentions: false,
+  showCurrentUserInfo: false,
+  showChannelinfo: false,
+};
+
+const useChatLayoutStore = create((set, get) => ({
+  showSidebar: false,
+  setShowSidebar: (showSidebar) => set({ showSidebar }),
+
+  ...initialPanelsState,
+
+  setPanelState: (panelKey, isOpen) => {
+    if (!(panelKey in initialPanelsState)) return;
+    set({ [panelKey]: Boolean(isOpen) });
+  },
+
+  closeAllPanels: () => set({ ...initialPanelsState, showSidebar: false }),
+
+  openExclusivePanel: (panelKey) => {
+    if (!panelKey) {
+      return set({ ...initialPanelsState, showSidebar: false });
+    }
+    if (!(panelKey in initialPanelsState)) return;
+
+    const nextPanels = Object.keys(initialPanelsState).reduce((acc, key) => {
+      acc[key] = key === panelKey;
+      return acc;
+    }, {});
+
+    set({ ...nextPanels, showSidebar: true });
+  },
+
+  getOpenPanelKey: () => {
+    const state = get();
+    const openKey = Object.keys(initialPanelsState).find((key) => state[key]);
+    return openKey || null;
+  },
+}));
+
+export default useChatLayoutStore;
+

packages/react/src/store/index.js

@@ -1,13 +1,7 @@
 export { default as useMessageStore } from './messageStore';
 export { default as useUserStore } from './userStore';
 export { default as useMemberStore } from './memberStore';
-export { default as totpModalStore } from './totpmodalStore';
-export { default as useSearchMessageStore } from './searchMessageStore';
-export { default as useLoginStore } from './loginStore';
 export { default as useChannelStore } from './channelStore';
-export { default as useThreadsMessageStore } from './threadsMessageStore';
-export { default as useFileStore } from './fileStore';
-export { default as useMentionsStore } from './mentionsStore';
-export { default as usePinnedMessageStore } from './pinnedMessageStore';
-export { default as useStarredMessageStore } from './starredMessageStore';
-export { default as useSidebarStore } from './sidebarStore';
+export { default as useChatLayoutStore } from './chatLayoutStore';
+export { default as useChatDataStore } from './chatDataStore';
+export { default as useAuthStore } from './authStore';

packages/react/src/views/ChatBody/ChatBody.js

@@ -21,7 +21,7 @@ import {
   useMessageStore,
   useUserStore,
   useChannelStore,
-  useLoginStore,
+  useAuthStore,
 } from '../../store';
 import MessageList from '../MessageList';
 import TotpModal from '../TotpModal/TwoFactorTotpModal';
@@ -66,7 +66,7 @@ const ChatBody = ({
   const removeMessage = useMessageStore((state) => state.removeMessage);
   const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate);
   const channelInfo = useChannelStore((state) => state.channelInfo);
-  const isLoginIn = useLoginStore((state) => state.isLoginIn);
+  const isLoginIn = useAuthStore((state) => state.isLoginIn);
   const setMessages = useMessageStore((state) => state.setMessages);
 
   const [isThreadOpen, threadMainMessage] = useMessageStore((state) => [