import React, { Component } from 'react';
import moment from 'moment'

class MessageList extends Component {

  arraysEqual(arr1, arr2) {
    if(arr1.length !== arr2.length)
      return false;
    for(var i = arr1.length; i--;) {
      if(arr1[i] !== arr2[i])
        return false;
    }
    return true;
  }

  shouldComponentUpdate(nextProps, nextState) {
    const newMessages = nextProps.messages
    const messages = this.props.messages
    return !this.arraysEqual(newMessages, messages)
  }
  
  render() {        
    const { messages, currentUserId, userIds } = this.props
    if (messages.length === 0) return <div>This room is empty 😭</div>
    const authorId = userIds[0]
    return (
      <div>
        {messages.map(m => (
          <div key={m.id}>
            <div style={{ marginLeft: m.createdByUserId === currentUserId ? '40%' : '0', marginRight: m.createdByUserId === currentUserId ? '0' : '40%', marginBottom: '15px' }}>
              <p style={{ color: m.createdByUserId === authorId ? 'purple' : 'black', marginBottom: '3px' }}>{m.text}</p>
              <p style={{ fontSize: '10px', fontStyle: 'italic' }} >
                {/* Maybe using this for reactivity? https://gist.github.com/aortbals/48fa1e3526e42698f24dc58c2f03bf74 */}
                {moment(m.createdAt).fromNow()}
              </p> 
            </div> 
          </div>          
        ))}
      </div>
    );
  }
}

MessageList.propTypes = {
  userIds: React.PropTypes.array.isRequired,
  messages: React.PropTypes.array.isRequired,
  currentUserId: React.PropTypes.string,
}

export default MessageList

@@ -734,36 +734,286 @@
  =%3E 
-(%0A          %3Cdiv key=%7Bm.id%7D%3E
+%7B%0A          const isCurrentUser = m.createdByUserId === currentUserId%0A          const isAuthor = m.createdByUserId === authorId%0A          const platoFace = isAuthor ? 'plato-red.jpg' : 'plato.jpg'%0A          return (%0A            %3Cdiv%0A              key=%7Bm.id%7D className=%22msg-list%22
 %0A   
@@ -1021,20 +1021,17 @@
         
-%3Cdiv
+ 
  style=%7B
@@ -1044,39 +1044,19 @@
 inLeft: 
-m.createdByUserId === c
+isC
 urrentUs
@@ -1053,26 +1053,24 @@
 sCurrentUser
-Id
  ? '40%25' : '
@@ -1086,39 +1086,19 @@
 nRight: 
-m.createdByUserId === c
+isC
 urrentUs
@@ -1099,18 +1099,16 @@
 rentUser
-Id
  ? '0' :
@@ -1113,17 +1113,165 @@
  : '40%25'
-,
+ %7D%7D%0A            %3E%0A              %7B!isCurrentUser && %3Cimg src=%7B%60/static/$%7BplatoFace%7D%60%7D alt=%22Platonos%22 className=%22plato%22 /%3E%7D%0A              %3Cdiv style=%7B%7B
  marginB
@@ -1294,32 +1294,34 @@
 %3E%0A              
+  
 %3Cp style=%7B%7B colo
@@ -1327,38 +1327,16 @@
 or: 
-m.createdByUserId === a
+isA
 uthor
-Id
  ? '
@@ -1396,32 +1396,34 @@
 %3E%0A              
+ 
+ 
 %3Cp style=%7B%7B font
@@ -1461,16 +1461,18 @@
 c' %7D%7D %3E%0A
+  
         
@@ -1602,16 +1602,18 @@
         
+  
 %7Bmoment(
@@ -1654,14 +1654,18 @@
     
+ 
+ 
 %3C/p%3E %0A
+  
     
@@ -1686,24 +1686,26 @@
  %0A          
+  
 %3C/div%3E      
@@ -1705,24 +1705,26 @@
 %3E          %0A
+  
         ))%7D%0A
@@ -1720,18 +1720,307 @@
        )
-)%7D
+%0A        %7D)%7D%0A        %3Cstyle jsx scoped%3E%7B%60%0A          .msg-list %7B%0A            display: flex;%0A            flex-direction: row;%0A          %7D%0A          .plato %7B%0A            flex: 0 0;%0A            width: 37px;%0A            height: 52px;%0A            margin-right: 10px;%0A          %7D%0A        %60%7D%3C/style%3E
 %0A      %3C

Insert Plato face lol