From 04a75b1cb3da44479bca921e2df5eda7bf3b2144 Mon Sep 17 00:00:00 2001
From: Daniel Waterworth <me@danielwaterworth.com>
Date: Fri, 7 Jun 2019 06:41:12 +0100
Subject: [PATCH] Change the way notification items are created

Look for the specialised version first, before falling back to the
default. This allows the behaviour to be customised based on the type of
notification.
---
 .../widgets/user-notifications-large.js.es6      | 10 +++++++++-
 .../discourse/widgets/user-notifications.js.es6  | 16 +++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/user-notifications-large.js.es6 b/app/assets/javascripts/discourse/widgets/user-notifications-large.js.es6
index 677c3fa2bda..c0797bbbec6 100644
--- a/app/assets/javascripts/discourse/widgets/user-notifications-large.js.es6
+++ b/app/assets/javascripts/discourse/widgets/user-notifications-large.js.es6
@@ -12,8 +12,16 @@ createWidget("large-notification-item", {
   },
 
   html(attrs) {
+    const notificationName =
+      this.site.notificationLookup[attrs.notification_type];
+
+    const widgetNames = [
+      `${notificationName.replace(/_/g, '-')}-notification-item`,
+      "default-notification-item"
+    ];
+
     return [
-      this.attach("default-notification-item", attrs),
+      this.attach(widgetNames, attrs),
       h("span.time", dateNode(attrs.created_at))
     ];
   }
diff --git a/app/assets/javascripts/discourse/widgets/user-notifications.js.es6 b/app/assets/javascripts/discourse/widgets/user-notifications.js.es6
index 19a8c3de5be..ce110081dab 100644
--- a/app/assets/javascripts/discourse/widgets/user-notifications.js.es6
+++ b/app/assets/javascripts/discourse/widgets/user-notifications.js.es6
@@ -88,9 +88,19 @@ export default createWidget("user-notifications", {
     if (state.loading) {
       result.push(h("div.spinner-container", h("div.spinner")));
     } else if (state.notifications.length) {
-      const notificationItems = state.notifications.map(n =>
-        this.attach("default-notification-item", n)
-      );
+      const notificationItems =
+        state.notifications.map(attrs => {
+
+          const notificationName =
+            this.site.notificationLookup[attrs.notification_type];
+
+          const widgetNames = [
+            `${notificationName.replace(/_/g, '-')}-notification-item`,
+            "default-notification-item"
+          ];
+
+          return this.attach(widgetNames, attrs);
+        });
 
       result.push(h("hr"));