feat: limit notifications to 25 for menu

backend/src/db/factories.js

@@ -64,7 +64,7 @@ Factory.define('basicUser')
     password: '1234',
     role: 'user',
     about: faker.lorem.paragraph,
-    termsAndConditionsAgreedVersion: '0.0.1',
+    termsAndConditionsAgreedVersion: '0.0.4',
     termsAndConditionsAgreedAt: '2019-08-01T10:47:19.212Z',
     allowEmbedIframes: false,
     showShoutsPublicly: false,

backend/src/db/seed.js

@@ -1151,10 +1151,10 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
     )
 
     await Promise.all(
-      [...Array(45).keys()].map(() =>
+      [...Array(45).keys()].map((i) =>
         Factory.build(
           'post',
-          {},
+          { id: `p${i + 45}` },
           {
             categoryIds: ['cat1'],
             author: bobDerBaumeister,
@@ -1259,7 +1259,19 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         ),
       ),
     )
-
+    const notificationsCypher = `
+      MATCH (post:Post {id: $id}), (user:User {id: 'u3'})
+      CREATE (post)-[notification:NOTIFIED {reason: 'mentioned_in_post'}]->(user)
+      SET notification.read = FALSE
+      SET notification.createdAt = COALESCE(notification.createdAt, toString(datetime()))
+      SET notification.updatedAt = toString(datetime())
+      RETURN notification;
+    `
+    await Promise.all(
+      [...Array(45).keys()].map(async (i) => {
+        await neode.cypher(notificationsCypher, { id: `p${i + 45}` })
+      }),
+    )
     await Factory.build('donations')
     /* eslint-disable-next-line no-console */
     console.log('Seeded Data...')

backend/src/middleware/permissionsMiddleware.js

@@ -104,6 +104,7 @@ export default shield(
       mutedUsers: isAuthenticated,
       blockedUsers: isAuthenticated,
       notifications: isAuthenticated,
+      unreadNotificationsCount: isAuthenticated,
       Donations: isAuthenticated,
     },
     Mutation: {

backend/src/models/User.js

@@ -94,12 +94,6 @@ export default {
       createdAt: { type: 'string', isoDate: true, default: () => new Date().toISOString() },
     },
   },
-  notifications: {
-    type: 'relationship',
-    relationship: 'NOTIFIED',
-    target: 'User',
-    direction: 'in',
-  },
   termsAndConditionsAgreedVersion: {
     type: 'string',
     allow: [null],

backend/src/schema/resolvers/notifications.js

@@ -15,10 +15,9 @@ export default {
   },
   Query: {
     notifications: async (_parent, args, context, _resolveInfo) => {
-      const { user: currentUser } = context
-      const session = context.driver.session()
+      const { user: currentUser, driver } = context
+      const session = driver.session()
       let whereClause, orderByClause
-
       switch (args.read) {
         case true:
           whereClause = 'WHERE notification.read = TRUE'
@@ -41,7 +40,6 @@ export default {
       }
       const offset = args.offset && typeof args.offset === 'number' ? `SKIP ${args.offset}` : ''
       const limit = args.first && typeof args.first === 'number' ? `LIMIT ${args.first}` : ''
-
       const readTxResultPromise = session.readTransaction(async (transaction) => {
         const notificationsTransactionResponse = await transaction.run(
           ` 
@@ -68,6 +66,30 @@ export default {
         session.close()
       }
     },
+    unreadNotificationsCount: async (_parent, _args, context, _resolveInfo) => {
+      const { user: currentUser, driver } = context
+      const session = driver.session()
+
+      const readTxResultPromise = session.readTransaction(async (transaction) => {
+        const unreadNotificationsCountTransactionResponse = await transaction.run(
+          `
+            MATCH (resource {deleted: false, disabled: false})-[notification:NOTIFIED {read: false}]->(user:User {id:$id})
+            RETURN count(notification) as unreadNotificationsCount
+          `,
+          { id: currentUser.id },
+        )
+        log(unreadNotificationsCountTransactionResponse)
+        return unreadNotificationsCountTransactionResponse.records.map(
+          (record) => record.get('unreadNotificationsCount').low,
+        )
+      })
+      try {
+        const [unreadNotificationsCount] = await readTxResultPromise
+        return unreadNotificationsCount
+      } finally {
+        session.close()
+      }
+    },
   },
   Mutation: {
     markAsRead: async (parent, args, context, resolveInfo) => {

backend/src/schema/types/type/NOTIFIED.gql

@@ -25,6 +25,7 @@ enum NotificationReason {
 
 type Query {
   notifications(read: Boolean, orderBy: NotificationOrdering, first: Int, offset: Int): [NOTIFIED]
+  unreadNotificationsCount: Int!
 }
   
 type Mutation {

webapp/components/CommentList/CommentList.vue

@@ -48,7 +48,7 @@ export default {
       return anchor === '#comments'
     },
     updateCommentList(updatedComment) {
-      this.postComments = this.postComments.map((comment) => {
+      this.post.comments = this.postComments.map((comment) => {
         return comment.id === updatedComment.id ? updatedComment : comment
       })
     },

webapp/components/NotificationMenu/NotificationMenu.vue

@@ -18,7 +18,11 @@
       </div>
       <div class="notifications-link-container">
         <nuxt-link :to="{ name: 'notifications' }">
-          {{ $t('notifications.pageLink') }}
+          {{
+            unreadNotificationsCount > 25
+              ? $t('notifications.manyNotifications', { unreadNotificationsCount })
+              : $t('notifications.pageLink')
+          }}
         </nuxt-link>
       </div>
     </template>
@@ -28,7 +32,12 @@
 <script>
 import { mapGetters } from 'vuex'
 import unionBy from 'lodash/unionBy'
-import { notificationQuery, markAsReadMutation, notificationAdded } from '~/graphql/User'
+import {
+  notificationQuery,
+  markAsReadMutation,
+  notificationAdded,
+  unreadNotificationsCountQuery,
+} from '~/graphql/User'
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import Dropdown from '~/components/Dropdown'
 import NotificationList from '../NotificationList/NotificationList'
@@ -55,6 +64,9 @@ export default {
         await this.$apollo.mutate({
           mutation: markAsReadMutation(this.$i18n),
           variables,
+          update: () => {
+            this.unreadNotificationsCount--
+          },
         })
       } catch (err) {
         this.$toast.error(err.message)
@@ -65,12 +77,6 @@ export default {
     ...mapGetters({
       user: 'auth/user',
     }),
-    unreadNotificationsCount() {
-      const result = this.notifications.reduce((count, notification) => {
-        return notification.read ? count : count + 1
-      }, 0)
-      return result
-    },
   },
   apollo: {
     notifications: {
@@ -81,6 +87,7 @@ export default {
         return {
           read: false,
           orderBy: 'updatedAt_desc',
+          first: 25,
         }
       },
       subscribeToMore: {
@@ -107,6 +114,9 @@ export default {
         this.$toast.error(error.message)
       },
     },
+    unreadNotificationsCount: {
+      query: unreadNotificationsCountQuery,
+    },
   },
 }
 </script>

webapp/graphql/User.js

@@ -174,6 +174,13 @@ export const notificationAdded = () => {
     }
   `
 }
+
+export const unreadNotificationsCountQuery = gql`
+  query {
+    unreadNotificationsCount
+  }
+`
+
 export const followUserMutation = (i18n) => {
   return gql`
     ${userFragment}

webapp/locales/en.json

@@ -450,6 +450,7 @@
       "read": "Read",
       "unread": "Unread"
     },
+    "manyNotifications": "See all {unreadNotificationsCount} notifications",
     "pageLink": "All notifications",
     "post": "Post",
     "reason": {