Merge pull request #68 from SundeepChand/bugs/notif

Mark Individual Notifications as read

Author: sharmaadityaHQ

src/assets/scss/components/notifications.scss

@@ -1,10 +1,13 @@
-.notifications-dropdown {
-  max-height: 512px;
-  width: 256px;
-}
+.notifications {
+  &-dropdown {
+    max-height: 512px;
+    overflow-y: scroll;
+    width: 256px;
+  }
 
-.notifications-options {
-  padding: 4px 8px;
+  &-options {
+    padding: 4px 8px;
+  }
 }
 
 @media only screen and (max-width: 768px) {

src/components/Notifications.js

@@ -55,21 +55,30 @@ const Notifications = () => {
     }
   }, [userId, notificationsSeen])
 
+  const markNotificationAsRead = async (notification) => {
+    const seenBy = notification.seenBy.map((seen) => seen.id)
+    if (!seenBy.includes(userId)) {
+      seenBy.push(userId)
+      await userStory.markNotificationAsRead(notification.id, seenBy)
+    }
+  }
+
   const markAllNotificationsAsRead = () => {
     if (notifications) {
       notifications.forEach(async (notification) => {
-        const seenBy = notification.seenBy.map((seen) => seen.id)
-        if (!seenBy.includes(userId)) {
-          seenBy.push(userId)
-          await userStory.markNotificationAsRead(notification.id, seenBy)
-          setNotifications([])
-          setNotificationCount(0)
-          setNotificationsSeen(false)
-        }
+        await markNotificationAsRead(notification)
+        setNotifications([])
+        setNotificationCount(0)
+        setNotificationsSeen(false)
       })
     }
   }
 
+  const onNotificationClick = async (notification) => {
+    await markNotificationAsRead(notification)
+    navigate(`/${notification.link}`)
+  }
+
   return (
     state.auth && (
       <div
@@ -103,7 +112,7 @@ const Notifications = () => {
               ? notifications.map((notification, key) => (
                   <li
                     className='dropdown-element'
-                    onClick={() => navigate(`/${notification.link}`)}
+                    onClick={() => onNotificationClick(notification)}
                     key={key}
                   >
                     {notification.message}

src/pages/Home.js

@@ -217,7 +217,7 @@ const Home = () => {
   const acceptUpdatedPolicy = async () => {
     const seenBy = policyUpdate.seenBy.map((seen) => seen.id)
     seenBy.push(userId)
-    await userStory.updateNotifications(policyUpdate.id, seenBy)
+    await userStory.markNotificationAsRead(policyUpdate.id, seenBy)
     setModal(false)
   }
 

src/pages/Notifications.js

@@ -16,7 +16,7 @@ const Notifications = () => {
 
   useEffect(() => {
     const fetchNotifications = async () => {
-      const response = await userStory.getNotifications(userId)
+      const response = await userStory.getNotificationsByUserId(userId)
       setNotifications(response.data.data.userStoryNotifications)
     }
     trackPromise(fetchNotifications())

src/services/gql_fragments.js

@@ -12,10 +12,10 @@ export const NOTIFICATION_DATA_FRAGMENT = `fragment NotificationData on UserStor
   message
   id
   users {
-  id
+    id
   }
   seenBy {
-  id
+    id
   }
   date
   link

src/services/user_story.js

@@ -195,7 +195,7 @@ const userStory = {
     }
     return apiCall('/graphql', productQuery)
   },
-  getNotifications: (userId) => {
+  getNotificationsByUserId: (userId) => {
     const notificationQuery = {
       query: `query {
         userStoryNotifications (where: {
@@ -223,27 +223,27 @@ const userStory = {
     }
     return apiCall('/graphql', policyQuery)
   },
-  updateNotifications: (policyId, seenBy) => {
-    const notificationQuery = {
-      query: `mutation updateNotifications($seenBy: [ID]){
-              updateUserStoryNotification(input: {
-                where: {
-                  id: "${policyId}"
-                }
-                data: {
-                  seenBy: $seenBy
-                }
-              }) {
-                userStoryNotification {
-                  id
-                }
-              }
-            }`,
+  markNotificationAsRead: (notificationId, seenBy) => {
+    const markNotificationAsReadQuery = {
+      query: `mutation updateNotifications($seenBy: [ID]) {
+        updateUserStoryNotification(input: {
+          where: {
+            id: "${notificationId}"
+          }
+          data: {
+            seenBy: $seenBy
+          }
+        }) {
+          userStoryNotification {
+            id
+          }
+        }
+      }`,
       variables: {
         seenBy: seenBy
       }
     }
-    return apiCall('/graphql', notificationQuery)
+    return apiCall('/graphql', markNotificationAsReadQuery)
   },
   getUserDetails: (userId) => {
     const userQuery = {
@@ -332,51 +332,6 @@ const userStory = {
   postCommentReply: (data) => {
     return apiCall('/user-story-comment-threads', data)
   },
-  getNotificationsByUserId: (userId) => {
-    const getNotificationsByUserIdQuery = {
-      query: `query {
-      userStoryNotifications (where: {
-        users: {
-          id: "${userId}"
-        }
-      }){
-        message
-        id
-        users {
-          id
-        }
-        seenBy {
-          id
-        }
-        date
-        link
-      }
-    }`
-    }
-    return apiCall('/graphql', getNotificationsByUserIdQuery)
-  },
-  markNotificationAsRead: (notificationId, seenBy) => {
-    const markNotificationAsReadQuery = {
-      query: `mutation updateNotifications($seenBy: [ID]){
-        updateUserStoryNotification(input: {
-          where: {
-            id: "${notificationId}"
-          }
-          data: {
-            seenBy: $seenBy
-          }
-        }) {
-          userStoryNotification {
-            id
-          }
-        }
-      }`,
-      variables: {
-        seenBy: seenBy
-      }
-    }
-    return apiCall('/graphql', markNotificationAsReadQuery)
-  },
   updateVotes: (storyId, updatedFollowerIds) => {
     const updateVotesQuery = {
       query: `