Forest - Conversation Smart View

component.js

'use strict';
import Ember from 'ember';
import SmartViewMixin from 'client/mixins/smart-view-mixin';

export default Ember.Component.extend(SmartViewMixin.default, {
  conversations: function () {
    this.set('currentConversation',  this.get('records.firstObject'));
    this.set('currentConversation', this.get('records.firstObject'));
    return this.get('records');
  }.property('records'),
  messages: function () {
    let rightSenderId;
    return this
      .get('currentConversation')
      .query('forest-messages', {})
      .then((messages) => {
        rightSenderId = messages.get('lastObject.forest-sender.forest-_id');
        this.set('messages', messages
          .map((message) => {
            if (rightSenderId === message.get('forest-sender.forest-_id')) {
              message.set('pos', 'right');
            } else { message.set('pos', 'left'); }
            return message;
          }));
        });
  }.property('currentConversation'),
  actions: {
    switchConversation: function (conversation) {
      this.set('currentConversation', conversation);
      let rightSenderId;
      conversation
        .query('forest-messages', {})
        .then((messages) => {
          rightSenderId = messages.get('lastObject.forest-sender.forest-_id');
          this.set('messages', messages
            .map((message) => {
              if (rightSenderId === message.get('forest-sender.forest-_id')) {
                message.set('pos', 'right');
              } else { message.set('pos', 'left'); }
              return message;
            }));
        });
    }
  }
});

template.hbs

<style>
.conv-view {
	font-family: sans-serif;
  display: flex;
  flex-direction: row;
  font-size: 18px;
  background-color: white;
	right: 0px;
	position: absolute;
	left: 0px;
	top: 0px;
  bottom: 0px;
}
.conv-bar {
  height: 100vh;
  width: 300px;
  border-right: 1px solid #ddd;
  background-color: white;
}
.conv-bar li {
  padding: 20px 40px;
  list-style-type: none;
  border-bottom: 1px solid #ddd;
  color: black;
}
.active {
  background-color: #ddd;
}
.conv-preview {
 	margin: 10px 0px;
  margin-bottom: 0px;
  text-overflow: ellipsis;
  width: 230px;
  color: #adb9c6;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
}
.conv-header {
  display: flex;
  justify-content: space-between;
}
.conv-header p {
  white-space: nowrap;
}
.conv-header .conv-title {
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-timestamp {
  font-size: 13px;
  line-height: 20px;
  margin-left: 20px;
}
.conv-bar li a {
  text-decoration: none;
  color: black;
}
.conv-bar li small {
  font-size: 15px;
}
.conv-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: scroll;
}
.conv-content .conv-message {
  padding: 15px;
  margin: 10px auto;
  width: 95%;
  color: white;
  background-color: #45b271;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  min-height: 80px;
}
.conv-content .right {
  margin: 10px;
  margin-left: auto;
  background-color: #45b271;
  width: 60%;
  color: white;
}
.conv-content .left {
  margin: 10px;
  background-color: #2e3a3b;
  color: white;
  width: 60%;
}
.conv-message__avatar {
  border-radius: 3px;
  height: 20px;
  width: 20px;
}
.conv-message__timestamp {
  font-size: 13px;
  line-height: 20px;
  margin: 0px;
  padding: 0px;
}
.conv-message__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 7.5px;
}
.conv-message__header .conv-message__user {
  display: flex;
  height: 20px;
}
.conv-message__header .conv-message__user .conv-message__username {
  line-height: 20px;
  margin-left: 7.5px;
  padding: 0px;
}
.conv-message__header .conv-message__user .conv-message__username i {
  opacity: 0.3;
}
.conv-message__content {
  overflow-wrap: break-word;
  line-height: 20px;
}
</style>
<div class="conv-view">
  <ul class="conv-bar">
  	{{#each conversations as |conversation|}}
    	<a href="#" {{action 'switchConversation' conversation}}>
     		<li class="{{if (eq conversation.forest-_id currentConversation.forest-_id) 'active'}}">
        	<div class="conv-header">
        		<p class="conv-title">{{conversation.forest-name}}</p>
        		<p class="conv-timestamp">
          		{{moment-from-now conversation.forest-createdAt}}
        		</p>
     		 </div>
          <p class="conv-preview">
          	{{conversation.forest-preview}}
          </p>
        </li>
      </a>
    {{/each}}
  </ul>
  <div class="conv-content">
 		{{#each messages as |message|}}
      <div class="conv-message {{message.pos}}">
        <div class="conv-message__header">
          <div class="conv-message__user">
            <img class="conv-message__avatar" src="{{message.forest-sender.forest-avatar}}" alt="">
            <strong class="conv-message__username">{{message.forest-sender.forest-firstName}} {{message.forest-sender.forest-lastName}}</strong>
          </div>
          <p class="conv-message__timestamp">{{moment-from-now message.forest-createdAt}}</p>
        </div>
        <p class="conv-message__message">{{message.forest-content}}</p>
      </div>
    {{/each}}
  </div>
</div>