Skip to content

Commit

Permalink
[PAY-1595] Hide chat textinput until chat exists (#3746)
Browse files Browse the repository at this point in the history
  • Loading branch information
dharit-tan committed Jul 14, 2023
1 parent 98cc97d commit 79b2536
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -676,7 +676,7 @@ export const ChatScreen = () => {
</View>
)}

{canSendMessage ? (
{canSendMessage && chat ? (
<View
style={styles.composeView}
onLayout={measureChatContainerBottom}
Expand Down
12 changes: 10 additions & 2 deletions apps/audius-client/packages/web/src/pages/chat-page/ChatPage.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -18,6 +24,7 @@ import { ChatMessageList } from './components/ChatMessageList'
import { CreateChatPrompt } from './components/CreateChatPrompt'

const { fetchPermissions } = chatActions
const { getChat } = chatSelectors

const messages = {
messages: 'Messages'
Expand All @@ -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({
Expand Down Expand Up @@ -101,7 +109,7 @@ export const ChatPage = ({ currentChatId }: { currentChatId?: string }) => {
className={styles.messageList}
chatId={currentChatId}
/>
{canSendMessage ? (
{canSendMessage && chat ? (
<ChatComposer
chatId={currentChatId}
onMessageSent={handleMessageSent}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@
.listRoot {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
gap: 8px;
padding: 32px;
height: 100%;
}

.separator {
Expand Down

0 comments on commit 79b2536

Please sign in to comment.