Hackishly include all items in the conversation stream

Author: vanstee

Gemfile

@@ -37,6 +37,7 @@ gem 'rails', '~> 4.1.1'
 gem 'rails-assets-jquery-autosize'
 gem 'rails-assets-handlebars'
 gem 'rails-assets-moment'
+gem 'rails-assets-showdown'
 gem 'redcarpet'
 gem 'sass-rails', '~> 4.0.0'
 gem 'sequential', '>= 0.1'

Gemfile.lock

@@ -273,6 +273,7 @@ GEM
     rails-assets-jquery-autosize (1.18.6)
       rails-assets-jquery (>= 1.7)
     rails-assets-moment (2.5.0)
+    rails-assets-showdown (0.3.1)
     rails_12factor (0.0.2)
       rails_serve_static_assets
       rails_stdout_logging
@@ -430,6 +431,7 @@ DEPENDENCIES
   rails-assets-handlebars
   rails-assets-jquery-autosize
   rails-assets-moment
+  rails-assets-showdown
   rails_12factor
   rake
   react-rails!

app/assets/javascripts/application.js

@@ -17,6 +17,7 @@
 //= require react
 //= require react_ujs
 //= require moment
+//= require showdown
 //= require_tree ./components
 
 $(document).ready(function() {

app/assets/javascripts/components/assignment_event.js.jsx

@@ -0,0 +1,33 @@
+/** @jsx React.DOM */
+
+var AssignmentEvent = React.createClass({
+  render: function() {
+    return (
+      <div className="event">
+        <a href={this.props.assignmentEvent.user_url}>
+          <Avatar initials={this.props.assignmentEvent.initials} gravatarUrl={this.props.assignmentEvent.avatar_url} />
+        </a>
+
+        <strong>
+          <a href={this.props.assignmentEvent.user_url}>
+            {this.props.assignmentEvent.name}
+          </a>
+
+          {' '} assigned
+
+          <a href={this.props.assignmentEvent.assignee_url}>
+            <Avatar initials={this.props.assignmentEvent.assignee_initials} gravatarUrl={this.props.assignmentEvent.assignee_avatar_url} />
+
+            {this.props.assignmentEvent.assignee_name}
+          </a>
+        </strong>
+
+        {' '} to this conversation {this.timeAgoInWords()}
+      </div>
+    );
+  },
+
+  timeAgoInWords: function() {
+    return moment(this.props.assignmentEvent.updated_at).fromNow();
+  }
+});

app/assets/javascripts/components/conversation.js.jsx

@@ -1,10 +1,16 @@
 /** @jsx React.DOM */
 
 var Conversation = React.createClass({
+  getInitialState: function() {
+    return {
+      messagesVisible: false
+    };
+  },
+
   render: function() {
     return (
       <div className="list-item" key={this.props.conversation.id}>
-        <a href={this.props.conversation.url} className="conversation conversation-row">
+        <div onClick={this.toggleMessages} className={this.conversationClassNames()}>
           <div className="summary">
             <Avatar initials={this.props.conversation.creator_person.initials} gravatarUrl={this.props.conversation.creator_person.gravatar_url} />
 
@@ -28,9 +34,30 @@ var Conversation = React.createClass({
             </div>
 
             <ConversationTagList tags={this.props.conversation.tags} />
+
+            {this.state.messagesVisible ? <Message message={this.props.conversation.stream_items[0]} detail={false} /> : ''}
           </div>
-        </a>
+
+          {this.state.messagesVisible ? <ConversationStream items={this.props.conversation.stream_items} /> : ''}
+        </div>
       </div>
     );
+  },
+
+  toggleMessages: function(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.setState({
+      messagesVisible: !this.state.messagesVisible
+    });
+  },
+
+  conversationClassNames: function() {
+    if(this.state.messagesVisible) {
+      return ['conversation', 'conversation-detail'].join(' ');
+    } else {
+      return ['conversation', 'conversation-row'].join(' ');
+    }
   }
 });

app/assets/javascripts/components/conversation_list.js.jsx

@@ -19,7 +19,7 @@ var ConversationList = React.createClass({
     return (
       <div className="list list-conversations">
         {this.state.conversations.map(function(conversation) {
-          return <Conversation conversation={conversation} />
+          return <Conversation conversation={conversation} key={conversation.id} />
         })}
       </div>
     );

app/assets/javascripts/components/conversation_stream.js.jsx

@@ -0,0 +1,13 @@
+/** @jsx React.DOM */
+
+var ConversationStream = React.createClass({
+  render: function() {
+    return (
+      <div className="conversation-stream">
+        {this.props.items.slice(1).map(function(item) {
+          return <ConversationStreamItem item={item} key={item.id} />
+        })}
+      </div>
+    );
+  }
+});

app/assets/javascripts/components/conversation_stream_item.js.jsx

@@ -0,0 +1,36 @@
+/** @jsx React.DOM */
+
+var ConversationStreamItem = React.createClass({
+  render: function() {
+    return this.componentForType(this.props.item.type);
+  },
+
+  componentForType: function(type) {
+    switch(type) {
+      case 'message':
+        return this.messageComponent();
+      case 'tagevent':
+        return this.tagEventComponent();
+      case 'assignmentevent':
+        return this.assignmentEventComponent();
+    }
+  },
+
+  messageComponent: function() {
+    return (
+      <Message message={this.props.item} detail={true} key={this.props.item.id} />
+    )
+  },
+
+  tagEventComponent: function() {
+    return (
+      <TagEvent tagEvent={this.props.item} key={this.props.item.id} />
+    )
+  },
+
+  assignmentEventComponent: function() {
+    return (
+      <AssignmentEvent assignmentEvent={this.props.item} key={this.props.item.id} />
+    )
+  }
+});

app/assets/javascripts/components/message.js.jsx

@@ -0,0 +1,20 @@
+/** @jsx React.DOM */
+
+var Message = React.createClass({
+  render: function() {
+    return (
+      <div className="message">
+        {this.props.detail ? <Avatar initials={this.props.message.person.initials} gravatarUrl={this.props.message.person.gravatar_url} /> : ''}
+
+        {this.props.detail ? <div className="person">{this.props.message.person.nickname}</div> : ''}
+
+        <div className="content" dangerouslySetInnerHTML={{__html: this.markdownContent()}} />
+      </div>
+    );
+  },
+
+  markdownContent: function() {
+    var converter = new Showdown.converter();
+    return converter.makeHtml(this.props.message.content);
+  }
+});

app/assets/javascripts/components/tag_event.js.jsx

@@ -0,0 +1,33 @@
+/** @jsx React.DOM */
+
+var TagEvent = React.createClass({
+  render: function() {
+    return (
+      <div className="event">
+        <a href={this.props.tagEvent.user_url}>
+          <Avatar initials={this.props.tagEvent.initials} gravatarUrl={this.props.tagEvent.avatar_url} />
+        </a>
+
+        <strong>
+          <a href={this.props.tagEvent.user_url}>
+            {this.props.tagEvent.name}
+          </a>
+
+          {' '} tagged
+        </strong>
+
+        {' '} this conversation with {' '}
+
+        <a href={this.props.tagEvent.tag_url} className="tag">
+          #{this.props.tagEvent.tag}
+        </a>
+
+        {' '} {this.timeAgoInWords()}
+      </div>
+    );
+  },
+
+  timeAgoInWords: function() {
+    return moment(this.props.tagEvent.updated_at).fromNow();
+  }
+});

app/models/conversation.rb

@@ -66,6 +66,8 @@ class Conversation < ActiveRecord::Base
 
   scope :welcome_email, -> { where(subject: WelcomeConversation::SUBJECT) }
 
+  scope :with_messages, -> { where('(SELECT COUNT(messages.id) FROM messages WHERE messages.conversation_id = conversations.id) > 0') }
+
   sequential column: :number,
     scope: :account_id
 
@@ -98,7 +100,7 @@ def just_unarchived?
   end
 
   def creator_person
-    first_message.person
+    first_message && first_message.person
   end
 
   def messages_count

app/models/conversation_summarizer.rb

@@ -16,7 +16,7 @@ def summary
   end
 
   def tweet_sized_snippet_from_first_message
-    first_message.content[0...LENGTH]
+    first_message && first_message.content[0...LENGTH]
   end
 
   def first_message

app/models/conversations_inbox.rb

@@ -61,6 +61,7 @@ def queue_index(conversation)
   def open_conversations
     conversations = preloaded_conversations.unresolved
     conversations = conversations.unassigned_or_assigned_to(user)
+    conversations = conversations.with_messages
     conversations
   end
 end

app/serializers/assignment_event_serializer.rb

@@ -1,8 +1,9 @@
 class AssignmentEventSerializer < BaseSerializer
   include ActionView::Helpers::DateHelper
   include AvatarHelper
+  include Rails.application.routes.url_helpers
 
-  attributes :initials, :avatar_url, :name, :assignee_initials, :assignee_avatar_url, :assignee_name, :updated_at_in_words
+  attributes :initials, :avatar_url, :name, :user_url, :assignee_initials, :assignee_avatar_url, :assignee_name, :assignee_url, :updated_at_in_words
 
   def initials
     object.user.person.initials
@@ -16,6 +17,10 @@ def name
     object.user.person.name
   end
 
+  def user_url
+    search_account_conversations_path(object.conversation.account, assignee: object.user.id)
+  end
+
   def assignee_initials
     object.assignee.person.initials
   end
@@ -28,6 +33,10 @@ def assignee_name
     object.assignee.person.name
   end
 
+  def assignee_url
+    search_account_conversations_path(object.conversation.account, assignee: object.assignee.id)
+  end
+
   def updated_at_in_words
     time_ago_in_words(object.updated_at)
   end

app/serializers/conversation_serializer.rb

@@ -3,6 +3,7 @@ class ConversationSerializer < BaseSerializer
   has_one :creator_person
   has_many :messages
   has_many :participants
+  has_many :stream_items
 
   def include_messages?
     options.fetch(:include_messages, true)
@@ -23,4 +24,8 @@ def summary
   def url
     "/#{account_slug}/#{number}"
   end
+
+  def stream_items
+    ConversationStream.new(object).stream_items
+  end
 end

app/serializers/message_serializer.rb

@@ -1,8 +1,8 @@
 class MessageSerializer < BaseSerializer
-  attributes :body, :body_html
+  attributes :body, :body_html, :content
 
   has_one :conversation, embed: :ids
-  has_one :person, embed: :ids
+  has_one :person
 
   has_many :attachments
 

app/serializers/tag_event_serializer.rb

@@ -1,8 +1,9 @@
 class TagEventSerializer < BaseSerializer
   include ActionView::Helpers::DateHelper
   include AvatarHelper
+  include Rails.application.routes.url_helpers
 
-  attributes :tag, :initials, :avatar_url, :name, :updated_at_in_words
+  attributes :tag, :initials, :avatar_url, :name, :updated_at_in_words, :user_url, :tag_url
 
   def initials
     object.user.person.initials
@@ -19,4 +20,12 @@ def name
   def updated_at_in_words
     time_ago_in_words(object.updated_at)
   end
+
+  def user_url
+    search_account_conversations_path(object.conversation.account, assignee: object.user.id)
+  end
+
+  def tag_url
+    search_account_conversations_path(object.conversation.account, tag: object.tag)
+  end
 end

db/schema.rb

@@ -16,6 +16,7 @@
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
   enable_extension "hstore"
+  enable_extension "pg_stat_statements"
   enable_extension "uuid-ossp"
 
   create_table "accounts", id: false, force: true do |t|
@@ -107,7 +108,6 @@
   end
 
   add_index "conversations", ["account_id", "archived"], name: "index_conversations_on_account_id_and_archived", using: :btree
-  add_index "conversations", ["account_id"], name: "index_conversations_on_account_id", using: :btree
   add_index "conversations", ["hidden"], name: "index_conversations_on_hidden", using: :btree
   add_index "conversations", ["user_id"], name: "index_conversations_on_user_id", using: :btree