From c574c58ad556dd8226fc84ddf656b603cb51dacf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Fri, 3 Apr 2020 09:26:18 +0200
Subject: [PATCH] Refactor notifications menu

---
 .../components/Notification/Notification.vue  | 110 +-----------------
 webapp/components/utils/Notifications.js      |   4 +-
 2 files changed, 4 insertions(+), 110 deletions(-)

diff --git a/webapp/components/Notification/Notification.vue b/webapp/components/Notification/Notification.vue
index 0917cb72b..08a5741da 100644
--- a/webapp/components/Notification/Notification.vue
+++ b/webapp/components/Notification/Notification.vue
@@ -1,74 +1,4 @@
 <template>
-  <!-- Wolle <ds-space :class="{ read: notification.read, notification: true }" margin-bottom="x-small">
-    <client-only>
-      <ds-space margin-bottom="x-small">
-        <user-teaser :user="notificationData.triggerer" :date-time="notificationData.createdAt" />
-      </ds-space>
-      <ds-text data-test="reason-text" color="soft">
-        <base-icon
-          :name="notificationData.iconName"
-          v-tooltip="{ content: $t(notificationData.iconTooltip), placement: 'right' }"
-        />
-        {{
-          $t(
-            `notifications.reason.${notificationData.reason}` +
-              notificationData.reasonTranslationExtention,
-          )
-        }}
-      </ds-text>
-    </client-only>
-    <ds-space margin-bottom="x-small" />
-    <nuxt-link :to="notificationData.linkTo" @click.native="$emit('read')"> -->
-  <!-- <ds-space margin-bottom="x-small">
-        <ds-card
-          :header="
-            (notificationData.isPost || notificationData.isComment) && notificationData.title
-          "
-          hover
-          space="x-small"
-          class="notifications-card"
-        >
-          <! because of different margin above ds-card content without header property >
-          <user-teaser
-            v-if="notificationData.isUser"
-            class="notifications-user-teaser"
-            :user="notificationData.user"
-          />
-          <div v-else>
-            <span v-if="notificationData.isComment" class="notification-content-header-text">
-              {{ $t(`notifications.comment`) }}:
-            </span>
-            {{ notificationData.contentExcerpt | removeHtml }}
-          </div>
-          <div v-if="notificationData.isReport">
-            <ds-space margin-bottom="x-small" />
-            <span class="notification-content-header-text">
-              {{ $t(`notifications.report.category`) }}:
-            </span>
-            {{ $t('report.reason.category.options.' + notificationData.report.reasonCategory) }}
-            <br />
-            <span class="notification-content-header-text">
-              {{ $t(`notifications.report.description`) }}:
-            </span>
-            <span
-              v-if="
-                notificationData.report.reasonDescription &&
-                  notificationData.report.reasonDescription !== ''
-              "
-            >
-              {{ notificationData.report.reasonDescription }}
-            </span>
-            <span v-else>
-              —
-            </span>
-          </div>
-          <! because of different margin underneath ds-card content without header property >
-          <ds-space
-            v-if="!(notificationData.isPost || notificationData.isComment)"
-            margin-bottom="base"
-          />
-        </ds-card>
-      </ds-space> -->
   <article :class="{ '--read': notificationData.read, notification: true }">
     <client-only>
       <user-teaser :user="notificationData.triggerer" :date-time="notificationData.createdAt" />
@@ -87,21 +17,10 @@
     </p>
     <nuxt-link class="link" :to="notificationData.linkTo" @click.native="$emit('read')">
       <base-card wideContent>
-        <h2 class="title">
-          {{ (notificationData.isPost || notificationData.isComment) && notificationData.title }}
+        <h2 v-if="notificationData.isPost || notificationData.isComment" class="title">
+          {{ notificationData.title }}
         </h2>
-        <p>
-          <strong v-if="notificationData.isComment" class="comment">
-            {{ $t(`notifications.comment`) }}:
-          </strong>
-          {{ notificationData.contentExcerpt | removeHtml }}
-        </p>
-        <!-- because of different margin above ds-card content without header property -->
-        <user-teaser
-          v-if="notificationData.isUser"
-          class="notifications-user-teaser"
-          :user="notificationData.user"
-        />
+        <user-teaser v-if="notificationData.isUser" :user="notificationData.user" />
         <p v-else>
           <strong v-if="notificationData.isComment" class="comment">
             {{ $t(`notifications.comment`) }}:
@@ -126,11 +45,6 @@
             —
           </span>
         </div>
-        <!-- because of different margin underneath ds-card content without header property -->
-        <ds-space
-          v-if="!(notificationData.isPost || notificationData.isComment)"
-          margin-bottom="base"
-        />
       </base-card>
     </nuxt-link>
   </article>
@@ -164,16 +78,6 @@ export default {
 </script>
 
 <style lang="scss">
-// Wolle .notification.read {
-//   opacity: $opacity-soft;
-// }
-// .notifications-card {
-//   min-width: 500px;
-// }
-// .notification-content-header-text {
-//   font-weight: 700;
-//   margin-right: 0.1rem;
-
 .notification {
   margin-bottom: $space-base;
 
@@ -206,12 +110,4 @@ export default {
     font-weight: $font-weight-bold;
   }
 }
-// Wolle .notifications-card {
-//   > .user-teaser {
-//     margin-top: $space-small;
-//   }
-// }
-.notifications-user-teaser {
-  margin-top: $space-small;
-}
 </style>
diff --git a/webapp/components/utils/Notifications.js b/webapp/components/utils/Notifications.js
index f56674579..99d83d573 100644
--- a/webapp/components/utils/Notifications.js
+++ b/webapp/components/utils/Notifications.js
@@ -60,7 +60,6 @@ export const testNotifications = [
 
 export const extractNotificationDataOfCurrentUser = (notification, currentUser) => {
   const from = notification.from // for readability
-  // Wolle console.log('from: ', from)
   let user = null
   let post = null
   let comment = null
@@ -73,7 +72,7 @@ export const extractNotificationDataOfCurrentUser = (notification, currentUser)
   let reasonTranslationExtention = ''
   let iconName, iconTooltip, triggerer, title, author, linkName, linkParams, linkHashParam
 
-  // extract data out of the deep structure of db response
+  // extract flattened data out of the deep structure of db response
 
   // leave undefined data as default, see above. so later by priority user, comment, post we get easely a clou what it is
   switch (from.__typename) {
@@ -169,6 +168,5 @@ export const extractNotificationDataOfCurrentUser = (notification, currentUser)
     reasonTranslationExtention,
     linkTo: { name: linkName, params: linkParams, ...linkHashParam },
   }
-  // Wolle console.log('data: ', data)
   return data
 }