send messages with React Query
Change-Id: I408d1dcd6588d8dfb215b1045494244c7c666fe3
diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index 964d5bf..bf459ea 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -1,47 +1,51 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
import MessageList from './MessageList';
import SendMessageForm from './SendMessageForm';
-import authManager from '../AuthManager'
import Conversation from '../../../model/Conversation';
import LoadingPage from './loading';
import io from "socket.io-client";
import { Box, Stack, Typography } from '@mui/material';
import ConversationAvatar from './ConversationAvatar';
-import { useConversationQuery, useMessagesQuery } from '../services/conversation';
+import { useConversationQuery, useMessagesQuery, useSendMessageMutation } from '../services/conversation';
const ConversationView = props => {
- const [loadingMessages, setLoadingMessages] = useState(false)
const [socket, setSocket] = useState()
const [conversation, setConversation] = useState()
const [messages, setMessages] = useState([])
- const [loaded, setLoaded] = useState(true)
+ const [isLoading, setIsLoading] = useState(true)
const [error, setError] = useState(false)
const conversationQuery = useConversationQuery(props.accountId, props.conversationId)
const messagesQuery = useMessagesQuery(props.accountId, props.conversationId)
+ const sendMessageMutation = useSendMessageMutation(props.accountId, props.conversationId)
useEffect(() => {
- if (conversationQuery.data) {
+ if (conversationQuery.isSuccess) {
const conversation = Conversation.from(props.accountId, conversationQuery.data)
setConversation(conversation)
}
}, [conversationQuery.data])
useEffect(() => {
- if (messagesQuery.data) {
+ if (messagesQuery.isSuccess) {
const sortedMessages = sortMessages(messagesQuery.data)
setMessages(sortedMessages)
}
}, [messagesQuery.data])
useEffect(() => {
- setLoaded(!(conversationQuery.isLoading || messagesQuery.isLoading))
+ setIsLoading(conversationQuery.isLoading || messagesQuery.isLoading)
}, [conversationQuery.isLoading, messagesQuery.isLoading])
useEffect(() => {
setError(conversationQuery.isError || messagesQuery.isError)
}, [conversationQuery.isError, messagesQuery.isError])
+ const sendMessage = useCallback(
+ (message) => sendMessageMutation.mutate(message),
+ [sendMessageMutation]
+ )
+
useEffect(() => {
console.log("io.connect")
const socket = io()
@@ -67,18 +71,7 @@
})
}, [conversation ? props.conversationId : "", socket])
- const sendMessage = (message) => {
- authManager.fetch(`/api/accounts/${props.accountId}/conversations/${props.conversationId}`, {
- headers: {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json'
- },
- method:"POST",
- body: JSON.stringify({ message })
- })
- }
-
- if (!loaded) {
+ if (isLoading) {
return <LoadingPage />
} else if (error) {
return <div>Error loading {props.conversationId}</div>
@@ -100,9 +93,6 @@
</Stack>
<Stack flexGrow={1} overflow="auto" direction="column-reverse">
<MessageList
- conversationId={props.conversationId}
- loading={loadingMessages}
- loadMore={() => setLoadingMessages(true)}
messages={messages}
/>
</Stack>