Adding better time display for heartbeats

config/install/core.date_format.heartbeat_medium.yml

@@ -0,0 +1,9 @@
+uuid: c86ef069-0984-4934-9d75-9cea1aab6ddf
+langcode: en
+status: true
+dependencies: {  }
+id: heartbeat_medium
+label: 'Heartbeat Medium'
+locked: false
+pattern: 'F d \a\t g:ia'
+

config/install/core.date_format.heartbeat_time.yml

@@ -0,0 +1,9 @@
+uuid: 5651f093-535c-4949-870e-49101c96d716
+langcode: en
+status: true
+dependencies: {  }
+id: heartbeat_time
+label: 'Heartbeat Time'
+locked: false
+pattern: 'g:ia'
+

config/install/heartbeat.heartbeat_type.user_heartpost.yml

@@ -0,0 +1,19 @@
+uuid: 39675abc-1d57-4432-855f-c59bc4f30210
+langcode: en
+status: true
+dependencies: {  }
+id: user_heartpost
+label: 'User Heartpost'
+message_id: null
+description: 'Records the event of a user creating a Heartpost'
+mainentity: node
+bundle: heartpost
+message: '!nodetitle !nodebody'
+weight: 0
+perms: -1
+group_type: '11'
+arguments: '{"!nodetitle":"[node:title]","!nodebody":"[node:body]"}'
+variables:
+  - '[node:title]'
+  - '[node:body]'
+

config/install/heartbeat.heartbeat_type.user_post_status.yml.bak

@@ -1,19 +0,0 @@
-uuid: eee0b18b-bd5e-458f-8b08-760e8d882fb0
-langcode: en
-status: true
-dependencies: {  }
-id: user_post_status
-label: 'User Post Status'
-hid: null
-message_id: null
-description: 'Records the event of a user posting a status message'
-mainentity: status
-bundle: null
-message: '!user has posted a status update: !status'
-perms: 0
-group_type: HEARTBEAT_GROUP_NONE
-arguments: '{"!user":"[user:account-name]","!status":"[status:message]"}'
-variables:
-  - '[user:account-name]'
-  - '[status:message]'
-

config/install/heartbeat.heartbeat_type.user_post_youtube.yml

@@ -0,0 +1,20 @@
+uuid: 4c395cae-4631-4a04-9b45-4bce05fb9da0
+langcode: en
+status: true
+dependencies: {  }
+id: user_post_youtube
+label: 'User Post Youtube'
+message_id: null
+description: 'Records a user posting a youtube video'
+mainentity: node
+bundle: youtube_video
+message: '!user posted a video: !title !body'
+weight: 0
+perms: -1
+group_type: '11'
+arguments: '{"!user":"[user:account-name]","!title":"[node:title]","!body":"[node:body]"}'
+variables:
+  - '[user:account-name]'
+  - '[node:title]'
+  - '[node:body]'
+

config/schema/heartbeat.schema.yml

@@ -116,3 +116,6 @@ heartbeat_comment.config:
     entity_id:
       type: integer
       label: 'The ID of the entity being commented on'
+    cid:
+      type: integer
+      label: 'The ID of the Comment being commented on'

heartbeat.module

@@ -315,6 +315,10 @@ function heartbeat_entity_view(array &$build, \Drupal\Core\Entity\EntityInterfac
 
   if ($entity instanceof \Drupal\user\Entity\User) {
     if (isset($build['flag_friendship']) && \Drupal::currentUser()->id() === $entity->id()) {
+      \Drupal::logger('heartbeat_friendship_entityView')->debug('IDs are %id1 and %id2', array(
+        '%id1' => \Drupal::currentUser()->id(),
+        '%id2' => $entity->id(),
+      ));
       unset($build['flag_friendship']);
     }
   }

heartbeat.routing.yml

@@ -127,3 +127,27 @@ heartbeat.heartbeat_comment_update:
     _title: 'Heartbeat Comment Config Update'
   requirements:
     _access: 'TRUE'
+
+#heartbeat.heartbeat_sub_comment_update:
+#  path: '/heartbeat/subcommentupdate/{cid}'
+#  defaults:
+#    _controller: '\Drupal\heartbeat\Controller\HeartbeatController::subCommentConfigUpdate'
+#    _title: 'Heartbeat Sub Comment Config Update'
+#  requirements:
+#    _access: 'TRUE'
+
+heartbeat.sub_comment:
+  path: '/heartbeat/subcomment/{cid}'
+  defaults:
+    _controller: '\Drupal\heartbeat\Controller\HeartbeatController::subComment'
+    _title: 'Sub Comment Block'
+  requirements:
+    _permission: 'access content'
+
+heartbeat.sub_comment_request:
+  path: '/heartbeat/subcommentrequest/{cid}'
+  defaults:
+    _controller: '\Drupal\heartbeat\Controller\HeartbeatController::subCommentRequest'
+    _title: 'Sub Comment Block'
+  requirements:
+    _permission: 'access content'

js/heartbeat.js

@@ -50,7 +50,7 @@
             };
 
             Drupal.AjaxCommands.prototype.updateFeed = function(ajax, response, status) {
-              if ($response.update) {
+              if (response.update) {
                 $.ajax({
                   type: 'POST',
                   url:'/heartbeat/update_feed/' + response.timestamp,
@@ -63,6 +63,38 @@
 
             listenImages();
             listenCommentPost();
+
+          Drupal.AjaxCommands.prototype.myfavouritemethodintheworld = function(ajax, response, status) {
+            console.dir(response);
+            if (response.cid) {
+              let parentCheck = document.getElementById('heartbeat-comment-' + response.cid);
+              let form = parentCheck.querySelector('form');
+              console.log('this shit is getting called again');
+
+              if (form == null) {
+                $.ajax({
+                  type: 'POST',
+                  url: '/heartbeat/subcomment/' + response.cid,
+                  success: function (data) {
+                    let parentComment = document.getElementById('heartbeat-comment-' + response.cid);
+                    let insertNode = document.createElement('div');
+                    insertNode.innerHTML = data;
+                    parentComment.appendChild(insertNode);
+
+                    let text = parentComment.querySelector('.form-textarea');
+
+                    // text.addEventListener('keydown', function (e) {
+                    //   console.dir(e);
+                    //   // if (e.keyCode === 13) {
+                    //   //   let submitBtn = parentComment.querySelector('.form-submit');
+                    //   //   submitBtn.click();
+                    //   // }
+                    // });
+                  }
+                })
+              }
+            }
+          }
         }
     };
 
@@ -95,7 +127,7 @@
 
     for (let i = 0; i < comments.length; i++) {
       let comment = comments[i];
-      console.dir(comment);
+      // console.dir(comment);
       comment.addEventListener('click', function() {
         getParent(comment);
       })

src/Ajax/SubCommentCommand.php

@@ -0,0 +1,29 @@
+<?php
+namespace Drupal\heartbeat\Ajax;
+/**
+ * Created by IntelliJ IDEA.
+ * User: logicp
+ * Date: 5/28/17
+ * Time: 11:38 PM
+ */
+
+use Drupal\Core\Ajax\CommandInterface;
+
+class SubCommentCommand implements CommandInterface {
+    protected $cid;
+
+    public function __construct($cid) {
+        $this->cid = $cid;
+    }
+
+    public function render() {
+$jiggajiggawhat = 'null';
+$stophere = 'please;';
+
+        return array(
+            'command' => 'myfavouritemethodintheworld',
+
+            'cid' => $this->cid
+        );
+    }
+}

src/Controller/HeartbeatController.php

@@ -4,9 +4,13 @@ namespace Drupal\heartbeat\Controller;
 
 use Drupal\block\BlockViewBuilder;
 use Drupal\Component\Utility\Xss;
+use Drupal\Core\Ajax\AppendCommand;
 use Drupal\Core\Controller\ControllerBase;
 use Drupal\Core\DependencyInjection\ContainerInjectionInterface;
+use Drupal\Core\Render\Element\Ajax;
 use Drupal\Core\Url;
+use Drupal\Core\Ajax\AjaxResponse;
+use Drupal\heartbeat\Ajax\SubCommentCommand;
 use Drupal\heartbeat\Entity\HeartbeatInterface;
 
 /**
@@ -196,4 +200,27 @@ class HeartbeatController extends ControllerBase implements ContainerInjectionIn
     ];
   }
 
+  public function subCommentRequest($cid) {
+    $subCommentConfig = \Drupal::configFactory()->getEditable('heartbeat_comment.settings');
+    $subCommentConfig->set('cid', $cid)->save();
+
+    $muhComment = \Drupal::entityTypeManager()->getStorage('comment')->load($cid);
+    $muhForm = \Drupal::formBuilder()->getForm('\Drupal\heartbeat\Form\HeartbeatSubCommentForm', $muhComment);
+//heartbeat-comment-' + response.cid
+    $response = new AjaxResponse();
+//    $response->addCommand(new SubCommentCommand($cid));
+    $response->addCommand(new AppendCommand('#heartbeat-comment-' . $cid, BlockViewBuilder::lazyBuilder('heartbeatsubcommentblock', 'teaser')));
+    return $response;
+
+
+//    return [
+//      '#type' => 'markup',
+//      '#markup' => 'Success',
+//    ];
+  }
+
+  public function subComment() {
+    return BlockViewBuilder::lazyBuilder('heartbeatsubcommentblock', 'teaser');
+  }
+
 }

src/Form/HeartbeatSubCommentForm.php

@@ -0,0 +1,95 @@
+<?php
+
+namespace Drupal\heartbeat\Form;
+
+use Drupal\Core\Form\FormBase;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Comment\Entity\Comment;
+use Drupal\Core\Ajax\AjaxResponse;
+use Drupal\Core\Ajax\AppendCommand;
+
+/**
+ * Class HeartbeatSubCommentForm.
+ *
+ * @package Drupal\heartbeat\Form
+ */
+class HeartbeatSubCommentForm extends FormBase {
+  protected $entityId;
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return 'heartbeat_sub_comment_form';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildForm(array $form, FormStateInterface $form_state) {
+    $form['comment_body'] = array(
+      '#type' => 'textarea',
+      '#title' => $this->t('Comment Body'),
+    );
+
+    $form['post'] = array(
+      '#type' => 'submit',
+      '#description' => 'Comment',
+      '#value' => t('Comment'),
+      '#ajax' => [
+        'callback' => '::commentAjaxSubmit',
+        'progress' => array(
+          'type' => 'throbber',
+          'message' => t('Posting Comment'),
+        ),
+      ]
+    );
+
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function commentAjaxSubmit(array &$form, FormStateInterface $form_state) {
+
+    if (\Drupal::currentUser()->isAuthenticated()) {
+      $commentBody = $form_state->getValue('comment_body');
+      $config = \Drupal::config('heartbeat_comment.settings');
+
+
+      $comment = Comment::create([
+        'entity_type' => 'comment',
+        'entity_id' => $config->get('cid'),
+        'pid' => $config->get('cid'),
+        'field_name' => 'comment',
+        'comment_body' => $commentBody,
+        'comment_type' => 'comment',
+        'subject' => 'Heartbeat Comment',
+        'uid' => \Drupal::currentUser()->id(),
+      ]);
+
+      if ($comment->save()) {
+$userview= user_view($comment->getOwner(), 'comment');
+$cid = $comment->id();
+$body = $commentBody;
+        $response = new AjaxResponse();
+        $response->addCommand(new AppendCommand(
+          '#heartbeat-comment-' . $config->get('cid') . ' .sub-comment',
+          '<div id="sub-comment-' . $comment->id() . '"><span class="comment-owner"><span class="comment-username">' . \Drupal::currentUser()->getAccountName() . '</span>' . render($userview) . '<span class"comment-ago">1 sec ago</span></span><span class="comment-body">' . $commentBody . '</span></div>')
+        );
+
+        return $response;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+
+  }
+
+}

src/Plugin/Block/HeartbeatBlock.php

@@ -6,6 +6,8 @@ use Drupal\Core\Block\BlockBase;
 use Drupal\Core\Config\ConfigFactory;
 use Drupal\Core\Entity\EntityTypeManager;
 use Drupal\Core\Form\FormBuilder;
+use Drupal\Core\Link;
+use Drupal\Core\Url;
 use Drupal\flag\FlagService;
 use Drupal\comment\Entity\Comment;
 use Drupal\User\Entity\User;
@@ -61,6 +63,8 @@ class HeartbeatBlock extends BlockBase implements ContainerFactoryPluginInterfac
 
   protected $configFactory;
 
+  protected $timestamp;
+
   /**
    * Construct.
    *
@@ -88,6 +92,7 @@ class HeartbeatBlock extends BlockBase implements ContainerFactoryPluginInterfac
     $this->flagService = $flag_service;
     $this->formBuilder = $form_builder;
     $this->configFactory = $configFactory;
+    $this->timestamp = time();
   }
   /**
    * {@inheritdoc}
@@ -169,8 +174,20 @@ class HeartbeatBlock extends BlockBase implements ContainerFactoryPluginInterfac
     }
 
     private function renderMessage(array &$messages, $heartbeat) {
+      $timeago = null;
+      $diff = $this->timestamp - $heartbeat->getCreatedTime();
+      switch (true) {
+        case ($diff < 86400):
+          $timeago = $this->dateFormatter->formatInterval(REQUEST_TIME - $heartbeat->getCreatedTime()) . ' ago';
+          break;
+        case ($diff >= 86400 && $diff < 172800):
+          $timeago = 'Yesterday at ' . $this->dateFormatter->format($heartbeat->getCreatedTime(), 'heartbeat_time');
+          break;
+        case ($diff >= 172800):
+          $timeago = $this->dateFormatter->format($heartbeat->getCreatedTime(), 'heartbeat_medium');
+          break;
+      }
 
-      $timeago = $this->dateFormatter->formatInterval(REQUEST_TIME - $heartbeat->getCreatedTime());
       $user = $heartbeat->getOwner();
 //      $rendered = $this->entityTypeManager->getViewBuilder('user')->view($user, 'full');
       $userView = user_view($user, 'compact');
@@ -205,29 +222,108 @@ class HeartbeatBlock extends BlockBase implements ContainerFactoryPluginInterfac
 
       foreach($cids as $cid) {
 
+        $url = Url::fromRoute('heartbeat.sub_comment_request', array('cid' => $cid));
+        $commentLink = Link::fromTextAndUrl(t('Reply'), $url);
+        $commentLink = $commentLink->toRenderable();
+        $commentLink['#attributes'] = array('class' => array('button', 'button-action', 'use-ajax'));
+
         $comment = Comment::load($cid);
+        $commentLike = $this->flagService->getFlagById('heartbeat_like_comment');
+        $commentLikeKey = 'flag_' . $commentLike->id();
+        $commentLikeData = [
+          '#lazy_builder' => ['flag.link_builder:build', [
+            $comment->getEntityTypeId(),
+            $comment->id(),
+            $commentLike->id(),
+          ]],
+          '#create_placeholder' => TRUE,
+        ];
 
         $commentOwner = user_view($comment->getOwner(), 'comment');
+
+        $subCids = \Drupal::entityQuery('comment')
+          ->condition('entity_id', $cid)
+          ->condition('entity_type', 'comment')
+          ->sort('cid', 'ASC')
+          ->execute();
+
+        $subComments = [];
+        if (count($subCids) > 0) {
+          foreach ($subCids as $subCid) {
+            $subComment = Comment::load($subCid);
+
+            $subDiff = $this->timestamp - $subComment->getCreatedTime();
+
+            switch (true) {
+              case ($subDiff < 86400):
+                $timeago = $this->dateFormatter->formatInterval(REQUEST_TIME - $subComment->getCreatedTime()) . ' ago';
+                break;
+              case ($subDiff >= 86400 && $subDiff < 172800):
+                $timeago = 'Yesterday at ' . $this->dateFormatter->format($subComment->getCreatedTime(), 'heartbeat_time');
+                break;
+              case ($subDiff >= 172800):
+                $timeago = $this->dateFormatter->format($subComment->getCreatedTime(), 'heartbeat_medium');
+                break;
+            }
+
+
+            $subCommentLike = $this->flagService->getFlagById('heartbeat_like_comment');
+            $subCommentLikeKey = 'flag_' . $subCommentLike->id();
+            $subCommentLikeData = [
+              '#lazy_builder' => ['flag.link_builder:build', [
+                $subComment->getEntityTypeId(),
+                $subComment->id(),
+                $subCommentLike->id(),
+              ]],
+              '#create_placeholder' => TRUE,
+            ];
+
+            $subCommentOwner = user_view($subComment->getOwner(), 'comment');
+            $subCommentTime = $this->timestamp - $subComment->getCreatedTime() < 172800 ? $this->dateFormatter->formatInterval(REQUEST_TIME - $subComment->getCreatedTime()) . ' ago': $this->dateFormatter->format($subComment->getCreatedTime(), 'heartbeat_medium');
+            $subComments[] = [
+              'id' => $subCid,
+              'body' => $subComment->get('comment_body')->value,
+              'username' => $subComment->getAuthorName(),
+              'owner' => $subCommentOwner,
+              'timeAgo' => $subCommentTime,
+              'commentLike' => [$subCommentLikeKey => $subCommentLikeData],
+            ];
+
+          }
+        }
+
+        $commentTimeDiff = $this->timestamp - $comment->getCreatedTime();
+
+        switch (true) {
+          case ($commentTimeDiff < 86400):
+            $cTimeago = $this->dateFormatter->formatInterval(REQUEST_TIME - $comment->getCreatedTime()) . ' ago';
+            break;
+          case ($commentTimeDiff >= 86400 && $commentTimeDiff < 172800):
+            $cTimeago = 'Yesterday at ' . $this->dateFormatter->format($comment->getCreatedTime(), 'heartbeat_time');
+            break;
+          case ($commentTimeDiff >= 172800):
+            $cTimeago = $this->dateFormatter->format($comment->getCreatedTime(), 'heartbeat_medium');
+            break;
+        }
+
         $comments[] = [
           'id' => $cid,
           'body' => $comment->get('comment_body')->value,
           'username' => $comment->getAuthorName(),
           'owner' => $commentOwner,
-          'timeAgo' => $this->dateFormatter->formatInterval(REQUEST_TIME - $comment->getCreatedTime())
+          'timeAgo' => $cTimeago,
+          'commentLike' => [$commentLikeKey => $commentLikeData],
+          'reply' => $commentLink,
+          'subComments' => $subComments
         ];
 
       }
 
-//      $heartbeatCommentBlock = \Drupal\block\Entity\Block::load('heartbeatcommentblock');
-//      $commentForm = $this->entityTypeManager->getViewBuilder('block')
-//        ->view($heartbeatCommentBlock);
-
       $form = \Drupal::service('form_builder')->getForm('\Drupal\heartbeat\Form\HeartbeatCommentForm', $heartbeat);
 
       $likeFlag = $this->flagService->getFlagById('heartbeat_like');
       $unlikeFlag = $this->flagService->getFlagById('jihad_flag');
 
-
       $unlikeKey = 'flag_' . $unlikeFlag->id();
       $unlikeData = [
         '#lazy_builder' => ['flag.link_builder:build', [

src/Plugin/Block/HeartbeatHashBlock.php

@@ -201,6 +201,16 @@ class HeartbeatHashBlock extends BlockBase implements ContainerFactoryPluginInte
     foreach($cids as $cid) {
 
       $comment = Comment::load($cid);
+      $commentLike = $this->flagService->getFlagById('heartbeat_like_comment');
+      $commentLikeKey = 'flag_' . $commentLike->id();
+      $commentLikeData = [
+        '#lazy_builder' => ['flag.link_builder:build', [
+          $comment->getEntityTypeId(),
+          $comment->id(),
+          $commentLike->id(),
+        ]],
+        '#create_placeholder' => TRUE,
+      ];
 
       $commentOwner = user_view($comment->getOwner(), 'comment');
       $comments[] = [
@@ -208,7 +218,8 @@ class HeartbeatHashBlock extends BlockBase implements ContainerFactoryPluginInte
         'body' => $comment->get('comment_body')->value,
         'username' => $comment->getAuthorName(),
         'owner' => $commentOwner,
-        'timeAgo' => $this->dateFormatter->formatInterval(REQUEST_TIME - $comment->getCreatedTime())
+        'timeAgo' => $this->dateFormatter->formatInterval(REQUEST_TIME - $comment->getCreatedTime()),
+        'commentLike' => [$commentLikeKey => $commentLikeData],
       ];
 
     }

src/Plugin/Block/HeartbeatMoreBlock.php

@@ -196,6 +196,16 @@ class HeartbeatMoreBlock extends BlockBase implements ContainerFactoryPluginInte
     foreach($cids as $cid) {
 
       $comment = Comment::load($cid);
+      $commentLike = $this->flagService->getFlagById('heartbeat_like_comment');
+      $commentLikeKey = 'flag_' . $commentLike->id();
+      $commentLikeData = [
+        '#lazy_builder' => ['flag.link_builder:build', [
+          $comment->getEntityTypeId(),
+          $comment->id(),
+          $commentLike->id(),
+        ]],
+        '#create_placeholder' => TRUE,
+      ];
 
       $commentOwner = user_view($comment->getOwner(), 'comment');
       $comments[] = [
@@ -203,7 +213,8 @@ class HeartbeatMoreBlock extends BlockBase implements ContainerFactoryPluginInte
         'body' => $comment->get('comment_body')->value,
         'username' => $comment->getAuthorName(),
         'owner' => $commentOwner,
-        'timeAgo' => $this->dateFormatter->formatInterval(REQUEST_TIME - $comment->getCreatedTime())
+        'timeAgo' => $this->dateFormatter->formatInterval(REQUEST_TIME - $comment->getCreatedTime()),
+        'commentLike' => [$commentLikeKey => $commentLikeData],
       ];
 
     }

src/Plugin/Block/HeartbeatSubCommentBlock.php

@@ -0,0 +1,86 @@
+<?php
+
+namespace Drupal\heartbeat\Plugin\Block;
+
+use Drupal\Core\Block\BlockBase;
+use Drupal\Core\Entity\EntityTypeManager;
+use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Drupal\Core\Form\FormBuilder;
+
+/**
+ * Provides a 'HeartbeatSubCommentBlock' block.
+ *
+ * @Block(
+ *  id = "heartbeat_sub_comment_block",
+ *  admin_label = @Translation("Heartbeat sub comment block"),
+ * )
+ */
+class HeartbeatSubCommentBlock extends BlockBase implements ContainerFactoryPluginInterface {
+
+  /**
+   * Drupal\Core\Form\FormBuilder definition.
+   *
+   * @var Drupal\Core\form\FormBuilder
+   */
+  protected $form_builder;
+  protected $entityId;
+  protected $config;
+  protected $entityTypeManager;
+
+  /**
+   * Construct.
+   *
+   * @param array $configuration
+   *   A configuration array containing information about the plugin instance.
+   * @param string $plugin_id
+   *   The plugin_id for the plugin instance.
+   * @param string $plugin_definition
+   *   The plugin implementation definition.
+   */
+  public function __construct(
+    array $configuration,
+    $plugin_id,
+    $plugin_definition,
+    FormBuilder $form_builder,
+    EntityTypeManager $entity_type_manager
+  ) {
+    parent::__construct($configuration, $plugin_id, $plugin_definition);
+    $this->form_builder = $form_builder;
+    $this->entityTypeManager = $entity_type_manager;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
+    return new static(
+      $configuration,
+      $plugin_id,
+      $plugin_definition,
+      $container->get('form_builder'),
+      $container->get('entity_type.manager')
+    );
+  }
+
+
+
+  /**
+   * {@inheritdoc}
+   */
+  public function build() {
+
+    if ($this->entityTypeManager !== null) {
+      $comment = $this->entityTypeManager->getStorage('comment')->load(\Drupal::config('heartbeat_comment.settings')->get('cid'));
+
+      return $this->form_builder->getForm('\Drupal\heartbeat\Form\HeartbeatSubCommentForm', $comment);
+    }
+
+    return null;
+  }
+
+  public function setEntityId($id) {
+    $this->entityId = $id;
+  }
+
+}

templates/heartbeat-stream.html.twig

@@ -27,7 +27,7 @@
         <div class="heartbeat-owner">
           <a href="/user/{{ message.userId }}"><img src="{{ message.userPicture }}" /></a>
           {{ message.user }}
-          <div class="time-ago">{{ message.timeAgo }} ago</div>
+          <div class="time-ago">{{ message.timeAgo }}</div>
         </div>
         <div class="heartbeat-content">
         {{ message.heartbeat }}
@@ -44,8 +44,19 @@
           <div class="heartbeat-comments">
             {% for comment in message.comments %}
               <div id="heartbeat-comment-{{ comment.id }}">
-                <span class="comment-owner"><span class="comment-username">{{ comment.username }}</span>{{ comment.owner }}<span class="comment-ago">{{ comment.timeAgo }} ago</span></span>
+                <span class="comment-owner"><span class="comment-username">{{ comment.username }}</span>{{ comment.owner }}<span class="comment-ago">{{ comment.timeAgo }}</span>
+                <span class="comment-like">{{ comment.commentLike}}</span></span>
                 <span class="comment-body">{{ comment.body }}</span>
+                <span class ="sub-comment">
+                  {% for subComment in comment.subComments %}
+                  <div class="heartbeat-subcomment" id="sub-comment-{{ subComment.id }}">
+                    <span class="sub-comment-owner"><span class="sub-comment-username">{{ subComment.username }}</span>{{ subComment.owner }}<span class="sub-comment-ago">{{ subComment.timeAgo }}</span>
+                <span class="sub-comment-like">{{ subComment.commentLike}}</span></span>
+                <span class="sub-comment-body">{{ subComment.body }}</span>
+                  </div>
+                  {% endfor %}
+                  {{ comment.reply }}
+                </span>
               </div>
             {% endfor %}
           </div>