Commit 0e5e2bbc authored by Alexander Kotov's avatar Alexander Kotov

display messages with author info

parent d2366be5
......@@ -9,6 +9,7 @@ import firebase from './firebase'
const database = firebase.database()
const messagesRef = database.ref('messages')
let usersRef = database.ref('users')
const timestamp = firebase.database.ServerValue.TIMESTAMP;
class App extends Component {
......@@ -31,6 +32,19 @@ class App extends Component {
let message = data.val()
this.addMessage(message)
})
usersRef.on('value', data => {
this.setState({ users: data.val() })
})
}
populateMessage = (message) => {
let user = this.state.users[message.uid]
return {
...message,
author: user ? user.displayName : 'unknown',
photoURL: user ? user.photoURL : ''
}
}
sendMessage = (message) => {
......@@ -52,11 +66,13 @@ class App extends Component {
render() {
const user = this.state.user
const messages = this.state.users ?
this.state.messages.map(this.populateMessage) : []
let app = (
<div id="chat">
<Header user={user} onLogout={this.onLogout}/>
<Messages messages={this.state.messages} />
<Messages messages={messages} />
<MessageForm onSubmit={this.sendMessage} />
</div>
)
......
......@@ -3,7 +3,7 @@ import React from 'react'
const Message = ({ message }) => {
return (
<div className="message">
<img src="" alt="" />
<img src={message.photoURL} alt="" />
<div className="info">
<div className="authorName">{message.author}</div>
<div className="body">{message.body}</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment