From a28eb8c91f60a13784f7ac666db4940747953056 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Fri, 24 Jan 2020 18:23:59 +0100
Subject: [PATCH] Start subscriptions for notifications

---
 .../notifications/notificationsMiddleware.js  | 16 ++++++--
 backend/src/schema/resolvers/notifications.js |  9 +++++
 backend/src/schema/resolvers/posts.js         |  6 +--
 backend/src/schema/types/schema.gql           |  4 --
 .../src/schema/types/type/Subscription.gql    |  4 ++
 backend/src/server.js                         |  1 -
 .../NotificationMenu/NotificationMenu.vue     | 21 +++++++----
 webapp/graphql/User.js                        | 37 +++++++++++++++++++
 webapp/pages/index.vue                        |  4 --
 9 files changed, 80 insertions(+), 22 deletions(-)
 create mode 100644 backend/src/schema/types/type/Subscription.gql

diff --git a/backend/src/middleware/notifications/notificationsMiddleware.js b/backend/src/middleware/notifications/notificationsMiddleware.js
index 837193773..ca59be780 100644
--- a/backend/src/middleware/notifications/notificationsMiddleware.js
+++ b/backend/src/middleware/notifications/notificationsMiddleware.js
@@ -1,5 +1,9 @@
 import extractMentionedUsers from './mentions/extractMentionedUsers'
 import { validateNotifyUsers } from '../validation/validationMiddleware'
+import { PubSub } from 'apollo-server'
+
+const pubsub = new PubSub()
+const NOTIFICATION_ADDED = 'NOTIFICATION_ADDED'
 
 const handleContentDataOfPost = async (resolve, root, args, context, resolveInfo) => {
   const idsOfUsers = extractMentionedUsers(args.content)
@@ -74,12 +78,18 @@ const notifyUsersOfMention = async (label, id, idsOfUsers, reason, context) => {
     WHEN notification.createdAt IS NULL
     THEN notification END ).createdAt = toString(datetime())
     SET notification.updatedAt = toString(datetime())
+    RETURN notification
   `
   const session = context.driver.session()
+  const writeTxResultPromise = session.writeTransaction(async transaction => {
+    const notificationTransactionResponse = await transaction.run(mentionedCypher, { id, idsOfUsers, reason })
+    return notificationTransactionResponse.records.map(record => record.get('notification').properties)
+  })
   try {
-    await session.writeTransaction(transaction => {
-      return transaction.run(mentionedCypher, { id, idsOfUsers, reason })
-    })
+    const [notification] = await writeTxResultPromise
+    return pubsub.publish(NOTIFICATION_ADDED, { notificationAdded: notification })
+  } catch (error) {
+    throw new Error(error)
   } finally {
     session.close()
   }
diff --git a/backend/src/schema/resolvers/notifications.js b/backend/src/schema/resolvers/notifications.js
index 31369a8c7..f92292bfc 100644
--- a/backend/src/schema/resolvers/notifications.js
+++ b/backend/src/schema/resolvers/notifications.js
@@ -1,4 +1,8 @@
 import log from './helpers/databaseLogger'
+import { PubSub } from 'apollo-server'
+
+const pubsub = new PubSub()
+const NOTIFICATION_ADDED = 'NOTIFICATION_ADDED'
 
 const resourceTypes = ['Post', 'Comment']
 
@@ -16,6 +20,11 @@ const transformReturnType = record => {
 }
 
 export default {
+  Subscription: {
+    notificationAdded: {
+      subscribe: () => pubsub.asyncIterator([NOTIFICATION_ADDED]),
+    },
+  },
   Query: {
     notifications: async (_parent, args, context, _resolveInfo) => {
       const { user: currentUser } = context
diff --git a/backend/src/schema/resolvers/posts.js b/backend/src/schema/resolvers/posts.js
index f8609f7a6..11f6eebc3 100644
--- a/backend/src/schema/resolvers/posts.js
+++ b/backend/src/schema/resolvers/posts.js
@@ -7,8 +7,8 @@ import Resolver from './helpers/Resolver'
 import { filterForMutedUsers } from './helpers/filterForMutedUsers'
 import { PubSub } from 'apollo-server'
 
-const pubsub = new PubSub();
-const POST_ADDED = 'POST_ADDED';
+const pubsub = new PubSub()
+const POST_ADDED = 'POST_ADDED'
 
 
 const maintainPinnedPosts = params => {
@@ -113,7 +113,7 @@ export default {
       })
       try {
         const [post] = await writeTxResultPromise
-        pubsub.publish(POST_ADDED, { postAdded: post });
+        pubsub.publish(POST_ADDED, { postAdded: post })
         return post
       } catch (e) {
         if (e.code === 'Neo.ClientError.Schema.ConstraintValidationFailed')
diff --git a/backend/src/schema/types/schema.gql b/backend/src/schema/types/schema.gql
index b3df61af2..23c2ded4d 100644
--- a/backend/src/schema/types/schema.gql
+++ b/backend/src/schema/types/schema.gql
@@ -1,7 +1,3 @@
-type Subscription {
-  postAdded: Post
-}
-
 type Mutation {
   # Get a JWT Token for the given Email and password
   login(email: String!, password: String!): String!
diff --git a/backend/src/schema/types/type/Subscription.gql b/backend/src/schema/types/type/Subscription.gql
new file mode 100644
index 000000000..a2f8b11b9
--- /dev/null
+++ b/backend/src/schema/types/type/Subscription.gql
@@ -0,0 +1,4 @@
+type Subscription {
+  postAdded: Post
+  notificationAdded: NOTIFIED
+}
\ No newline at end of file
diff --git a/backend/src/server.js b/backend/src/server.js
index 22431bd7f..d20fa5e63 100644
--- a/backend/src/server.js
+++ b/backend/src/server.js
@@ -42,7 +42,6 @@ const createServer = options => {
     schema: middleware(schema),
     subscriptions: {
       onConnect: (connectionParams, webSocket) => {
-        console.log('connectionParams', connectionParams)
         return getContext(connectionParams)
       },
     },
diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue
index a3b085db9..b18203b45 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/NotificationMenu/NotificationMenu.vue
@@ -22,13 +22,13 @@
 </template>
 
 <script>
+import unionBy from 'lodash/unionBy'
 import { NOTIFICATIONS_POLL_INTERVAL } from '~/constants/notifications'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
-import unionBy from 'lodash/unionBy'
-
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import Dropdown from '~/components/Dropdown'
 import NotificationList from '../NotificationList/NotificationList'
+import { notificationAdded } from '~/graphql/User'
 
 export default {
   name: 'NotificationMenu',
@@ -77,11 +77,18 @@ export default {
           orderBy: 'updatedAt_desc',
         }
       },
-      pollInterval: NOTIFICATIONS_POLL_INTERVAL,
-      update({ notifications }) {
-        return unionBy(notifications, this.notifications, notification => notification.id).sort(
-          (a, b) => new Date(b.createdAt) - new Date(a.createdAt),
-        )
+      // pollInterval: NOTIFICATIONS_POLL_INTERVAL,
+      // update({ notifications }) {
+      //   return unionBy(notifications, this.notifications, notification => notification.id).sort(
+      //     (a, b) => new Date(b.createdAt) - new Date(a.createdAt),
+      //   )
+      // },
+      subscribeToMore: {
+        document: notificationAdded(),
+        updateQuery: (previousResult, { subscriptionData }) => {
+          const { data: { notificationAdded: newNotification } } = subscriptionData
+          return { notifications: [newNotification, ...previousResult.notifications] }
+        },
       },
       error(error) {
         this.$toast.error(error.message)
diff --git a/webapp/graphql/User.js b/webapp/graphql/User.js
index 8962830dc..d2bbae895 100644
--- a/webapp/graphql/User.js
+++ b/webapp/graphql/User.js
@@ -130,6 +130,43 @@ export const markAsReadMutation = i18n => {
   `
 }
 
+export const notificationAdded = () => {
+  return gql`
+    ${userFragment}
+    ${commentFragment}
+    ${postFragment}
+
+    subscription notifications {
+      notificationAdded {
+        id
+        read
+        reason
+        createdAt
+        from {
+          __typename
+          ... on Post {
+            ...post
+            author {
+              ...user
+            }
+          }
+          ... on Comment {
+            ...comment
+            author {
+              ...user
+            }
+            post {
+              ...post
+              author {
+                ...user
+              }
+            }
+          }
+        }
+      }
+    }
+  `
+}
 export const followUserMutation = i18n => {
   return gql`
     ${userFragment}
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index f0089979d..5d42aab3b 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -244,13 +244,9 @@ export default {
             }
           }
         }`,
-        // Mutate the previous result
         updateQuery: (previousResult, { subscriptionData }) => {
-          console.log('previousResult', previousResult)
-          console.log('subscriptionData', subscriptionData)
           const { data: { postAdded: newPost } } = subscriptionData
           return { Post: [newPost, ...previousResult.Post] }
-          // Here, return the new result from the previous with the new data
         },
       }
     },