Merge pull request #1747 from codidact/0valt/815/comment-notification-pings

Properly render comment pings in notifications

Author: Oaphi

app/assets/javascripts/notifications.js

@@ -1,4 +1,7 @@
 $(() => {
+  /**
+   * @param {QPixelNotification} notification 
+   */
   const makeNotification = (notification) => {
     const template = `<div class="js-notification widget h-m-0 h-m-b-2 ${notification.is_read ? 'read' : 'is-teal'}">
         <div class="widget--body h-p-2">

app/controllers/notifications_controller.rb

@@ -1,13 +1,19 @@
 # Provides web and API actions relating to user notifications.
 class NotificationsController < ApplicationController
+  include CommentsHelper
+
   before_action :authenticate_user!, only: [:index]
 
   def index
     @notifications = Notification.unscoped.where(user: current_user).paginate(page: params[:page], per_page: 100)
                                  .order(Arel.sql('is_read ASC, created_at DESC'))
     respond_to do |format|
       format.html { render :index, layout: 'without_sidebar' }
-      format.json { render json: @notifications, methods: :community_name }
+      format.json do
+        render json: (@notifications.to_a.map do |notif|
+          notif.as_json.merge(content: helpers.render_pings_text(notif.content))
+        end), methods: :community_name
+      end
     end
   end
 

app/views/notifications/index.html.erb

@@ -6,7 +6,7 @@
 <% @notifications.each do |notif| %>
   <div class="notification">
     <div class="form-caption"><%= CGI.unescape_html(notif.created_at.strftime('%b&nbsp;%-d,&nbsp;%Y&nbsp;at&nbsp;%H:%M')).html_safe %></div>
-    <a href="<%= notif.link %>"><%= notif.content %></a>
+    <a href="<%= notif.link %>"><%= render_pings_text(notif.content) %></a>
   </div>
 <% end %>
 

global.d.ts

@@ -65,6 +65,18 @@ interface QPixelKeyboard {
   updateSelected: () => void;
 }
 
+type QPixelNotification = {
+  community_id: number,
+  community_name: string,
+  content: string,
+  created_at: string,
+  id: number,
+  is_read: boolean,
+  link: string,
+  updated_at: string,
+  user_id: number
+}
+
 type NotificationType = "warning" | "success" | "danger";
 
 type QPixelPopupCallback = (ev: JQuery.ClickEvent, popup: QPixelPopup) => void