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

web/components/ui/Content/Content.tsx

@@ -8,8 +8,7 @@ import { LOCAL_STORAGE_KEYS, getLocalStorage, setLocalStorage } from '../../../u
 import {
   clientConfigStateAtom,
   chatMessagesAtom,
-  chatDisplayNameAtom,
-  chatUserIdAtom,
+  currentUserAtom,
   isChatAvailableSelector,
   isChatVisibleSelector,
   appStateAtom,
@@ -134,12 +133,12 @@ export const Content: FC = () => {
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
   const isChatVisible = useRecoilValue<boolean>(isChatVisibleSelector);
   const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
+  const currentUser = useRecoilValue(currentUserAtom);
 
   const [isMobile, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
   const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
   const online = useRecoilValue<boolean>(isOnlineSelector);
-  const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
-  const chatUserId = useRecoilValue<string>(chatUserIdAtom);
+
   const { viewerCount, lastConnectTime, lastDisconnectTime, streamTitle } =
     useRecoilValue<ServerStatus>(serverStatusState);
   const {
@@ -200,6 +199,11 @@ export const Content: FC = () => {
     window.addEventListener('resize', checkIfMobile);
   }, []);
 
+  if (!currentUser) {
+    return null;
+  }
+
+  const { id: currentUserId, displayName } = currentUser;
   const showChat = !chatDisabled && isChatAvailable && isChatVisible;
 
   return (
@@ -261,8 +265,8 @@ export const Content: FC = () => {
                 socialHandles={socialHandles}
                 extraPageContent={extraPageContent}
                 messages={messages}
-                chatDisplayName={chatDisplayName}
-                chatUserId={chatUserId}
+                chatDisplayName={displayName}
+                chatUserId={currentUserId}
                 showChat={showChat}
               />
             ) : (

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