Complete update to Heartbeat including functionality for username filtering and friend filter block

config/install/heartbeat.friendsearch.yml

@@ -0,0 +1,2 @@
+heartbeat:
+  category: "1"

config/schema/heartbeat.schema.yml

@@ -101,6 +101,14 @@ heartbeat_hashtag.config:
       type: integer
       label: 'The Taxonomy term to be used when filtering a Heartbeat Stream'
 
+heartbeat_username.config:
+  type: config_object
+  label: 'Username selections'
+  mapping:
+    tid:
+      type: integer
+      label: 'The Taxonomy term to be used when filtering a Heartbeat Stream'
+
 heartbeat_more.config:
   type: config_object
   label: 'Parameter for fetching more heartbeats'
@@ -119,3 +127,11 @@ heartbeat_comment.config:
     cid:
       type: integer
       label: 'The ID of the Comment being commented on'
+
+heartbeat_friend_interact.config:
+  type: config_object
+  label: 'Friend Interaction Configuration'
+  mapping:
+    uid:
+      type: integer
+      label: 'The ID of the user being interacted with'

css/heartbeat.css

@@ -27,6 +27,10 @@
   display: none;
 }
 
+.heartbeat-comments > div {
+  margin-top: 4em;
+}
+
 .heartbeat-comments-visible {
   display: block!important;
 }

heartbeat.module

@@ -61,6 +61,14 @@ function heartbeat_theme() {
       'zilla' => 2,
     )
   ];
+  $theme['friend_interaction'] = [
+    'variables' => array(
+      'user' => NULL,
+      'flag' => NULL,
+      'userPic' => NULL,
+      'testing' => 'testing yo',
+    )
+  ];
   return $theme;
 }
 
@@ -167,6 +175,7 @@ function heartbeat_entity_insert(EntityInterface $entity) {
 
       break;
     case $entity instanceof \Drupal\flag\Entity\Flag:
+
       break;
 
     case $entity instanceof \Drupal\statusmessage\Entity\Status:
@@ -476,11 +485,6 @@ function heartbeat_update_type_weight() {
  * Implements hook_page_attachments_alter().
  */
 function heartbeat_page_attachments_alter(array &$attachments) {
-
-  $jigganull  = 'naul';
-  $jiagganull  = 'naul';
-  $mattachments = $attachments;
-
   $attachments['#attached']['library'][] = 'heartbeat/heartbeat';
 }
 
@@ -499,5 +503,5 @@ function heartbeat_link_alter(&$variables) {
  * Implements hook_form_alter().
  */
 function heartbeat_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
-
+  $form['#attached']['drupalSettings']['admin'] = in_array('administrator', \Drupal::currentUser()->getRoles());
 }

heartbeat.routing.yml

@@ -95,7 +95,7 @@ heartbeat.render_feed:
     _title: 'Render Feed'
   requirements:
     _permission: 'access content'
-
+#This should probably be associated with the word more or add
 heartbeat.update_feed:
   path: '/heartbeat/update_feed/{hid}'
   defaults:
@@ -120,6 +120,15 @@ heartbeat.heartbeat_filter_feed:
   requirements:
     _access: 'TRUE'
 
+
+heartbeat.heartbeat_user_filter_feed:
+  path: '/heartbeat/filter-feed/username/{tid}'
+  defaults:
+    _controller: '\Drupal\heartbeat\Controller\HeartbeatController::userFilterFeed'
+    _title: 'Heartbeat User Filter Feed'
+  requirements:
+    _access: 'TRUE'
+
 heartbeat.heartbeat_comment_update:
   path: '/heartbeat/commentupdate/{entity_id}'
   defaults:
@@ -171,3 +180,19 @@ heartbeat.flag_controller:
   methods: [POST]
   requirements:
     _permission: 'access content'
+
+heartbeat.friend_search_form:
+  path: '/heartbeat/form/friend_search'
+  defaults:
+    _form: '\Drupal\heartbeat\Form\FriendSearchForm'
+    _title: 'FriendSearchForm'
+  requirements:
+    _access: 'TRUE'
+
+heartbeat.friend_interact:
+  path: '/heartbeat/friend_interact/{uid}'
+  defaults:
+    _controller: '\Drupal\heartbeat\Controller\HeartbeatController::friendInteract'
+    _title: 'Interact with a potential friend'
+  requirements:
+    _permission: 'access content'

heartbeat.services.yml

@@ -15,9 +15,6 @@ services:
     class: Drupal\heartbeat\HeartbeatService
     arguments: ['@entity_type.manager', '@entity.query', '@heartbeatstream']
 
-#  friendship:
-#    class: Drupal\heartbeat\FriendshipService
-#    arguments:
 
   heartbeat.event:
     class: Drupal\heartbeat\EventSubscriber\HeartbeatEventSubscriber
@@ -29,3 +26,12 @@ services:
     class: Drupal\heartbeat\Routing\HeartbeatRouteSubscriber
     tags:
       - { name: event_subscriber }
+
+  heartbeat_autocomplete.route_subscriber:
+    class: Drupal\heartbeat\Routing\HeartbeatAutocompleteSubscriber
+    tags:
+      - { name: event_subscriber }
+
+  heartbeat_autocomplete.autocomplete_matcher:
+    class: Drupal\heartbeat\HeartbeatAutocompleteMatcher
+    arguments: ['@plugin.manager.entity_reference_selection']

heartbeat.views.inc

@@ -173,24 +173,36 @@ function heartbeat_views_data() {
  */
 function heartbeat_views_query_alter(ViewExecutable $view, QueryPluginBase $query) {
 
-  $thisstuff = 'stuff';
 
-  if ($view->id() == 'heartbeat_friendship') {
-    $thisjigga = null;
-//
-//    LEFT JOIN {two} ON one.field_a = two.field_b
-//Use this configuration:
+  switch ($view->id()) {
+    case 'heartbeat_friendship':
 
-    $configuration = array(
-      'table' => 'users_field_data',
-      'field' => 'uid',
-      'left_table' => 'heartbeat_friendship',
-      'left_field' => 'uid_target',
-      'operator' => '=',
-    );
-    $join = Views::pluginManager('join')->createInstance('standard', $configuration);
-    $query->addRelationship('users_target', $join);
 
+      $configuration = array(
+        'table' => 'users_field_data',
+        'field' => 'uid',
+        'left_table' => 'heartbeat_friendship',
+        'left_field' => 'uid_target',
+        'operator' => '=',
+      );
+      $join = Views::pluginManager('join')->createInstance('standard', $configuration);
+      $query->addRelationship('users_target', $join);
+      break;
+
+    case 'user_friends':
+
+      $friendData = \json_decode(\Drupal::config('heartbeat_friendship.settings')->get('data'));
+      $friendUids = [];
+
+      foreach ($friendData as $data) {
+        $friendUids[] = $data->uid;
+        $friendUids[] = $data->uid_target;
+      }
+
+      $query->addWhere('AND', 'users_field_data.uid', \Drupal::currentUser()->id(), '!=');
+      $query->addWhere('AND', 'users_field_data.uid', array_unique($friendUids), 'IN');
+
+      break;
   }
 }
 

js/heartbeat.js

@@ -3,6 +3,7 @@
  */
 
 (function($, Drupal, drupalSettings) {
+  drupalSettings.requestInProgress = false;
 
   const flagListen = function(e) {
 
@@ -27,6 +28,48 @@
     });
   };
 
+  const addWindowScrollListener = function() {
+    if (drupalSettings.filterMode == false &&
+      (getScrollXY()[1] + window.innerHeight) / getDocHeight() > 0.99 &&
+      !drupalSettings.requestInProgress) {
+
+      drupalSettings.requestInProgress = true;
+      let streams = document.querySelectorAll('.heartbeat-stream');
+      let stream = streams.length > 1 ? streams[streams.length - 1] : streams[0];
+
+      if (stream !== null) {
+        let lastHeartbeat = stream.lastElementChild;
+
+        if (lastHeartbeat !== null) {
+
+          let hid = lastHeartbeat.id.substring(lastHeartbeat.id.indexOf('-') + 1);
+          if (drupalSettings.lastHid !== hid) {
+            drupalSettings.lastHid = hid;
+            $('#heartbeat-loader').show(225);
+
+            $.ajax({
+              type: 'POST',
+              url: '/heartbeat/update_feed/' + hid,
+
+              success: function (response) {
+                feedBlock = document.getElementById('block-heartbeatblock')
+                insertNode = document.createElement('div')
+                insertNode.innerHTML = response
+                feedBlock.appendChild(insertNode)
+                Drupal.attachBehaviors()
+              },
+
+              complete: function () {
+                $('#heartbeat-loader').hide(225);
+                drupalSettings.requestInProgress = false;
+              }
+            });
+          }
+        }
+      }
+    }
+  };
+
   function updateFeed() {
     $.ajax({
       type: 'POST',
@@ -39,9 +82,6 @@
 
   function listenImages() {
     let cboxOptions = { maxWidth: '960px', maxHeight: '960px' };
-    let images = document.querySelectorAll('.heartbeat-content img');
-
-    console.dir(images);
 
     $('.heartbeat-content').find('img').each(function () {
       let parentClass = $(this).parent().prop('className');
@@ -62,7 +102,6 @@
   }
 
   function commentFormListeners() {
-    console.log('Comment Form Listeners');
     let cFormButtons = document.querySelectorAll('.heartbeat-comment-button');
 
     for (let b = 0; b < cFormButtons.length; b++) {
@@ -73,13 +112,7 @@
 
   function flagListeners() {
 
-    if (arguments[0] !== null && arguments.constructor !== Array) {
-      //noinspection JSValidateTypes
-      arguments = [arguments[0]];
-    }
-
     let flags = arguments[0] == undefined ? document.querySelectorAll('.flag .use-ajax') : arguments[0];
-    console.log("Reloading FLAG LISTENERS");
 
     if (flags.constructor === NodeList) {
       for (let f = 0; f < flags.length; f++) {
@@ -118,15 +151,12 @@
   function getScrollXY() {
     let scrOfX = 0, scrOfY = 0;
     if (typeof( window.pageYOffset ) == 'number') {
-
       scrOfY = window.pageYOffset;
       scrOfX = window.pageXOffset;
     } else if (document.body && ( document.body.scrollLeft || document.body.scrollTop )) {
-
       scrOfY = document.body.scrollTop;
       scrOfX = document.body.scrollLeft;
     } else if (document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop )) {
-
       scrOfY = document.documentElement.scrollTop;
       scrOfX = document.documentElement.scrollLeft;
     }
@@ -143,59 +173,65 @@
     );
   }
 
-  Drupal.AjaxCommands.prototype.selectFeed = function (ajax, response, status) {
-    $.ajax({
-      type: 'POST',
-      url: '/heartbeat/render_feed/' + response.feed,
-      success: function (response) {
-        feedElement = document.querySelector('.heartbeat-stream');
-
-        if (feedElement != null) {
-          feedElement.innerHTML = response;
-        } else {
-          feedBlock = document.getElementById('block-heartbeatblock');
-          insertNode = document.createElement('div');
-          insertNode.innerHTML = response;
-          feedBlock.appendChild(insertNode);
-        }
-      }
-    });
-  };
-
-  Drupal.AjaxCommands.prototype.updateFeed = function (ajax, response, status) {
-    if (response.update) {
+  if (drupalSettings.user.uid > 0 && !drupalSettings.path.currentPathIsAdmin) {
+    Drupal.AjaxCommands.prototype.selectFeed = function (ajax, response, status) {
       $.ajax({
         type: 'POST',
-        url: '/heartbeat/update_feed/' + response.timestamp,
+        url: '/heartbeat/render_feed/' + response.feed,
         success: function (response) {
-
+          feedElement = document.querySelector('.heartbeat-stream');
+
+          if (feedElement != null) {
+            feedElement.innerHTML = response;
+          } else {
+            feedBlock = document.getElementById('block-heartbeatblock');
+            insertNode = document.createElement('div');
+            insertNode.innerHTML = response;
+            feedBlock.appendChild(insertNode);
+          }
+          Drupal.attachBehaviors();
         }
       });
-    }
-  };
+    };
 
-  Drupal.AjaxCommands.prototype.myfavouritemethodintheworld = function (ajax, response, status) {
-    console.dir(response);
-    if (response.cid) {
-      console.log('this shit is getting called again');
-      let parentComment = document.getElementById('heartbeat-comment-' + response.cid);
-      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();
-        }
-      });
-    }
-  };
+    Drupal.AjaxCommands.prototype.updateFeed = function (ajax, response, status) {
+      if (response.update) {
+        $.ajax({
+          type: 'POST',
+          url: '/heartbeat/update_feed/' + response.timestamp,
+          success: function (response) {
+
+          }
+        });
+      }
+    };
+
+    Drupal.AjaxCommands.prototype.myfavouritemethodintheworld = function (ajax, response, status) {
+      console.dir(response);
+      if (response.cid) {
+        console.log('this shit is getting called again');
+        let parentComment = document.getElementById('heartbeat-comment-' + response.cid);
+        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();
+          }
+        });
+      }
+    };
+  }
 
   function hideCommentForms() {
     let forms = document.querySelectorAll('.heartbeat-comment-form .js-form-type-textarea, .heartbeat-comment-form .form-submit');
 
     for (let f = 0; f < forms.length; f++) {
-      forms[f].className += ' comment-form-hidden';
+      console.log('adding hidden class to comment form');
+      if (!forms[f].classList.contains('comment-form-hidden')) {
+        forms[f].className += ' comment-form-hidden';
+      }
     }
   }
 
@@ -230,6 +266,7 @@
       },
       complete: function () {
         $('#heartbeat-loader').hide(225);
+        Drupal.attachBehaviors()
       }
     });
   }
@@ -285,6 +322,7 @@
       }
       listenImages();
       listenCommentPost();
+      commentFormListeners();
       feedElement = document.querySelector('.heartbeat-stream');
 
       if (drupalSettings.feedUpdate == true) {
@@ -300,27 +338,27 @@
     const body = document.getElementsByTagName('body')[0];
     body.appendChild(loader);
 
-    commentFormListeners();
     flagListeners();
 
     let stream = document.getElementById('block-heartbeatblock');
 
-    let observer = new MutationObserver(function (mutations) {
-      console.log('observer observes a change');
-      listenImages();
-      hideCommentForms();
-      commentFormListeners();
-      flagListeners();
-      listenVideos();
-      listenWindowScroll();
-    });
-
-    let config = {attributes: true, childList: true, characterData: true};
+    if (stream !== null) {
+      let observer = new MutationObserver(function (mutations) {
+        console.log('observer observes a change');
+        // Drupal.attachBehaviors();
+        // listenImages();
+        hideCommentForms();
+        // commentFormListeners();
+        // flagListeners();
+        // listenVideos();
+      });
 
-    observer.observe(stream, config);
+      let config = {attributes: true, childList: true, characterData: true};
+      observer.observe(stream, config);
+    }
 
     let flagObserver = new MutationObserver(function(mutations) {
-      console.dir(mutations);
+      console.log('observer observes a change');
       if (mutations[0].target !== null && mutations[0].target.children !== null && mutations[0].target.children.length > 0 && mutations[0].target.children[0].classList.contains('flag')) {
         flagListeners();
       }
@@ -334,49 +372,8 @@
       flagObserver.observe(flag, flagObserveConfig);
     });
 
-
-
-    document.addEventListener("scroll", function (event) {
-
-      if (drupalSettings.filterMode == false && (getScrollXY()[1] + window.innerHeight) / getDocHeight() > 0.99) {
-
-        let streams = document.querySelectorAll('.heartbeat-stream');
-        let stream = streams.length > 1 ? streams[streams.length - 1] : streams[0];
-
-        if (stream !== null) {
-          console.dir(stream);
-          let lastHeartbeat = stream.lastElementChild;
-
-          if (lastHeartbeat !== null) {
-
-            let hid = lastHeartbeat.id.substring(lastHeartbeat.id.indexOf('-') + 1);
-            if (drupalSettings.lastHid !== hid) {
-
-              drupalSettings.lastHid = hid;
-
-              $('#heartbeat-loader').show(225);
-
-              $.ajax({
-                type: 'POST',
-                url: '/heartbeat/update_feed/' + hid,
-
-                success: function (response) {
-
-                  feedBlock = document.getElementById('block-heartbeatblock');
-                  insertNode = document.createElement('div');
-                  insertNode.innerHTML = response;
-                  feedBlock.appendChild(insertNode)
-                },
-
-                complete: function () {
-                  $('#heartbeat-loader').hide(225);
-                }
-              });
-            }
-          }
-        }
-      }
-    });
+    document.removeEventListener('scroll', addWindowScrollListener);
+    document.addEventListener('scroll', addWindowScrollListener);
 
     $(document).on('cbox_open', function () {
         $("#colorbox").swipe({
@@ -404,4 +401,3 @@
     );
   })
 })(jQuery, Drupal, drupalSettings);
-

src/Controller/FlagController.php

@@ -7,6 +7,7 @@ use Drupal\Core\Entity\EntityTypeManager;
 use Drupal\Core\Entity\Query\QueryFactory;
 use Symfony\Component\DependencyInjection\ContainerInterface;
 use Drupal\flag\FlagService;
+use Drupal\flag\Entity\Flag;
 use Symfony\Component\HttpFoundation\Response;
 
 /**
@@ -55,26 +56,52 @@ class FlagController extends ControllerBase {
     $entity_type = \Drupal::request()->request->get('entity_type');
     $entity_id = \Drupal::request()->request->get('entity_id');
     $flag_id = \Drupal::request()->request->get('flag_id');
-    $uid = \Drupal::request()->request->get('uid');;
-    $flaggedByUser = $this->entityQuery->get("flagging")
-      ->condition("flag_id", $flag_id, "=")
-      ->condition("entity_type", $entity_type, "=")
-      ->condition("entity_id", $entity_id)
-      ->condition("uid", $uid, "=")
-      ->execute();
+    $alt_flag_id = $flag_id === 'heartbeat_like' ? 'jihad_flag' : 'heartbeat_like';
+//      $flag_id === 'jihad_flag' ? 'heartbeat_like' : null;
+
+    $uid = \Drupal::request()->request->get('uid');
+
     $response = new Response();
+
+    $altResponseData = null;
+
+    if ($flag_id !== null) {
+
+      $responseData =
+              $this->entityQuery->get("flagging")
+                ->condition("flag_id", $flag_id, "=")
+                ->condition("entity_type", $entity_type, "=")
+                ->condition("entity_id", $entity_id)
+                ->condition("uid", $uid, "=")
+                ->execute() > 0;
+
+      if (!$responseData) {
+
+        $altResponseData =
+          $this->entityQuery->get("flagging")
+            ->condition("flag_id", $alt_flag_id, "=")
+            ->condition("entity_type", $entity_type, "=")
+            ->condition("entity_id", $entity_id)
+            ->condition("uid", $uid, "=")
+            ->execute() > 0;
+      }
+    } else {
+      $responseData = null;
+      $altResponseData = null;
+    }
+
+    if (!$responseData && $altResponseData) {
+      $altFlag = $this->flagService->getFlagById($alt_flag_id);
+      $entity = $this->entityTypeManager->getStorage($entity_type)->load($entity_id);
+      $this->flagService->unflag($altFlag, $entity, \Drupal::currentUser()->getAccount());
+    }
+
     $response->setContent(json_encode(array(
-      'flaggedByUser' => count(
-        $this->entityQuery->get("flagging")
-          ->condition("flag_id", $flag_id, "=")
-          ->condition("entity_type", $entity_type, "=")
-          ->condition("entity_id", $entity_id)
-          ->condition("uid", $uid, "=")
-            ->execute()) > 0)
-    ));
+      'flagged' => $responseData,
+      'alt_flagged' => $altResponseData)));
 
     $response->headers->set('Content-Type', 'application/json');
+
     return $response;
   }
-
 }

src/Controller/HeartbeatAutocompleteController.php

@@ -1,7 +1,31 @@
 <?php
-/**
- * Created by IntelliJ IDEA.
- * User: logicp
- * Date: 9/5/17
- * Time: 11:20 PM
- */
+
+namespace Drupal\heartbeat\Controller;
+
+use Drupal\Core\KeyValueStore\KeyValueStoreInterface;
+use Drupal\heartbeat\HeartbeatAutocompleteMatcher;
+use Drupal\system\Controller\EntityAutocompleteController;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+class HeartbeatAutocompleteController extends EntityAutocompleteController {
+  /**
+   * The autocomplete matcher for entity references.
+   */
+  protected $matcher;
+  /**
+   * {@inheritdoc}
+   */
+  public function __construct(HeartbeatAutocompleteMatcher $matcher, KeyValueStoreInterface $key_value) {
+    $this->matcher = $matcher;
+    $this->keyValue = $key_value;
+  }
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container->get('heartbeat_autocomplete.autocomplete_matcher'),
+      $container->get('keyvalue')->get('entity_autocomplete')
+    );
+  }
+}

src/Controller/HeartbeatController.php

@@ -5,13 +5,17 @@ namespace Drupal\heartbeat\Controller;
 use Drupal\block\BlockViewBuilder;
 use Drupal\Component\Utility\Xss;
 use Drupal\Core\Ajax\AppendCommand;
+use Drupal\Core\Block\BlockManager;
 use Drupal\Core\Controller\ControllerBase;
 use Drupal\Core\DependencyInjection\ContainerInjectionInterface;
 use Drupal\Core\Render\Element\Ajax;
+use Drupal\Core\Render\Renderer;
+use Drupal\Core\Routing\RoutingEvents;
 use Drupal\Core\Url;
 use Drupal\Core\Ajax\AjaxResponse;
 use Drupal\heartbeat\Ajax\SubCommentCommand;
 use Drupal\heartbeat\Entity\HeartbeatInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
 
 /**
  * Class HeartbeatController.
@@ -20,8 +24,32 @@ use Drupal\heartbeat\Entity\HeartbeatInterface;
  *
  * @package Drupal\heartbeat\Controller
  */
-class HeartbeatController extends ControllerBase implements ContainerInjectionInterface {
+class HeartbeatController extends ControllerBase {
 
+  private $renderer;
+  private $blockManager;
+
+  /**
+   * @param ContainerInterface $container
+   * @return static
+   */
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container->get('renderer'),
+      $container->get('plugin.manager.block')
+    );
+  }
+
+  /**
+   * HeartbeatController constructor.
+   * @param Renderer $renderer
+   * @param BlockManager $block_manager
+   */
+
+  public function __construct(Renderer $renderer, BlockManager $block_manager) {
+    $this->renderer = $renderer;
+    $this->blockManager = $block_manager;
+  }
   /**
    * Displays a Heartbeat  revision.
    *
@@ -177,19 +205,39 @@ class HeartbeatController extends ControllerBase implements ContainerInjectionIn
 
 
   public function updateFeed($hid) {
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       $myConfig = \Drupal::service('config.factory')->getEditable('heartbeat_more.settings');
+    $myConfig = \Drupal::service('config.factory')->getEditable('heartbeat_more.settings');
     $myConfig->set('hid', $hid)->save();
-
-    return BlockViewBuilder::lazyBuilder('heartbeatmoreblock', 'full');
+    $block = $this->blockManager->createInstance('heartbeat_more_block')->build();
+    return [
+      '#type' => 'markup',
+      '#markup' => $this->renderer->render($block)
+    ];
   }
 
   public function filterFeed($tid) {
     $myConfig = \Drupal::service('config.factory')->getEditable('heartbeat_hashtag.settings');
     $myConfig->set('tid', $tid)->save();
-    $block = BlockViewBuilder::lazyBuilder('heartbeathashblock', 'teaser');
-    return BlockViewBuilder::lazyBuilder('heartbeathashblock', 'teaser');
+    $block = $this->blockManager->createInstance('heartbeat_hash_block')->build();
+
+    return [
+      '#type' => 'markup',
+      '#markup' => $this->renderer->render($block)
+      ];
+  }
+
+
+  public function userFilterFeed($tid) {
+    $myConfig = \Drupal::service('config.factory')->getEditable('heartbeat_username.settings');
+    $myConfig->set('tid', $tid)->save();
+    $block = $this->blockManager->createInstance('heartbeat_username_block')->build();
+
+    return [
+      '#type' => 'markup',
+      '#markup' => $this->renderer->render($block)
+    ];
   }
 
+
   public function commentConfigUpdate($entity_id) {
     $commentConfig = \Drupal::configFactory()->getEditable('heartbeat_comment.settings');
     $commentConfig->set('entity_id', $entity_id)->save();
@@ -217,4 +265,14 @@ class HeartbeatController extends ControllerBase implements ContainerInjectionIn
     return BlockViewBuilder::lazyBuilder('heartbeatsubcommentblock', 'teaser');
   }
 
+  public function friendInteract($uid) {
+    $myConfig = \Drupal::service('config.factory')->getEditable('heartbeat_friend_interact.settings');
+    $myConfig->set('uid', $uid)->save();
+//    $block = BlockViewBuilder::lazyBuilder('friendinteractblock', 'full');
+    $block = \Drupal::service('plugin.manager.block');
+    $block = $block->createInstance('friend_interact_block')->build();
+    $blockMarkup = \Drupal::service('renderer')->render($block);
+
+    return ['#type' => 'markup', '#markup' => $blockMarkup];
+  }
 }

src/Form/FriendSearchForm.php

@@ -0,0 +1,96 @@
+<?php
+
+namespace Drupal\heartbeat\Form;
+
+use Drupal\Core\Ajax\AjaxResponse;
+use Drupal\Core\Ajax\InvokeCommand;
+use Drupal\Core\Form\FormBase;
+use Drupal\Core\Form\FormStateInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Drupal\Core\Config\ConfigManager;
+
+/**
+ * Class FriendSearchForm.
+ */
+class FriendSearchForm extends FormBase {
+
+  /**
+   * Drupal\Core\Config\ConfigManager definition.
+   *
+   * @var \Drupal\Core\Config\ConfigManager
+   */
+  private $configManager;
+
+  /**
+   * Constructs a new FriendSearchForm object.
+   */
+  public function __construct(
+    ConfigManager $config_manager
+  ) {
+    $this->configManager = $config_manager;
+  }
+
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container->get('config.manager')
+    );
+  }
+
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return 'friend_search_form';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildForm(array $form, FormStateInterface $form_state) {
+
+    $form['search'] = [
+      '#type' => 'entity_autocomplete',
+      '#entity_type' => 'user',
+      '#target_type' => 'user',
+      '#autocomplete_route_name' => 'entity-autocomplete/user/',
+      '#title' => $this->t('Friends'),
+      '#description' => $this->t('Search for friends by name'),
+    ];
+
+    $form['submit'] = [
+      '#type' => 'submit',
+      '#value' => $this->t('Search'),
+      '#ajax' => [
+        'callback' => '::friendSearchAjaxSubmit',
+        'progress' => array(
+          'type' => 'throbber',
+          'message' => t('Finding friends'),
+        ),
+      ]
+    ];
+
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function validateForm(array &$form, FormStateInterface $form_state) {
+    parent::validateForm($form, $form_state);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    return null;
+  }
+
+
+  public function friendSearchAjaxSubmit(array &$form, FormStateInterface $form_state) {
+    $ajax_response = new AjaxResponse();
+    $ajax_response->addCommand(new InvokeCommand(NULL, 'updateFriendView', ['some Var']));
+    return $ajax_response;
+  }
+}

src/HeartbeatAutocompleteMatcher.php

@@ -0,0 +1,80 @@
+<?php
+
+namespace Drupal\heartbeat;
+
+use Drupal\Component\Utility\Html;
+use Drupal\Component\Utility\Tags;
+use Drupal\Core\Entity\EntityAutocompleteMatcher;
+use Drupal\file\Entity\File;
+use Drupal\user\UserInterface;
+
+class HeartbeatAutocompleteMatcher extends EntityAutocompleteMatcher {
+  private $entityTypeManager;
+
+  /**
+   * Gets matched labels based on a given search string.
+   */
+  public function getMatches($target_type, $selection_handler, $selection_settings, $string = '') {
+
+    if ($target_type !== 'user') {
+      return parent::getMatches($target_type, $selection_handler, $selection_settings, $string);
+    }
+
+    $matches = [];
+
+    $friendData = \json_decode(\Drupal::config('heartbeat_friendship.settings')->get('data'));
+    $friendUids = [];
+
+    foreach ($friendData as $data) {
+      $friendUids[] = $data->uid;
+      $friendUids[] = $data->uid_target;
+    }
+
+
+    $options = [
+      'target_type'      => $target_type,
+      'handler'          => $selection_handler,
+      'handler_settings' => $selection_settings,
+    ];
+    $handler = $this->selectionManager->getInstance($options);
+    if (isset($string)) {
+      // Get an array of matching entities.
+      $match_operator = !empty($selection_settings['match_operator']) ? $selection_settings['match_operator'] : 'CONTAINS';
+      $entity_labels = $handler->getReferenceableEntities($string, $match_operator, 10);
+      // Loop through the entities and convert them into autocomplete output.
+      foreach ($entity_labels as $values) {
+        foreach ($values as $entity_id => $label) {
+          if (in_array($entity_id, $friendUids)) {
+            $entity = \Drupal::entityTypeManager()->getStorage($target_type)->load($entity_id);
+            $entity = \Drupal::entityManager()->getTranslationFromContext($entity);
+            $type = !empty($entity->type->entity) ? $entity->type->entity->label() : $entity->bundle();
+            $status = '';
+            if ($entity->getEntityType()->id() == 'node') {
+              $status = ($entity->isPublished()) ? ", Published" : ", Unpublished";
+            }
+            $key = $label . ' (' . $entity_id . ')';
+            // Strip things like starting/trailing white spaces, line breaks and tags.
+            $key = preg_replace('/\s\s+/', ' ', str_replace("\n", '', trim(Html::decodeEntities(strip_tags($key)))));
+            // Names containing commas or quotes must be wrapped in quotes.
+            $key = Tags::encode($key);
+            if ($entity instanceof UserInterface) {
+              $pic = $entity->get('user_picture')->getValue();
+              if (!empty($pic)) {
+                $pic = File::load($pic[0]['target_id']);
+                if ($pic !== null) {
+                  $style = \Drupal::entityTypeManager()->getStorage('image_style')
+                    ->load('thumbnail');
+                  $rendered = '<div class="heartbeat-autocomplete-image"><img src="' . $style->buildUrl($pic->getFileUri()) . '" /></div>';
+                }
+              }
+            }
+
+            $label = '<a href="/user/' . $entity->id() . '"><div class="heartbeat-autocomplete-user"> ' . $label . ' (' . $entity_id . ') [' . $type . $status . ']</div>' . $rendered . '</a>';
+            $matches[] = ['value' => $key, 'label' => $label];
+          }
+        }
+      }
+    }
+    return $matches;
+  }
+}

src/HeartbeatStreamServices.php

@@ -337,4 +337,49 @@ class HeartbeatStreamServices {
         ->execute());
   }
 
+  public function createUsernameStreamForUidsByType($uids, $feed, $tid) {
+    $query = $this->database->query('
+      SELECT coalesce(hr.id)
+      FROM heartbeat_field_revision hr
+      INNER  JOIN node__field_username un
+      ON un.entity_id = hr.nid
+      LEFT JOIN node__field_users u
+      ON u.entity_id = hr.nid 
+      WHERE u.field_users_target_id = :tid
+      OR un.field_username_target_id = :tid', array(
+        ':tid' => $tid
+      )
+    );
+    $hids = array();
+    foreach ($query->fetchAllKeyed() as $id => $row) {
+      $hids[] = $id;
+    }
+
+    if (!empty($hids)) {
+      $beats = $this->entityTypeManager->getStorage('heartbeat')
+        ->loadMultiple(
+          $this->entityQuery->get('heartbeat')
+            ->condition('status', 1)
+            ->condition('uid', $uids, 'IN')
+            ->condition('id', $hids, 'IN')
+            ->sort('created', 'DESC')
+
+            ->execute());
+
+      if (count($beats) > 0) {
+        $this->lastId = call_user_func('end', array_keys($beats));
+
+        $this->configFactory->getEditable('heartbeat_update_feed.settings')
+          ->set('lastId', $this->lastId)
+          ->set('update', FALSE)
+          ->set('timestamp', array_values($beats)[0]->getRevisionCreationTime())
+          ->save();
+
+        return $beats;
+      }
+    }
+    return null;
+
+  }
+
 }

src/Plugin/Block/HeartbeatUsernameBlock.php

@@ -0,0 +1,311 @@
+<?php
+
+namespace Drupal\heartbeat\Plugin\Block;
+
+use Drupal\comment\Entity\Comment;
+use Drupal\Core\Block\BlockBase;
+use Drupal\Core\Database\Database;
+use Drupal\Core\Link;
+use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Drupal\Core\Url;
+use Drupal\file\Entity\File;
+use Drupal\heartbeat\Entity\Heartbeat;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Drupal\heartbeat\HeartbeatTypeServices;
+use Drupal\heartbeat\HeartbeatStreamServices;
+use Drupal\heartbeat\HeartbeatService;
+use Drupal\Core\Entity\EntityTypeManager;
+use Drupal\Core\Datetime\DateFormatter;
+use Drupal\flag\FlagService;
+
+/**
+ * Provides a 'HeartbeatUsernameBlock' block.
+ *
+ * @Block(
+ *  id = "heartbeat_username_block",
+ *  admin_label = @Translation("Heartbeat Username block"),
+ * )
+ */
+class HeartbeatUsernameBlock extends BlockBase implements ContainerFactoryPluginInterface {
+
+  /**
+   * Drupal\heartbeat\HeartbeatTypeServices definition.
+   *
+   * @var \Drupal\heartbeat\HeartbeatTypeServices
+   */
+  protected $heartbeatTypeServices;
+  /**
+   * Drupal\heartbeat\HeartbeatStreamServices definition.
+   *
+   * @var \Drupal\heartbeat\HeartbeatStreamServices
+   */
+  protected $heartbeatStreamServices;
+  /**
+   * Drupal\heartbeat\HeartbeatService definition.
+   *
+   * @var \Drupal\heartbeat\HeartbeatService
+   */
+  protected $heartbeatService;
+
+  protected $entityTypeManager;
+
+  protected $dateFormatter;
+
+  protected $flagService;
+
+  protected $formBuilder;
+
+  protected $timestamp;
+
+  /**
+   * Constructs a new HeartbeatUsernameBlock object.
+   *
+   * @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,
+    HeartbeatTypeServices $heartbeat_heartbeattype,
+    HeartbeatStreamServices $heartbeatstream,
+    HeartbeatService $heartbeat,
+    EntityTypeManager $entity_type_manager,
+    DateFormatter $date_formatter,
+    FlagService $flag
+  )
+  {
+    parent::__construct($configuration, $plugin_id, $plugin_definition);
+    $this->heartbeatTypeService = $heartbeat_heartbeattype;
+    $this->heartbeatStreamServices = $heartbeatstream;
+    $this->heartbeatService = $heartbeat;
+    $this->entityTypeManager = $entity_type_manager;
+    $this->dateFormatter = $date_formatter;
+    $this->flagService = $flag;
+    $this->timestamp = time();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition)
+  {
+    return new static(
+      $configuration,
+      $plugin_id,
+      $plugin_definition,
+      $container->get('heartbeat.heartbeattype'),
+      $container->get('heartbeatstream'),
+      $container->get('heartbeat'),
+      $container->get('entity_type.manager'),
+      $container->get('date.formatter'),
+      $container->get('flag')
+    );
+  }
+
+  /**
+   * {@inheritdoc}
+   * @throws \Drupal\Core\Database\InvalidQueryException
+   */
+  public function build()
+  {
+
+    $myConfig = \Drupal::service('config.factory')->getEditable('heartbeat_feed.settings');
+    $tagConfig = \Drupal::config('heartbeat_username.settings');
+    $tid = $tagConfig->get('tid');
+    $friendData = \Drupal::config('heartbeat_friendship.settings')->get('data');
+
+    $feed = $myConfig->get('message');
+    $uids = null;
+    $messages = array();
+
+    $query = Database::getConnection()->select('heartbeat_friendship', 'hf')
+      ->fields('hf', ['uid', 'uid_target']);
+    $conditionOr = $query->orConditionGroup()
+      ->condition('hf.uid', \Drupal::currentUser()->id())
+      ->condition('hf.uid_target', \Drupal::currentUser()->id());
+
+    $results = $query->condition($conditionOr)->execute();
+    if ($result = $results->fetchAll()) {
+      $uids = array();
+      foreach ($result as $uid) {
+        $uids[] = $uid->uid_target;
+        $uids[] = $uid->uid;
+      }
+    }
+    if ($feed !== null) {
+      $uids = count($uids) > 1 ? array_unique($uids) : $uids;
+      if (!empty($uids)) {
+        foreach ($this->heartbeatStreamServices->createUsernameStreamForUidsByType($uids, $feed, $tid) as $heartbeat) {
+          $this->renderMessage($messages, $heartbeat);
+        }
+      } else {
+        foreach ($this->heartbeatStreamServices->createStreamByType($feed) as $heartbeat) {
+          $this->renderMessage($messages, $heartbeat);
+        }
+      }
+    } else {
+//        foreach ($this->heartbeatStreamServices->createStreamForUids($uids) as $heartbeat) {
+      foreach ($this->heartbeatStreamServices->loadAllStreams() as $heartbeat) {
+        \Drupal::logger('HeartbeatUsernameBlock')->error('Could not load Heartbeats for Username');
+        $this->renderMessage($messages, $heartbeat);
+      }
+    }
+
+    return [
+      '#theme' => 'heartbeat_stream',
+      '#messages' => $messages,
+      '#attached' => array(
+        'library' => 'heartbeat/heartbeat',
+        'drupalSettings' => [
+          'activeFeed' => 'jigga',
+          'friendData' => $friendData,
+        ]
+      ),
+      '#cache' => array('max-age' => 0)
+    ];
+
+  }
+
+  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_short');
+        break;
+    }
+
+    $user = $heartbeat->getOwner();
+    $userView = user_view($user, 'compact');
+    $userPic = $user->get('user_picture')->getValue();
+
+    if (!empty($userPic)) {
+      $profilePic = $user->get('user_picture')->getValue()[0]['target_id'];
+    }
+
+    if (NULL === $profilePic) {
+      $profilePic = 86;
+    }
+
+    $pic = File::load($profilePic);
+
+    if ($pic !== NULL) {
+      $style = $this->entityTypeManager->getStorage('image_style')
+        ->load('thumbnail');
+      $rendered = $style->buildUrl($pic->getFileUri());
+    }
+
+    $cids = \Drupal::entityQuery('comment')
+      ->condition('entity_id', $heartbeat->id())
+      ->condition('entity_type', 'heartbeat')
+      ->sort('cid', 'ASC')
+      ->execute();
+
+    $comments = [];
+
+    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);
+
+      $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_short');
+              break;
+          }
+
+          $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_short');
+          $subComments[] = [
+            'id' => $subCid,
+            'body' => $subComment->get('comment_body')->value,
+            'username' => $subComment->getAuthorName(),
+            'owner' => $subCommentOwner,
+            'timeAgo' => $subCommentTime,
+            'commentLike' => Heartbeat::flagAjaxBuilder('heartbeat_like_comment', $subComment, $this->flagService)
+          ];
+
+        }
+      }
+
+      $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_short');
+          break;
+      }
+
+      $comments[] = [
+        'id' => $cid,
+        'body' => $comment->get('comment_body')->value,
+        'username' => $comment->getAuthorName(),
+        'owner' => $commentOwner,
+        'timeAgo' => $cTimeago,
+        'commentLike' => Heartbeat::flagAjaxBuilder('heartbeat_like_comment', $comment, $this->flagService),
+        'reply' => $commentLink,
+        'subComments' => $subComments
+      ];
+
+    }
+
+    $form = \Drupal::service('form_builder')->getForm('\Drupal\heartbeat\Form\HeartbeatCommentForm', $heartbeat);
+    $commentCount = count($comments);
+    $messages[] = array('heartbeat' => $heartbeat->getMessage()->getValue()[0]['value'],
+      'userPicture' => $rendered,
+      'userId' => $user->id(),
+      'timeAgo' => $timeago,
+      'id' => $heartbeat->id(),
+      'userName' => $user->getAccountName(),
+      'user' => $userView,
+      'commentForm' => $form,
+      'comments' => array_reverse($comments),
+      'commentCount' => $commentCount > 0 ? $commentCount : '',
+      'likeFlag' => Heartbeat::flagAjaxBuilder('heartbeat_like', $heartbeat, $this->flagService),
+      'unlikeFlag' => Heartbeat::flagAjaxBuilder('jihad_flag', $heartbeat, $this->flagService)
+    );
+  }
+}

src/Plugin/EntityReferenceReferenceSelection/KekUserSelection.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace Drupal\heartbeat\Plugin\EntityReferenceSelection;
+
+use Drupal\Core\Database\Connection;
+use Drupal\Core\Database\Query\SelectInterface;
+use Drupal\Core\Entity\EntityManagerInterface;
+use Drupal\Core\Entity\Plugin\EntityReferenceSelection\DefaultSelection;
+use Drupal\Core\Extension\ModuleHandlerInterface;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Session\AccountInterface;
+use Drupal\user\Plugin\EntityReferenceSelection\UserSelection;
+use Drupal\user\RoleInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * Provides specific access control for the user entity type.
+ *
+ * @EntityReferenceSelection(
+ *   id = "heartbeat:user",
+ *   label = @Translation("User selection"),
+ *   entity_types = {"user"},
+ *   group = "default",
+ *   weight = 1
+ * )
+ */
+class KekUserSelection extends UserSelection {
+
+  public function entityQueryAlter(SelectInterface $query) {
+
+    parent::entityQueryAlter($query);
+
+    $friendData = \Drupal::config('heartbeat_friendship.settings')->get('data');
+    $mynewvar = $query;
+
+    $query->condition('users.uid', $friendData, 'IN');
+
+    return $query;
+
+
+
+  }
+
+}

src/Routing/HeartbeatAutocompleteSubscriber.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace Drupal\heartbeat\Routing;
+
+use Drupal\Core\Routing\RouteSubscriberBase;
+use Symfony\Component\Routing\RouteCollection;
+
+class HeartbeatAutocompleteSubscriber extends RouteSubscriberBase {
+  public function alterRoutes(RouteCollection $collection) {
+
+    if ($route = $collection->get('system.entity_autocomplete')) {
+      $route->setDefault('_controller', '\Drupal\heartbeat\Controller\HeartbeatAutocompleteController::handleAutocomplete');
+    }
+  }
+}

src/Routing/HeartbeatRouteController.php

@@ -73,8 +73,6 @@ class HeartbeatRouteController extends ControllerBase {
    *   Return Hello string.
    */
   public function getRoutes() {
-    \Drupal::logger('HeartbeatRouteController')->debug('We getting called, yo');
-
     $routeCollection = new RouteCollection();
 
     foreach ($this->heartbeatStreamService->getAllStreams() as $heartbeatStream) {

src/Routing/HeartbeatRouteSubscriber.php

@@ -22,10 +22,18 @@ class HeartbeatRouteSubscriber extends RouteSubscriberBase {
    *   The route collection for adding routes.
    */
   protected function alterRoutes(RouteCollection $collection) {
-    $route = $collection->get('heartbeat.user_edit');
+    if ($collection) {
 
-    if ($route !== null) {
-      $route->setPath('/user/' . \Drupal::currentUser()->id() . '/edit');
+      if ($thisroute = $collection->get('heartbeat.update_feed')) {
+        $path = $thisroute->getPath();
+      }
+
+    }
+    if ($route = $collection->get('heartbeat.user_edit')) {
+
+      if ($route !== null) {
+        $route->setPath('/user/' . \Drupal::currentUser()->id() . '/edit');
+      }
     }
   }
 }

templates/friend-interaction.html.twig

@@ -0,0 +1,3 @@
+<div class=heartbeat-friend-interact"><img src="{{ userPic }}" /></div>
+<div class=heartbeat-friend-interact">{{ user }}</div>
+<div class="heartbeat-friend-interact">{{ flag }}</div>