[PAY-1595] Hide chat textinput until chat exists (#3746)

AudiusProject · Jul 14, 2023 · bb67f44 · bb67f44
1 parent a11cbf1
commit bb67f44
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/packages/mobile/src/screens/chat-screen/ChatScreen.tsx b/packages/mobile/src/screens/chat-screen/ChatScreen.tsx
@@ -676,7 +676,7 @@ export const ChatScreen = () => {
               </View>
             )}
 
-            {canSendMessage ? (
+            {canSendMessage && chat ? (
               <View
                 style={styles.composeView}
                 onLayout={measureChatContainerBottom}

diff --git a/packages/web/src/pages/chat-page/ChatPage.tsx b/packages/web/src/pages/chat-page/ChatPage.tsx
@@ -1,13 +1,19 @@
 import { useCallback, useEffect, useRef } from 'react'
 
-import { chatActions, FeatureFlags, useCanSendMessage } from '@audius/common'
+import {
+  chatActions,
+  FeatureFlags,
+  useCanSendMessage,
+  chatSelectors
+} from '@audius/common'
 import { ResizeObserver } from '@juggle/resize-observer'
 import { push as pushRoute } from 'connected-react-router'
 import { useDispatch } from 'react-redux'
 import useMeasure from 'react-use-measure'
 
 import Page from 'components/page/Page'
 import { useFlag } from 'hooks/useRemoteConfig'
+import { useSelector } from 'utils/reducer'
 import { chatPage } from 'utils/route'
 
 import styles from './ChatPage.module.css'
@@ -18,6 +24,7 @@ import { ChatMessageList } from './components/ChatMessageList'
 import { CreateChatPrompt } from './components/CreateChatPrompt'
 
 const { fetchPermissions } = chatActions
+const { getChat } = chatSelectors
 
 const messages = {
   messages: 'Messages'
@@ -27,6 +34,7 @@ export const ChatPage = ({ currentChatId }: { currentChatId?: string }) => {
   const dispatch = useDispatch()
   const { isEnabled: isChatEnabled } = useFlag(FeatureFlags.CHAT_ENABLED)
   const { firstOtherUser, canSendMessage } = useCanSendMessage(currentChatId)
+  const chat = useSelector((state) => getChat(state, currentChatId ?? ''))
 
   // Get the height of the header so we can slide the messages list underneath it for the blur effect
   const [headerRef, headerBounds] = useMeasure({
@@ -101,7 +109,7 @@ export const ChatPage = ({ currentChatId }: { currentChatId?: string }) => {
                 className={styles.messageList}
                 chatId={currentChatId}
               />
-              {canSendMessage ? (
+              {canSendMessage && chat ? (
                 <ChatComposer
                   chatId={currentChatId}
                   onMessageSent={handleMessageSent}

diff --git a/packages/web/src/pages/chat-page/components/ChatMessageList.module.css b/packages/web/src/pages/chat-page/components/ChatMessageList.module.css
@@ -6,8 +6,10 @@
 .listRoot {
   display: flex;
   flex-direction: column-reverse;
+  justify-content: flex-end;
   gap: 8px;
   padding: 32px;
+  height: 100%;
 }
 
 .separator {