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>
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index f6da60c..5ea46b5 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,5 +1,5 @@
import dayjs from "dayjs"
-import React, { useEffect, useMemo } from 'react'
+import React, { useMemo } from 'react'
import dayOfYear from 'dayjs/plugin/dayOfYear'
import isBetween from 'dayjs/plugin/isBetween'
import { Stack } from "@mui/system"
@@ -14,11 +14,6 @@
[props.messages]
)
- useEffect(() => {
- if (!props.loading)
- props.loadMore()
- }, [props.conversationId])
-
return (
<Stack
marginLeft="16px"
diff --git a/client/src/services/conversation.js b/client/src/services/conversation.js
index f6b0f49..4a68077 100644
--- a/client/src/services/conversation.js
+++ b/client/src/services/conversation.js
@@ -21,6 +21,18 @@
)
}
+export const useSendMessageMutation = (accountId, conversationId) => {
+ const queryClient = useQueryClient();
+ return useMutation(
+ (message) => (
+ axios.post(`/api/accounts/${accountId}/conversations/${conversationId}`, {message})
+ ),
+ {
+ "onSuccess": () => queryClient.invalidateQueries(["messages", accountId, conversationId]),
+ }
+ )
+}
+
const fetchConversation = (accountId, conversationId) => (
axios
.get(`/api/accounts/${accountId}/conversations/${conversationId}`)