feat(notifications): Allow notification panel items to behave as link to notifications

Author: duranmla

src/notifications/NotificationsPanel.js

@@ -1,11 +1,11 @@
 // @flow
 
-import { getNotificationIcon } from "./helpers";
 import moment from "moment";
 import { NotificationsPanelComponents as NPC } from "./styled";
 import React from "react";
 import { translate } from "../locales";
 import { ClickAwayListener, Typography } from "@material-ui/core";
+import { getNotificationIcon, getNotificationLink } from "./helpers";
 
 type Props = {
   handleClose: Function,
@@ -23,7 +23,12 @@ export const NotificationsPanel = ({ handleClose, notifications }: Props) => {
         </NPC.Header>
         <NPC.Body>
           {notifications.map(n => (
-            <NPC.Item key={n.created_at} onClick={handleClose}>
+            <NPC.Item
+              target="_blank"
+              href={getNotificationLink(n)}
+              key={n.created_at}
+              onClick={handleClose}
+            >
               {getNotificationIcon(n.notification_type)}
               <div aria-label="NotificationItem">
                 <Typography variant="body2">{n.data.topic_title}</Typography>

src/notifications/helpers.js

@@ -13,6 +13,7 @@ import Link from "@material-ui/icons/Link";
 import Loyalty from "@material-ui/icons/Loyalty";
 import Mail from "@material-ui/icons/Mail";
 import Person from "@material-ui/icons/Person";
+import { prependDiscourseUrl } from "../common/helpers";
 import React from "react";
 import Reply from "@material-ui/icons/Reply";
 
@@ -62,6 +63,16 @@ const iconsMapping = {
   [notificationTypes[16]]: AddComment,
 };
 
+export const getNotificationLink = (notification: Notification) => {
+  if (!notification.topic_id || !notification.post_number) {
+    return "#";
+  }
+
+  return prependDiscourseUrl(
+    `/t/${notification.topic_id}/${notification.post_number}`
+  );
+};
+
 export const getNotificationTypeName = (
   notificationType: string | number
 ): string => {

src/notifications/styled.js

@@ -47,11 +47,12 @@ const NotificationsPanelHeader = styled.div`
   padding: 0 0.625rem;
 `;
 
-const NotificationsPanelItem = styled.div`
+const NotificationsPanelItem = styled.a`
   align-items: center;
   border-bottom: 1px solid ${grey[400]};
   display: flex;
   padding: 0.625rem 1.875rem 0.625rem 0.625rem;
+  text-decoration: none;
 
   &:last-of-type {
     border-bottom: none;