feat(notifications): Make panel to render notification type based icon

Author: duranmla

src/notifications/NotificationsPanel.js

@@ -24,7 +24,7 @@ export const NotificationsPanel = ({ handleClose, notifications }: Props) => {
         <NPC.Body>
           {notifications.map(n => (
             <NPC.Item key={n.created_at} onClick={handleClose}>
-              {getNotificationIcon("foo")}
+              {getNotificationIcon(n.notification_type)}
               <div aria-label="NotificationItem">
                 <Typography variant="body2">{n.data.topic_title}</Typography>
                 <Typography variant="caption">

src/notifications/__tests__/helpers.spec.js

@@ -0,0 +1,11 @@
+// @flow
+
+import { getNotificationTypeName } from "../helpers";
+
+describe("helpers", () => {
+  describe("getNotificationTypeName", () => {
+    it("returns mapped notification name after number", () => {
+      expect(getNotificationTypeName(1)).toEqual("replied");
+    });
+  });
+});

src/notifications/helpers.js

@@ -62,15 +62,19 @@ const iconsMapping = {
   [notificationTypes[16]]: AddComment,
 };
 
+export const getNotificationTypeName = (
+  notificationType: string | number
+): string => {
+  return typeof notificationType === "number"
+    ? notificationTypes[notificationType]
+    : notificationType;
+};
+
 export const getNotificationIcon = (
   notificationType: string | number,
   color: string = "disabled"
 ) => {
-  const notificationIndex =
-    typeof notificationType === "number"
-      ? notificationType
-      : notificationTypes.indexOf(notificationType);
-  const Icon = iconsMapping[notificationIndex];
+  const Icon = iconsMapping[getNotificationTypeName(notificationType)];
 
   return Icon ? <Icon color={color} /> : <Announcement color={color} />;
 };