From 35660ca073bddb15ec102ee79afce7ad59bb4615 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Fri, 17 Jan 2020 15:22:02 +0100
Subject: [PATCH] Implemented the notifications for filling reports
 Notification.vue

---
 backend/src/models/Report.js                  |   2 +-
 backend/src/schema/resolvers/reports.js       |   6 +
 backend/src/seed/seed-db.js                   | 101 ++++++++----
 .../components/Notification/Notification.vue  | 149 ++++++++++++------
 .../NotificationList/NotificationList.vue     |   1 +
 webapp/graphql/User.js                        |   4 +
 webapp/locales/de.json                        |  15 +-
 webapp/locales/en.json                        |  15 +-
 8 files changed, 212 insertions(+), 81 deletions(-)

diff --git a/backend/src/models/Report.js b/backend/src/models/Report.js
index 523cfd0fd..d7172cf2e 100644
--- a/backend/src/models/Report.js
+++ b/backend/src/models/Report.js
@@ -34,7 +34,7 @@ module.exports = {
         ],
         invalid: [null],
       },
-      reasonDescription: { type: 'string', allow: [null] },
+      reasonDescription: { type: 'string', allow: [null, ''] },
     },
   },
   reviewed: {
diff --git a/backend/src/schema/resolvers/reports.js b/backend/src/schema/resolvers/reports.js
index 0565c4d8a..1f10ee86d 100644
--- a/backend/src/schema/resolvers/reports.js
+++ b/backend/src/schema/resolvers/reports.js
@@ -183,4 +183,10 @@ export default {
       return reviewed
     },
   },
+  FILED: {
+    reasonDescription: async (parent, _params, _context, _resolveInfo) => {
+      if (typeof parent.reasonDescription !== 'undefined') return parent.reasonDescription
+      return null
+    },
+  },
 }
diff --git a/backend/src/seed/seed-db.js b/backend/src/seed/seed-db.js
index 2e9f9215d..1dbe3f0d0 100644
--- a/backend/src/seed/seed-db.js
+++ b/backend/src/seed/seed-db.js
@@ -606,7 +606,8 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         postId: 'p15',
       }),
     ])
-    const trollingComment = comments[0]
+    const trollingCommentC1 = comments[0]
+    const trollingCommentC2 = comments[1]
 
     await Promise.all([
       democracy.relateTo(p3, 'post'),
@@ -670,16 +671,23 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       louie.relateTo(p10, 'shouted'),
     ])
 
-    const reports = await Promise.all([
-      factory.create('Report'),
-      factory.create('Report'),
-      factory.create('Report'),
-      factory.create('Report'),
+    const [
+      reportAgainstDagobert,
+      reportAgainstHuey,
+      reportAgainstTrollingPostP2,
+      reportAgainstTrollingPostP9,
+      reportAgainstTrollingCommentC1,
+      reportAgainstTrollingCommentC2,
+      reportAgainstDewey,
+    ] = await Promise.all([
+      factory.create('Report', { id: 'reportAgainstDagobert' }),
+      factory.create('Report', { id: 'reportAgainstHuey' }),
+      factory.create('Report', { id: 'reportAgainstTrollingPostP2' }),
+      factory.create('Report', { id: 'reportAgainstTrollingPostP9' }),
+      factory.create('Report', { id: 'reportAgainstTrollingCommentC1' }),
+      factory.create('Report', { id: 'reportAgainstTrollingCommentC2' }),
+      factory.create('Report', { id: 'reportAgainstDewey' }),
     ])
-    const reportAgainstDagobert = reports[0]
-    const reportAgainstTrollingPost = reports[1]
-    const reportAgainstTrollingComment = reports[2]
-    const reportAgainstDewey = reports[3]
 
     // report resource first time
     await Promise.all([
@@ -690,19 +698,40 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       }),
       reportAgainstDagobert.relateTo(dagobert, 'belongsTo'),
 
-      reportAgainstTrollingPost.relateTo(jennyRostock, 'filed', {
+      reportAgainstHuey.relateTo(jennyRostock, 'filed', {
+        resourceId: 'u4',
+        reasonCategory: 'doxing',
+        reasonDescription: '',
+      }),
+      reportAgainstHuey.relateTo(huey, 'belongsTo'),
+
+      reportAgainstTrollingPostP2.relateTo(jennyRostock, 'filed', {
         resourceId: 'p2',
         reasonCategory: 'doxing',
         reasonDescription: "This shouldn't be shown to anybody else! It's my private thing!",
       }),
-      reportAgainstTrollingPost.relateTo(p2, 'belongsTo'),
+      reportAgainstTrollingPostP2.relateTo(p2, 'belongsTo'),
 
-      reportAgainstTrollingComment.relateTo(huey, 'filed', {
+      reportAgainstTrollingPostP9.relateTo(jennyRostock, 'filed', {
+        resourceId: 'p9',
+        reasonCategory: 'discrimination_etc',
+        reasonDescription: 'Discrimination !!!',
+      }),
+      reportAgainstTrollingPostP9.relateTo(p9, 'belongsTo'),
+
+      reportAgainstTrollingCommentC1.relateTo(huey, 'filed', {
         resourceId: 'c1',
         reasonCategory: 'other',
         reasonDescription: 'This comment is bigoted',
       }),
-      reportAgainstTrollingComment.relateTo(trollingComment, 'belongsTo'),
+      reportAgainstTrollingCommentC1.relateTo(trollingCommentC1, 'belongsTo'),
+
+      reportAgainstTrollingCommentC2.relateTo(jennyRostock, 'filed', {
+        resourceId: 'c2',
+        reasonCategory: 'other',
+        reasonDescription: 'This comment is bigoted',
+      }),
+      reportAgainstTrollingCommentC2.relateTo(trollingCommentC2, 'belongsTo'),
 
       reportAgainstDewey.relateTo(dagobert, 'filed', {
         resourceId: 'u5',
@@ -717,11 +746,23 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         read: false,
         reason: 'filed_report_on_resource',
       }),
-      reportAgainstTrollingPost.relateTo(jennyRostock, 'notified', {
+      reportAgainstHuey.relateTo(jennyRostock, 'notified', {
         read: false,
         reason: 'filed_report_on_resource',
       }),
-      reportAgainstTrollingComment.relateTo(huey, 'notified', {
+      reportAgainstTrollingPostP2.relateTo(jennyRostock, 'notified', {
+        read: false,
+        reason: 'filed_report_on_resource',
+      }),
+      reportAgainstTrollingPostP9.relateTo(jennyRostock, 'notified', {
+        read: false,
+        reason: 'filed_report_on_resource',
+      }),
+      reportAgainstTrollingCommentC1.relateTo(huey, 'notified', {
+        read: false,
+        reason: 'filed_report_on_resource',
+      }),
+      reportAgainstTrollingCommentC2.relateTo(jennyRostock, 'notified', {
         read: false,
         reason: 'filed_report_on_resource',
       }),
@@ -740,19 +781,19 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       }),
       reportAgainstDagobert.relateTo(dagobert, 'belongsTo'),
 
-      reportAgainstTrollingPost.relateTo(peterLustig, 'filed', {
+      reportAgainstTrollingPostP2.relateTo(peterLustig, 'filed', {
         resourceId: 'p2',
         reasonCategory: 'discrimination_etc',
         reasonDescription: 'This post is bigoted',
       }),
-      reportAgainstTrollingPost.relateTo(p2, 'belongsTo'),
+      reportAgainstTrollingPostP2.relateTo(p2, 'belongsTo'),
 
-      reportAgainstTrollingComment.relateTo(bobDerBaumeister, 'filed', {
+      reportAgainstTrollingCommentC1.relateTo(bobDerBaumeister, 'filed', {
         resourceId: 'c1',
         reasonCategory: 'pornographic_content_links',
         reasonDescription: 'This comment is porno!!!',
       }),
-      reportAgainstTrollingComment.relateTo(trollingComment, 'belongsTo'),
+      reportAgainstTrollingCommentC1.relateTo(trollingCommentC1, 'belongsTo'),
     ])
     // notify second report filers
     await Promise.all([
@@ -760,11 +801,11 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         read: false,
         reason: 'filed_report_on_resource',
       }),
-      reportAgainstTrollingPost.relateTo(peterLustig, 'notified', {
+      reportAgainstTrollingPostP2.relateTo(peterLustig, 'notified', {
         read: false,
         reason: 'filed_report_on_resource',
       }),
-      reportAgainstTrollingComment.relateTo(bobDerBaumeister, 'notified', {
+      reportAgainstTrollingCommentC1.relateTo(bobDerBaumeister, 'notified', {
         read: false,
         reason: 'filed_report_on_resource',
       }),
@@ -783,16 +824,16 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         resourceId: 'u7',
       }),
       dagobert.update({ disabled: true, updatedAt: new Date().toISOString() }),
-      reportAgainstTrollingPost.relateTo(peterLustig, 'reviewed', {
+      reportAgainstTrollingPostP2.relateTo(peterLustig, 'reviewed', {
         ...disableVariables,
         resourceId: 'p2',
       }),
       p2.update({ disabled: true, updatedAt: new Date().toISOString() }),
-      reportAgainstTrollingComment.relateTo(bobDerBaumeister, 'reviewed', {
+      reportAgainstTrollingCommentC1.relateTo(bobDerBaumeister, 'reviewed', {
         ...disableVariables,
         resourceId: 'c1',
       }),
-      trollingComment.update({ disabled: true, updatedAt: new Date().toISOString() }),
+      trollingCommentC1.update({ disabled: true, updatedAt: new Date().toISOString() }),
     ])
 
     // second review of resource and close report
@@ -803,19 +844,23 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         closed: true,
       }),
       dagobert.update({ disabled: false, updatedAt: new Date().toISOString(), closed: true }),
-      reportAgainstTrollingPost.relateTo(bobDerBaumeister, 'reviewed', {
+      reportAgainstTrollingPostP2.relateTo(bobDerBaumeister, 'reviewed', {
         resourceId: 'p2',
         disable: true,
         closed: true,
       }),
       p2.update({ disabled: true, updatedAt: new Date().toISOString(), closed: true }),
-      reportAgainstTrollingComment.relateTo(peterLustig, 'reviewed', {
+      reportAgainstTrollingCommentC1.relateTo(peterLustig, 'reviewed', {
         ...disableVariables,
         resourceId: 'c1',
         disable: true,
         closed: true,
       }),
-      trollingComment.update({ disabled: true, updatedAt: new Date().toISOString(), closed: true }),
+      trollingCommentC1.update({
+        disabled: true,
+        updatedAt: new Date().toISOString(),
+        closed: true,
+      }),
     ])
 
     await Promise.all(
diff --git a/webapp/components/Notification/Notification.vue b/webapp/components/Notification/Notification.vue
index dadee672e..6c9a2c6a2 100644
--- a/webapp/components/Notification/Notification.vue
+++ b/webapp/components/Notification/Notification.vue
@@ -2,31 +2,46 @@
   <ds-space :class="{ read: notification.read, notification: true }" margin-bottom="x-small">
     <client-only>
       <ds-space margin-bottom="x-small">
-        <hc-user :user="from.author" :date-time="from.createdAt" :trunc="35" />
+        <hc-user :user="sourceData.triggerer" :date-time="sourceData.createdAt" :trunc="35" />
       </ds-space>
       <ds-text class="reason-text-for-test" color="soft">
-        {{ $t(`notifications.reason.${notification.reason}`) }}
+        {{ $t(`notifications.reason.${notification.reason}` + sourceData.reasonExtention) }}
       </ds-text>
     </client-only>
     <ds-space margin-bottom="x-small" />
-    <nuxt-link
-      class="notification-mention-post"
-      :to="{ name: 'post-id-slug', params, ...hashParam }"
-      @click.native="$emit('read')"
-    >
+    <nuxt-link class="notification-mention-post" :to="linkTo" @click.native="$emit('read')">
       <ds-space margin-bottom="x-small">
-        <ds-card
-          :header="from.title || from.post.title"
-          hover
-          space="x-small"
-          class="notifications-card"
-        >
+        <ds-card :header="sourceData.title" hover space="x-small" class="notifications-card">
           <ds-space margin-bottom="x-small" />
-          <div>
-            <span v-if="isComment" class="comment-notification-header">
+          <div v-if="sourceData.user">
+            <hc-user :user="sourceData.user" :trunc="35" />
+          </div>
+          <div v-else-if="sourceData.contentExcerpt">
+            <span v-if="sourceData.comment" class="text-notification-header">
               {{ $t(`notifications.comment`) }}:
             </span>
-            {{ from.contentExcerpt | removeHtml }}
+            {{ sourceData.contentExcerpt | removeHtml }}
+          </div>
+          <div v-if="sourceData.report">
+            <ds-space margin-bottom="x-small" />
+            <span class="text-notification-header">
+              {{ $t(`notifications.filedReport.category`) }}:
+            </span>
+            {{ this.$t('report.reason.category.options.' + sourceData.report.reasonCategory) }}
+            <br />
+            <span class="text-notification-header">
+              {{ $t(`notifications.filedReport.description`) }}:
+            </span>
+            <span
+              v-if="
+                sourceData.report.reasonDescription && sourceData.report.reasonDescription !== ''
+              "
+            >
+              {{ sourceData.report.reasonDescription }}
+            </span>
+            <span v-else>
+              —
+            </span>
           </div>
         </ds-card>
       </ds-space>
@@ -35,6 +50,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import HcUser from '~/components/User/User'
 
 export default {
@@ -49,41 +65,78 @@ export default {
     },
   },
   computed: {
-    from() {
-      return this.notification.from
-    },
-    isComment() {
-      return this.from.__typename === 'Comment'
-    },
+    ...mapGetters({
+      currentUser: 'auth/user',
+    }),
     sourceData() {
+      const from = this.notification.from
+      let triggerer
+      const createdAt = this.notification.createdAt
+      let title
+      let author
       let user = null
       let post = null
       let comment = null
+      let contentExcerpt = null
       let report = null
-      if (this.from.__typename === 'Post') {
-        post = this.from
-      } else if (this.from.__typename === 'Comment') {
-        comment = this.from
-        post = this.from.post
-      } else if (this.from.__typename === 'Report') {
+      let reasonExtention = ''
+
+      if (from.__typename === 'Post') {
+        post = from
+        triggerer = post.author
+      } else if (from.__typename === 'Comment') {
+        comment = from
+        triggerer = comment.author
+        post = comment.post
+      } else if (from.__typename === 'Report') {
         report = {
-          reasonCategory: this.from.filed.reasonCategory,
-          reasonDescription: this.from.filed.reasonDescription,
+          reasonCategory: from.filed[0].reasonCategory,
+          reasonDescription: from.filed[0].reasonDescription,
         }
-        if (this.from.filed.reportedResource.__typename === 'User') {
-          user = this.from.filed.reportedResource
-        } else if (this.from.filed.reportedResource.__typename === 'Post') {
-          post = this.from.filed.reportedResource
-        } else if (this.from.filed.reportedResource.__typename === 'Comment') {
-          comment = this.from.filed.reportedResource
-          post = this.from.filed.reportedResource.post
+        triggerer = this.currentUser
+        if (from.filed[0].reportedResource.__typename === 'User') {
+          user = from.filed[0].reportedResource
+          reasonExtention = '.user'
+        } else if (from.filed[0].reportedResource.__typename === 'Post') {
+          post = from.filed[0].reportedResource
+          reasonExtention = '.post'
+        } else if (from.filed[0].reportedResource.__typename === 'Comment') {
+          comment = from.filed[0].reportedResource
+          post = from.filed[0].reportedResource.post
+          reasonExtention = '.comment'
         }
       }
-      return { user, post, comment, report }
+
+      if (user) {
+        title = user.name
+        author = user
+      } else {
+        title = post.title
+        if (comment) {
+          author = comment.author
+          contentExcerpt = comment.contentExcerpt
+        } else {
+          author = post.author
+          contentExcerpt = post.contentExcerpt
+        }
+      }
+
+      const data = {
+        triggerer,
+        createdAt,
+        title,
+        user,
+        post,
+        comment,
+        contentExcerpt,
+        author,
+        report,
+        reasonExtention,
+      }
+      return data
     },
-    params() {
-      // Wolle const post = this.isComment ? this.from.post : this.from
-      return this.sourceData.user
+    linkTo() {
+      const params = this.sourceData.user
         ? {
             id: this.sourceData.user.id,
             slug: this.sourceData.user.slug,
@@ -94,10 +147,14 @@ export default {
             slug: this.sourceData.post.slug,
           }
         : {}
-    },
-    hashParam() {
-      // Wolle return this.isComment ? { hash: `#commentId-${this.from.id}` } : {}
-      return this.sourceData.comment ? { hash: `#commentId-${this.sourceData.comment.id}` } : {}
+      const hashParam = this.sourceData.comment
+        ? { hash: `#commentId-${this.sourceData.comment.id}` }
+        : {}
+      return {
+        name: this.sourceData.user ? 'profile-id-slug' : 'post-id-slug',
+        params,
+        ...hashParam,
+      }
     },
   },
 }
@@ -110,7 +167,7 @@ export default {
 .notifications-card {
   min-width: 500px;
 }
-.comment-notification-header {
+.text-notification-header {
   font-weight: 700;
   margin-right: 0.1rem;
 }
diff --git a/webapp/components/NotificationList/NotificationList.vue b/webapp/components/NotificationList/NotificationList.vue
index fd2d6366c..5641d8829 100644
--- a/webapp/components/NotificationList/NotificationList.vue
+++ b/webapp/components/NotificationList/NotificationList.vue
@@ -25,6 +25,7 @@ export default {
   },
   methods: {
     markAsRead(notificationSourceId) {
+      // Wolle console.log('markAsRead !!! notificationSourceId: ', notificationSourceId)
       this.$emit('markAsRead', notificationSourceId)
     },
   },
diff --git a/webapp/graphql/User.js b/webapp/graphql/User.js
index 404fea8cb..b05e3e3cf 100644
--- a/webapp/graphql/User.js
+++ b/webapp/graphql/User.js
@@ -90,6 +90,7 @@ export const notificationQuery = i18n => {
             }
           }
           ... on Report {
+            id
             filed {
               reasonCategory
               reasonDescription
@@ -154,6 +155,9 @@ export const markAsReadMutation = i18n => {
               }
             }
           }
+          ... on Report {
+            id
+          }
         }
       }
     }
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 3d9b44c3c..fe6c6d360 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -656,9 +656,14 @@
     },
     "notifications": {
         "reason": {
+            "commented_on_post": "Hat deinen Beitrag kommentiert …",
+            "filed_report_on_resource": {
+              "user": "Du hast einen Benutzer gemeldet …",
+              "post": "Du hast einen Beitrag gemeldet …",
+              "comment": "Du hast einen Kommentar gemeldet …"
+            },
             "mentioned_in_post": "Hat dich in einem Beitrag erwähnt …",
-            "mentioned_in_comment": "Hat dich in einem Kommentar erwähnt …",
-            "commented_on_post": "Hat deinen Beitrag kommentiert …"
+            "mentioned_in_comment": "Hat dich in einem Kommentar erwähnt …"
         },
         "comment": "Kommentar",
         "title": "Benachrichtigungen",
@@ -671,7 +676,11 @@
             "read": "Gelesen",
             "unread": "Ungelesen"
         },
-        "empty": "Bedaure, Du hast momentan keinerlei Benachrichtigungen."
+        "empty": "Bedaure, Du hast momentan keinerlei Benachrichtigungen.",
+        "filedReport": {
+          "category": "Kategorie der Meldung",
+          "description": "Beschreibung"
+        }
     },
     "delete": {
         "submit": "Löschen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 720220356..ddc5569dd 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -179,9 +179,14 @@
   },
   "notifications": {
     "reason": {
+      "commented_on_post": "Commented on your post …",
+      "filed_report_on_resource": {
+        "user": "You reported an user …",
+        "post": "You reported a post …",
+        "comment": "You reported a comment …"
+      },
       "mentioned_in_post": "Mentioned you in a post …",
-      "mentioned_in_comment": "Mentioned you in a comment …",
-      "commented_on_post": "Commented on your post …"
+      "mentioned_in_comment": "Mentioned you in a comment …"
     },
     "comment": "Comment",
     "title": "Notifications",
@@ -194,7 +199,11 @@
       "read": "Read",
       "unread": "Unread"
     },
-    "empty": "Sorry, you don't have any notifications at the moment."
+    "empty": "Sorry, you don't have any notifications at the moment.",
+    "filedReport": {
+      "category": "Report category",
+      "description": "Description"
+    }
   },
   "search": {
     "placeholder": "Search",