add messenger back
Change-Id: I59baede92e0ee8218b7f27657c5f4bc5de06c092
diff --git a/client/src/App.js b/client/src/App.js
index 10a9370..bf9cc15 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -33,9 +33,9 @@
<Router>
<Switch>
<Route exact path="/"><Redirect to="/account" /></Route>
- <Route path="/account/:accountId" component={AccountSettings} />
+ <Route path="/account/:accountId" component={JamiMessenger} />
+ <Route path="/account/:accountId/settings" component={AccountSettings} />
<Route path="/account" component={AccountSelection} />
- <Route path="/messaging" component={JamiMessenger} />
<Route component={NotFoundPage} />
</Switch>
</Router>
diff --git a/client/src/App.scss b/client/src/App.scss
index 915ab44..74b5e05 100644
--- a/client/src/App.scss
+++ b/client/src/App.scss
@@ -28,10 +28,6 @@
color: #61dafb;
}
-.loginCard {
- margin-top: 2em;
-}
-
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index af232a0..50b773d 100644
--- a/client/src/components/ContactList.js
+++ b/client/src/components/ContactList.js
@@ -1,14 +1,12 @@
+import List from '@material-ui/core/List'
import React from 'react'
class ContactList extends React.Component {
render() {
-
return (
- <div className="rooms-list">
- <ul>
- <h3>Liste de contacts</h3>
- </ul>
- </div>
+ <List>
+
+ </List>
)
}
}
diff --git a/client/src/components/ConversationList.js b/client/src/components/ConversationList.js
new file mode 100644
index 0000000..4620d77
--- /dev/null
+++ b/client/src/components/ConversationList.js
@@ -0,0 +1,18 @@
+import List from '@material-ui/core/List'
+import React from 'react'
+import ConversationListItem from './ConversationListItem'
+
+class ConversationList extends React.Component {
+ render() {
+
+ return (
+ <List>
+ {this.props.conversations.forEach(conversation => {
+ <ConversationListItem conversation={conversation} />
+ })}
+ </List>
+ )
+ }
+}
+
+export default ConversationList
\ No newline at end of file
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
new file mode 100644
index 0000000..3a271fc
--- /dev/null
+++ b/client/src/components/ConversationListItem.js
@@ -0,0 +1,16 @@
+import { Avatar, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import React from 'react'
+
+class ConversationListItem extends React.Component {
+ render() {
+
+ return (
+ <ListItem alignItems="flex-start">
+ <ListItemAvatar><Avatar>{this.props.conversation.getDisplayName()[0]}</Avatar></ListItemAvatar>
+ <ListItemText primary={this.props.conversation.getDisplayName()} />
+ </ListItem>
+ )
+ }
+}
+
+export default ConversationListItem
\ No newline at end of file
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index 43a4998..fd648e5 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -37,8 +37,8 @@
disabled={this.props.disabled}
onChange={this.handleChange}
value={this.state.message}
- cleanOnEnter
- onEnter={this.handleSubmit}
+ //cleanOnEnter
+ //onEnter={this.handleSubmit}
placeholder="Écris ton message et cliques sur Entrer"
height="35"
/>
diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index 23f3935..a91a04e 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -6,13 +6,18 @@
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'
class JamiMessenger extends React.Component {
- constructor() {
- super()
+ constructor(props) {
+ super(props)
+ this.accountId = props.accountId || props.match.params.accountId
this.state = {
+ conversations: undefined,
messages: [],
sound: false
}
@@ -29,9 +34,18 @@
// })
//});
this.sendMessage = this.sendMessage.bind(this)
+ this.controller = new AbortController()
}
componentDidMount() {
+ if (this.req === undefined) {
+ this.req = authManager.fetch(`/api/accounts/${this.accountId}/conversations`, {signal: this.controller.signal})
+ .then(res => res.json())
+ .then(result => {
+ console.log(result)
+ this.setState({conversations: result})
+ })
+ }
/*socket.on('receivedMessage', (data) => {
const message = {
senderId: '65f6674b26e5af6ed0b4e92a13b80ff4bbfdf1e8',
@@ -44,6 +58,11 @@
});*/
}
+ componentWillUnmount(){
+ this.controller.abort()
+ this.req = undefined
+ }
+
sendMessage(text) {
var data = {
senderId: 'Me',
@@ -61,7 +80,7 @@
return (
<div className="app" >
<Header />
- <ContactList />
+ {this.state.conversations ? <ConversationList conversations={this.state.conversations} /> : <CircularProgress />}
<MessageList messages={this.state.messages} />
<SendMessageForm sendMessage={this.sendMessage} />
<NewContactForm />
diff --git a/model/Conversation.js b/model/Conversation.js
index d5c41de..8046219 100644
--- a/model/Conversation.js
+++ b/model/Conversation.js
@@ -1,7 +1,7 @@
class Conversation {
constructor(id, members) {
this.id = id
- this.members = members
+ this.members = members || []
this.messages = []
}
@@ -12,13 +12,12 @@
getId() { return this.id }
getDisplayName() {
- return this.details["Account.displayName"] || this.getDisplayUri()
+ if (this.members.length !== 0) {
+ return this.members[0].getDisplayName()
+ }
+ return this.getDisplayUri()
}
- getUri() { return this.details["Account.username"] }
-
- getRegisteredName() { return this.volatileDetails["Account.registeredName"] }
-
getObject() {
return {
id: this.id,
@@ -31,7 +30,7 @@
}
getDisplayUri() {
- return this.getRegisteredName() || this.getUri()
+ return this.getId()
}
addMessage(message) {