conversation: load and send messages
Change-Id: Ia18404ac20239d395af7b0ec871973a9b380ae69
diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index e818ba0..719d3d0 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -1,85 +1,59 @@
import CircularProgress from '@material-ui/core/CircularProgress';
-import React from 'react';
+import React, { 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';
-class ConversationView extends React.Component {
- constructor(props) {
- super(props)
- this.state = {
- loaded:false,
- error: false,
- messages:[]
- }
- }
+const ConversationView = props => {
+ const [state, setState] = useState({
+ loaded:false,
+ error: false,
+ conversation: undefined
+ })
- componentDidMount() {
- this.controller = new AbortController()
- if (!this.state.loaded) {
- authManager.fetch(`/api/accounts/${this.props.accountId}/conversations/${this.props.conversationId}`, {signal: this.controller.signal})
- .then(res => res.json())
- .then(result => {
- console.log(result)
- this.setState({
- loaded: true,
- conversation: Conversation.from(this.props.accountId, result)// result.map(account => Account.from(account)),
- })
- }, error => {
- console.log(`get error ${error}`)
- this.setState({
- loaded: true,
- error: true
- })
- })
- }
- }
- componentDidUpdate(prevProps, prevState) {
- console.log("componentDidUpdate " + this.props.conversationId)
- if (this.props.conversationId !== prevProps.conversationId) {
- if (this.state.loaded === true) {
- this.setState({
- loaded:false,
- error: false,
- messages:[]
- })
- }
- this.controller = new AbortController()
- authManager.fetch(`/api/accounts/${this.props.accountId}/conversations/${this.props.conversationId}`, {signal: this.controller.signal})
- .then(res => res.json())
- .then(result => {
- console.log(result)
- this.setState({
- loaded: true,
- conversation: Conversation.from(this.props.accountId, result)// result.map(account => Account.from(account)),
- })
- }, error => {
- console.log(`get error ${error}`)
- this.setState({
- loaded: true,
- error: true
- })
- })
- }
- }
- componentWillUnmount() {
- this.controller.abort()
- }
+ useEffect(() => {
+ const controller = new AbortController()
+ authManager.fetch(`/api/accounts/${props.accountId}/conversations/${props.conversationId}`, {signal: controller.signal})
+ .then(res => res.json())
+ .then(result => {
+ console.log(result)
+ setState({
+ loaded: true,
+ conversation: Conversation.from(props.accountId, result)// result.map(account => Account.from(account)),
+ })
+ }, error => {
+ console.log(`get error ${error}`)
+ setState({
+ loaded: true,
+ error: true
+ })
+ })
+ return () => controller.abort()
+ }, [props.accountId, props.conversationId])
- render() {
- if (this.state.loaded === false) {
- return <LoadingPage />
- } else if (this.state.error === true) {
- return <div>Error loding {this.props.conversationId}</div>
- } else {
- return <React.Fragment>
- <MessageList conversation={this.state.conversation} messages={this.state.messages} />
- <SendMessageForm sendMessage={this.sendMessage} />
- </React.Fragment>
- }
- }
+ 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 (state.loaded === false) {
+ return <LoadingPage />
+ } else if (state.error === true) {
+ return <div>Error loding {props.conversationId}</div>
+ } else {
+ return <React.Fragment>
+ <MessageList conversation={state.conversation} messages={state.conversation.getMessages()} />
+ <SendMessageForm onSend={sendMessage} />
+ </React.Fragment>
+ }
}
export default ConversationView
\ No newline at end of file