ircz/src/components/Messages.js

import React from 'react'
import MessageEntryForm from './MessageEntryForm'
const Messages = props => {
  const {
    title,
    buffer,
    chats,
    messages,
    socket,
    activateChat,
    join,
    formatMessage,
    submitMessage,
  } = props
  return (
    <div className="bg-secondary d-flex flex-column flex-grow-1 px-2 pb-4">
      {/*Main Section Header*/}
      <div className="d-flex justify-content-between flex-wrap flex-md-nowrap pt-3 pb-2 mb-3 border-bottom">
        <h4 className="mr-auto ml-3">
          {title} {buffer}
        </h4>
      </div>
      {/*Main Section Content*/}
      <div className="d-flex flex-column border border-secondary flex-grow-1">
        <div className="bg-dark flex-grow-1 p-2 text-light">
          {messages
            .filter(
              m =>
                (m.to[0] === '#' && m.to === buffer) ||
                (m.to[0] !== '#' && m.from === buffer) ||
                (m.from === socket.socketId && m.to === buffer)
            )
            .map(m => {
              console.log(m)
              const rowColor = m.nick === 'server' ? 'text-secondary' : ''
              return (
                <div className={`d-flex ${rowColor}`} key={m.id}>
                  <div className="pr-3 text-nowrap">{m.date}</div>
                  {m.nick === 'server' ? null : (
                    <div className="pr-3 text-nowrap">{m.nick}:</div>
                  )}
                  <div className="pr-3 flex-grow-1">{m.text}</div>
                </div>
              )
            })}
        </div>
        <MessageEntryForm
          activateChat={activateChat}
          formatMessage={formatMessage}
          submitMessage={submitMessage}
          join={join}
          buffer={buffer}
          chats={chats}
          messages={messages}
          socket={socket}
        />
      </div>
    </div>
  )
}

export default Messages