From b12fe2192b70aba77a93e47c0d628d06b0955934 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 10 Jun 2022 12:48:28 +0800
Subject: [PATCH] Notification-popup patch

- Rename components per filename changes.
- Fix missing React key.
- Add new strings.
---
 static/app-strings.json                       |  1 +
 .../headerNotificationButton/view.jsx         | 48 +++++++++----------
 ui/component/notificationBubble/index.js      |  4 +-
 ui/component/notificationBubble/view.jsx      |  2 +-
 4 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 71f6c7aca..c472b7262 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1289,6 +1289,7 @@
   "No notifications": "No notifications",
   "Try selecting another filter.": "Try selecting another filter.",
   "You don't have any notifications yet, but they will be here when you do!": "You don't have any notifications yet, but they will be here when you do!",
+  "View all": "View all",
   "I like this": "I like this",
   "I dislike this": "I dislike this",
   "Not interested": "Not interested",
diff --git a/ui/component/headerNotificationButton/view.jsx b/ui/component/headerNotificationButton/view.jsx
index 6573879c4..b44ed06ba 100644
--- a/ui/component/headerNotificationButton/view.jsx
+++ b/ui/component/headerNotificationButton/view.jsx
@@ -163,35 +163,31 @@ export default function NotificationHeaderButton(props: Props) {
     }
 
     return (
-      <>
-        <a onClick={() => handleNotificationClick(notification)}>
-          <div
-            className={
-              is_read ? 'menu__list--notification' : 'menu__list--notification menu__list--notification-unread'
-            }
-            key={id}
-          >
-            <div className="notification__icon">{icon}</div>
-            <div className="menu__list--notification-info">
-              <div className="menu__list--notification-type">
-                {generateNotificationTitle(notification_rule, notification_parameters, channelName)}
-              </div>
-              <div
-                className={
-                  type === 'comments' ? 'menu__list--notification-title blockquote' : 'menu__list--notification-title'
-                }
-              >
-                {generateNotificationText(notification_rule, notification_parameters)}
-              </div>
-              {!is_read && <span>•</span>}
-              <DateTime timeAgo date={active_at} />
+      <a onClick={() => handleNotificationClick(notification)} key={id}>
+        <div
+          className={is_read ? 'menu__list--notification' : 'menu__list--notification menu__list--notification-unread'}
+          key={id}
+        >
+          <div className="notification__icon">{icon}</div>
+          <div className="menu__list--notification-info">
+            <div className="menu__list--notification-type">
+              {generateNotificationTitle(notification_rule, notification_parameters, channelName)}
             </div>
-            <div className="delete-notification" onClick={(e) => handleNotificationDelete(e, id)}>
-              <Icon icon={ICONS.DELETE} sectionIcon />
+            <div
+              className={
+                type === 'comments' ? 'menu__list--notification-title blockquote' : 'menu__list--notification-title'
+              }
+            >
+              {generateNotificationText(notification_rule, notification_parameters)}
             </div>
+            {!is_read && <span>•</span>}
+            <DateTime timeAgo date={active_at} />
           </div>
-        </a>
-      </>
+          <div className="delete-notification" onClick={(e) => handleNotificationDelete(e, id)}>
+            <Icon icon={ICONS.DELETE} sectionIcon />
+          </div>
+        </div>
+      </a>
     );
   }
 
diff --git a/ui/component/notificationBubble/index.js b/ui/component/notificationBubble/index.js
index bc01d8fee..83a6d40d9 100644
--- a/ui/component/notificationBubble/index.js
+++ b/ui/component/notificationBubble/index.js
@@ -1,11 +1,11 @@
 import { connect } from 'react-redux';
 import { selectUnseenNotificationCount } from 'redux/selectors/notifications';
 import { selectUser } from 'redux/selectors/user';
-import NotificationHeaderButton from './view';
+import NotificationButton from './view';
 
 const select = (state) => ({
   unseenCount: selectUnseenNotificationCount(state),
   user: selectUser(state),
 });
 
-export default connect(select)(NotificationHeaderButton);
+export default connect(select)(NotificationButton);
diff --git a/ui/component/notificationBubble/view.jsx b/ui/component/notificationBubble/view.jsx
index 52217c37e..bbb94d406 100644
--- a/ui/component/notificationBubble/view.jsx
+++ b/ui/component/notificationBubble/view.jsx
@@ -10,7 +10,7 @@ type Props = {
   user: ?User,
 };
 
-export default function NotificationHeaderButton(props: Props) {
+export default function NotificationBubble(props: Props) {
   const { unseenCount, inline = false, user } = props;
   const notificationsEnabled = ENABLE_UI_NOTIFICATIONS || (user && user.experimental_ui);