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
diff --git a/client/src/components/ConversationsOverviewCard.js b/client/src/components/ConversationsOverviewCard.js
index 01b2d7b..407ed94 100644
--- a/client/src/components/ConversationsOverviewCard.js
+++ b/client/src/components/ConversationsOverviewCard.js
@@ -28,7 +28,7 @@
setState({ loaded: true, conversations: Object.values(result).map(c => Conversation.from(accountId, c)) })
})
return () => controller.abort()
- }, [])
+ }, [accountId])
return (
<Card onClick={() => history.push(`/account/${accountId}`)} >
diff --git a/client/src/components/Message.js b/client/src/components/Message.js
index 2e1c086..f0aaba8 100644
--- a/client/src/components/Message.js
+++ b/client/src/components/Message.js
@@ -1,10 +1,11 @@
+import { Typography } from '@material-ui/core'
import React from 'react'
function Message(props) {
return (
<div className="message">
<div className="message-username">{props.username}</div>
- <div className="message-text">{props.text}</div>
+ <Typography className="message-text">{props.text}</Typography>
</div>
)
}
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index 1673a38..94947ca 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -5,7 +5,6 @@
export default function MessageList(props) {
const displayName = props.conversation.getDisplayName()
-
return (
<div className="message-list">
<Box>
@@ -19,7 +18,7 @@
</Box>
<Divider orientation="horizontal" />
{props.messages.map((message, index) =>
- <Message key={index} username={message.senderId} text={message.text} />
+ <Message key={index} username={message.senderId} text={message.body} />
)}
</div>
)
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index 48770ba..fb06d49 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -3,6 +3,7 @@
import { IconButton, InputBase, Paper, Popper } from '@material-ui/core'
import { Send, EmojiEmotionsRounded } from '@material-ui/icons'
import EmojiPicker from 'emoji-picker-react'
+import authManager from '../AuthManager'
const useStyles = makeStyles((theme) => ({
root: {
@@ -23,27 +24,23 @@
height: 28,
margin: 4,
},
-}));
+}))
export default function SendMessageForm(props) {
const classes = useStyles()
const [anchorEl, setAnchorEl] = React.useState(null)
const [currentMessage, setCurrentMessage] = React.useState("")
- const handleOpenEmojiPicker = e => {
- setAnchorEl(anchorEl ? null : e.currentTarget)
- }
- const handleClose = () => {
- setAnchorEl(null)
- }
+ const handleOpenEmojiPicker = e => setAnchorEl(anchorEl ? null : e.currentTarget)
+ const handleClose = () => setAnchorEl(null)
+
const handleSubmit = e => {
e.preventDefault()
+ props.onSend(currentMessage)
+ setCurrentMessage('')
}
- const handleInputChange = (event) => {
- setCurrentMessage(event.target.value);
- };
+ const handleInputChange = (event) => setCurrentMessage(event.target.value)
const onEmojiClick = (e, emojiObject) => {
- console.log(emojiObject.emoji)
setCurrentMessage(currentMessage + emojiObject.emoji)
handleClose()
}
diff --git a/client/src/index.scss b/client/src/index.scss
index 9ddcfc8..970825f 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -1,7 +1,7 @@
:root {
--main-color: #1F1F1F;
--secondary-color: white;
- --third-color: #2F2F2F;
+ --third-color: #8b8b8b;
--main-text-color: #3e5869;
--secondary-text-color: #b0c7d6;
--send-message-form: #F5F5F5;
@@ -190,8 +190,8 @@
background: var(--third-color);
color: var(--secondary-color);
display: inline;
- padding: 4px 8px;
- border-radius: 8px;
+ padding: 8px 16px;
+ border-radius: 16px;
}
.send-message-card {
diff --git a/client/src/pages/accountSettings.jsx b/client/src/pages/accountSettings.jsx
index 79ab388..c685a3b 100644
--- a/client/src/pages/accountSettings.jsx
+++ b/client/src/pages/accountSettings.jsx
@@ -19,7 +19,7 @@
setState({loaded: true, account: Account.from(result)})
})
return () => controller.abort()
- }, [])
+ }, [accountId])
return (
<Container maxWidth="sm">