improve conversation view
Change-Id: I63189d0b61d45e659ac7618a977282f7b4500753
diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index a91a04e..f5e5104 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -4,18 +4,23 @@
import MessageList from '../components/MessageList'
import SendMessageForm from '../components/SendMessageForm'
import NewContactForm from '../components/NewContactForm'
+
//import Sound from 'react-sound';
import io from "socket.io-client";
import ConversationList from '../components/ConversationList';
import CircularProgress from '@material-ui/core/CircularProgress';
//const socket = io.connect('http://localhost:3000');
import authManager from '../AuthManager'
+import Conversation from '../../../model/Conversation'
+import Contact from '../../../model/Contact'
+import ConversationView from '../components/ConversationView';
+import AddContactPage from './addContactPage.jsx';
class JamiMessenger extends React.Component {
constructor(props) {
super(props)
- this.accountId = props.accountId || props.match.params.accountId
+
this.state = {
conversations: undefined,
messages: [],
@@ -34,16 +39,20 @@
// })
//});
this.sendMessage = this.sendMessage.bind(this)
+ this.handleSearch = this.handleSearch.bind(this)
this.controller = new AbortController()
}
componentDidMount() {
+ const accountId = this.props.accountId || this.props.match.params.accountId
+ const conversationId = this.props.conversationId || this.props.match.params.conversationId
+
if (this.req === undefined) {
- this.req = authManager.fetch(`/api/accounts/${this.accountId}/conversations`, {signal: this.controller.signal})
+ this.req = authManager.fetch(`/api/accounts/${accountId}/conversations`, {signal: this.controller.signal})
.then(res => res.json())
.then(result => {
console.log(result)
- this.setState({conversations: result})
+ this.setState({conversations: Object.values(result).map(c => Conversation.from(accountId, c))})
})
}
/*socket.on('receivedMessage', (data) => {
@@ -63,6 +72,27 @@
this.req = undefined
}
+ handleSearch(query) {
+ const accountId = this.props.accountId || this.props.match.params.accountId
+ const conversationId = this.props.conversationId || this.props.match.params.conversationId
+
+ authManager.fetch(`/api/accounts/${accountId}/ns/name/${query}`)
+ .then(response => {
+ if (response.status === 200) {
+ return response.json()
+ } else {
+ throw new Error(response.status)
+ }
+ }).then(response => {
+ console.log(response)
+ const contact = new Contact(response.address)
+ contact.setRegisteredName(response.name)
+ this.setState({searchResult: contact ? Conversation.fromSingleContact(accountId, contact) : undefined})
+ }).catch(e => {
+ this.setState({searchResult: e})
+ })
+ }
+
sendMessage(text) {
var data = {
senderId: 'Me',
@@ -77,13 +107,23 @@
})
}
render() {
+ const accountId = this.props.accountId || this.props.match.params.accountId
+ const conversationId = this.props.conversationId || this.props.match.params.conversationId
+ const contactId = this.props.contactId || this.props.match.params.contactId
+
+ console.log("JamiMessenger render " + conversationId)
+ console.log(this.props)
+ console.log(this.state)
+
return (
<div className="app" >
<Header />
- {this.state.conversations ? <ConversationList conversations={this.state.conversations} /> : <CircularProgress />}
- <MessageList messages={this.state.messages} />
- <SendMessageForm sendMessage={this.sendMessage} />
- <NewContactForm />
+ {this.state.conversations ?
+ <ConversationList search={this.state.searchResult} conversations={this.state.conversations} accountId={accountId} /> :
+ <CircularProgress />}
+ <NewContactForm onChange={query => this.handleSearch(query)} />
+ {conversationId && <ConversationView accountId={accountId} conversationId={conversationId} />}
+ {contactId && <AddContactPage accountId={accountId} contactId={contactId} />}
{this.state.sound && <Sound
url="stairs.mp3" /*https://notificationsounds.com/message-tones/stairs-567*/
playStatus={Sound.status.PLAYING}