Add current user object that holds user session values instead of standalone getters. Closes #2050

web/components/ui/Sidebar/Sidebar.tsx

@@ -5,26 +5,20 @@ import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { ChatContainer } from '../../chat/ChatContainer/ChatContainer';
 import styles from './Sidebar.module.scss';
 
-import {
-  chatDisplayNameAtom,
-  chatUserIdAtom,
-  isChatModeratorAtom,
-  visibleChatMessagesSelector,
-} from '../../stores/ClientConfigStore';
+import { currentUserAtom, visibleChatMessagesSelector } from '../../stores/ClientConfigStore';
 
 export const Sidebar: FC = () => {
-  const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
-  const chatUserId = useRecoilValue<string>(chatUserIdAtom);
-  const isChatModerator = useRecoilValue<boolean>(isChatModeratorAtom);
+  const currentUser = useRecoilValue(currentUserAtom);
   const messages = useRecoilValue<ChatMessage[]>(visibleChatMessagesSelector);
 
+  const { id, isModerator, displayName } = currentUser;
   return (
     <Sider className={styles.root} collapsedWidth={0} width={320}>
       <ChatContainer
         messages={messages}
-        usernameToHighlight={chatDisplayName}
-        chatUserId={chatUserId}
-        isModerator={isChatModerator}
+        usernameToHighlight={displayName}
+        chatUserId={id}
+        isModerator={isModerator}
       />
     </Sider>
   );