feat(notifications): Add mapping of icons from Discourse to Material …

…like
debtcollective · Apr 3, 2019 · de2e99b · de2e99b
1 parent 3497332
commit de2e99b
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 28 deletions.
diff --git a/src/notifications/helpers.js b/src/notifications/helpers.js
@@ -1,8 +1,76 @@
 // @flow
 
+import AddComment from "@material-ui/icons/AddComment";
+import AlternateEmail from "@material-ui/icons/AlternateEmail";
+import Announcement from "@material-ui/icons/Announcement";
+import CenterFocusStrong from "@material-ui/icons/CenterFocusStrong";
+import Edit from "@material-ui/icons/Edit";
+import ExitToApp from "@material-ui/icons/ExitToApp";
+import Favorite from "@material-ui/icons/Favorite";
+import FormatQuote from "@material-ui/icons/FormatQuote";
 import Group from "@material-ui/icons/Group";
+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 React from "react";
+import Reply from "@material-ui/icons/Reply";
 
-export const getNotificationIcon = (notificationType: string) => {
-  return notificationType && <Group />;
+/**
+ * check discourse notification types at: https://goo.gl/Lcyhp3
+ * besides, keep into account that Discourse return `notification_type`
+ * as a number which map to the below indexes
+ */
+export const notificationTypes = [
+  "mentioned",
+  "replied",
+  "quoted",
+  "edited",
+  "liked",
+  "privateMessage",
+  "invitedToPrivateMessage",
+  "inviteeAccepted",
+  "posted",
+  "movedPost",
+  "linked",
+  "grantedBadge",
+  "invitedToTopic",
+  "custom",
+  "groupMentioned",
+  "groupMessageSummary",
+  "watchingFirstPost",
+  "topicReminder",
+];
+
+const iconsMapping = {
+  [notificationTypes[0]]: AlternateEmail,
+  [notificationTypes[1]]: Reply,
+  [notificationTypes[2]]: FormatQuote,
+  [notificationTypes[3]]: Edit,
+  [notificationTypes[4]]: Favorite,
+  [notificationTypes[5]]: Mail,
+  [notificationTypes[6]]: Person,
+  [notificationTypes[7]]: Reply,
+  [notificationTypes[8]]: ExitToApp,
+  [notificationTypes[9]]: Link,
+  [notificationTypes[10]]: Loyalty,
+  [notificationTypes[11]]: AddComment,
+  [notificationTypes[12]]: Announcement,
+  [notificationTypes[13]]: Group,
+  [notificationTypes[14]]: Group,
+  [notificationTypes[15]]: CenterFocusStrong,
+  [notificationTypes[16]]: AddComment,
+};
+
+export const getNotificationIcon = (
+  notificationType: string | number,
+  color: string = "disabled"
+) => {
+  const notificationIndex =
+    typeof notificationType === "number"
+      ? notificationType
+      : notificationTypes.indexOf(notificationType);
+  const Icon = iconsMapping[notificationIndex];
+
+  return Icon ? <Icon color={color} /> : <Announcement color={color} />;
 };
diff --git a/src/notifications/normaliser.js b/src/notifications/normaliser.js
@@ -1,32 +1,7 @@
 // @flow
 
 import includes from "lodash/includes";
-
-/**
- * check discourse notification types at: https://goo.gl/Lcyhp3
- * besides, keep into account that Discourse return `notification_type`
- * as a number which map to the below indexes
- */
-const notificationTypes = [
-  "mentioned",
-  "replied",
-  "quoted",
-  "edited",
-  "liked",
-  "privateMessage",
-  "invitedToPrivateMessage",
-  "inviteeAccepted",
-  "posted",
-  "movedPost",
-  "linked",
-  "grantedBadge",
-  "invitedToTopic",
-  "custom",
-  "groupMentioned",
-  "groupMessageSummary",
-  "watchingFirstPost",
-  "topicReminder",
-];
+import { notificationTypes } from "./helpers";
 
 const getMessages = notifications => {
   const messagesTypes = [notificationTypes[5], notificationTypes[6]];