status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: sending messages

This commit is contained in:
Pavel Prichodko 2022-06-15 16:17:04 +02:00
parent 6b770b1f26
commit b4d5cbb9cd
No known key found for this signature in database
GPG Key ID: 8E4C82D464215E83
1 changed files with 19 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/status-react/src/routes/chat/index.tsx
View File

@ -6,10 +6,8 @@ import { useMatch } from 'react-router-dom'
import { MemberSidebar } from '~/src/components/member-sidebar' import { MemberSidebar } from '~/src/components/member-sidebar'
import { useAppState } from '~/src/contexts/app-context' import { useAppState } from '~/src/contexts/app-context'
import { ChatProvider } from '~/src/contexts/chat-context' import { ChatProvider, useChatContext } from '~/src/contexts/chat-context'
import { useChat } from '~/src/protocol' import { useChat, useMessages, useProtocol } from '~/src/protocol'
import { useProtocol } from '~/src/protocol/provider'
import { useMessages } from '~/src/protocol/use-messages'
import { styled } from '~/src/styles/config' import { styled } from '~/src/styles/config'
import { Avatar, Flex, Heading, Text } from '~/src/system' import { Avatar, Flex, Heading, Text } from '~/src/system'
@ -37,25 +35,29 @@ const ChatStart = (props: ChatStartProps) => {
) )
} }
interface ContentProps { const Body = () => {
chatId: string const { client } = useProtocol()
} const { state } = useChatContext()
const Content = (props: ContentProps) => { const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion
const { chatId } = props const chatId = params.id!
const chat = client.community.getChat(chatId)
const messages = useMessages(chatId)
const contentRef = useRef<HTMLDivElement>(null) const contentRef = useRef<HTMLDivElement>(null)
useEffect(() => { useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
contentRef.current!.scrollTop = contentRef.current!.scrollHeight ?? 0 contentRef.current!.scrollTop = contentRef.current!.scrollHeight ?? 0
}, [chatId]) }, [chatId, messages.data.length])
const messages = useMessages(chatId) const handleMessageSubmit = (message: string) => {
chat.sendTextMessage(message, state.message?.messageId)
}
return ( return (
<>
<ContentWrapper ref={contentRef}> <ContentWrapper ref={contentRef}>
{/* <Button onClick={messages.fetchMore}>Fetch more</Button> */}
<ChatStart chatId={chatId} /> <ChatStart chatId={chatId} />
{messages.data.map((message, index) => ( {messages.data.map((message, index) => (
<ChatMessage <ChatMessage
@ -63,38 +65,22 @@ const Content = (props: ContentProps) => {
message={message} message={message}
previousMessage={messages.data[index - 1]} previousMessage={messages.data[index - 1]}
/> />
))}
</ContentWrapper> </ContentWrapper>
) )
} }
export const Chat = () => { export const Chat = () => {
const { client } = useProtocol()
const { state, options } = useAppState() const { state, options } = useAppState()
const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion
const chatId = params.id!
const chat = useChat(chatId)
// TODO: Update condition based on a chat type
const enableMembers = options.enableMembers ?? false // && (chat.type === 'group' || chat.type === 'channel') const enableMembers = options.enableMembers ?? false // && (chat.type === 'group' || chat.type === 'channel')
const showMembers = enableMembers && state.showMembers const showMembers = enableMembers && state.showMembers
const handleMessageSubmit = (message: string) => {
client.community.chats.get(chatId).sendTextMessage(
message
// '0x0fa999097568d1fdcc39108a08d75340bd2cee5ec59c36799007150d0a9fc896'
)
}
return ( return (
<ChatProvider> <ChatProvider>
<Wrapper> <Wrapper>
<Main> <Main>
<Navbar enableMembers={enableMembers} /> <Navbar enableMembers={enableMembers} />
<Content chatId={chatId} /> <Body />
<ChatInput onSubmit={handleMessageSubmit} />
</Main> </Main>
{showMembers && <MemberSidebar />} {showMembers && <MemberSidebar />}
</Wrapper> </Wrapper>