Repetaded avatar solved

ChatApp2.js

////////////////////////////////////////////////////////////////////////////////
// Exercise:
//
// - Create a chat application using the utility methods we give you
//
// Need some ideas?
//
// - Cause the message list to automatically scroll as new
//   messages come in
// - Highlight messages from you to make them easy to find
// - Highlight messages that mention you by your GitHub username
// - Group subsequent messages from the same sender
// - Create a filter that lets you filter messages in the chat by
//   sender and/or content
////////////////////////////////////////////////////////////////////////////////
import React from 'react'
import { render, findDOMNode } from 'react-dom'
import { login, sendMessage, subscribeToMessages } from './utils/ChatUtils'
import './styles'

/*
Here's how to use the ChatUtils:

login((error, auth) => {
  // hopefully the error is `null` and you have a auth.github object
})

sendMessage(
  auth.uid,                       // the auth.uid string
  auth.github.username,           // the username
  auth.github.profileImageURL,    // the user's profile image
  'hello, this is a message'      // the text of the message
)

const unsubscribe = subscribeToMessages(messages => {
  // here are your messages as an array, it will be called
  // every time the messages change
})

unsubscribe() // stop listening for new messages

The world is your oyster!
*/

const Chat = React.createClass({
  getInitialState() {
    return {
      auth: null,
      messages: [],
    }
  },

  componentDidMount() {
    login((error, auth) => {
      // hopefully the error is `null` and you have a auth.github object
      this.setState({
        auth: auth
      });
      console.log("Exito!");
    })

    const unsubscribe = subscribeToMessages(messages => {      
      this.setState({
        messages: messages
      });

//      this.syncScroll()
    })
  },

  syncScroll() {
    const msgsDOM = findDOMNode(this.refs.messages)
    msgsDOM.scrollTop = msgsDOM.scrollHeight;
  },

  componentDidUpdate() {
    this.syncScroll()
  },

  handleSubmit(e) {
    e.preventDefault();
    
    const newMsg = findDOMNode(this.refs.message).value
    const { auth } = this.state
    sendMessage(
      auth.uid,                       // the auth.uid string
      auth.github.username,           // the username
      auth.github.profileImageURL,    // the user's profile image
      newMsg
    )    

    e.target.reset()
  },
  render() {
    let lastUser = null;
    return (
      <div className="chat">
        <header className="chat-header">
          <h1 className="chat-title">HipReact</h1>
          <p className="chat-message-count"># messages: {this.state.messages.length}</p>
        </header>
        <div ref="messages" className="messages">
          <ol className="message-groups">
            {this.state.messages.map(
              (msg) => {
                const isTheSame = msg.username !== lastUser;
                lastUser = msg.username;  
                return <li key={msg._key} className="message-group">
                  <div className="message-group-avatar">
                    
                      {isTheSame? <img src={msg.avatarURL} /> : null}
                  </div>
                  <ol className="messages">
                    <li className="message">{msg.text}</li>
                  </ol>
                </li>
              }
              )   
            }         
          </ol>
        </div>
        <form className="new-message-form" onSubmit={this.handleSubmit}>
          <div className="new-message">
            <input ref="message" type="text" placeholder="say something..." />
          </div>
        </form>
      </div>
    )
  }
})

render(<Chat/>, document.getElementById('app'))