Query a currentUsers emotions for a post, translations

backend/src/middleware/permissionsMiddleware.js

@@ -166,6 +166,7 @@ const permissions = shield(
       isLoggedIn: allow,
       Badge: allow,
       postsEmotionsCountByEmotion: allow,
+      postsEmotionsCountByCurrentUser: allow,
     },
     Mutation: {
       '*': deny,

backend/src/schema/resolvers/posts.js

@@ -110,12 +110,12 @@ export default {
   Query: {
     postsEmotionsCountByEmotion: async (object, params, context, resolveInfo) => {
       const session = context.driver.session()
-      const { id, data } = params
+      const { postId, data } = params
       const transactionRes = await session.run(
-        `MATCH (post:Post {id: $id})<-[emoted:EMOTED {emotion: $data.emotion}]-() 
+        `MATCH (post:Post {id: $postId})<-[emoted:EMOTED {emotion: $data.emotion}]-() 
         RETURN COUNT(DISTINCT emoted) as emotionsCount
         `,
-        { id, data },
+        { postId, data },
       )
       session.close()
 
@@ -124,5 +124,22 @@ export default {
       })
       return emotionsCount
     },
+    postsEmotionsCountByCurrentUser: async (object, params, context, resolveInfo) => {
+      const session = context.driver.session()
+      const { postId } = params
+      const transactionRes = await session.run(
+        `MATCH (user:User {id: $userId})-[emoted:EMOTED]->(post:Post {id: $postId})
+        RETURN emoted.emotion as emotion`,
+        { userId: context.user.id, postId },
+      )
+
+      session.close()
+      let emotionsArray = []
+      transactionRes.records.map(record => {
+        emotionsArray.push(record.get('emotion'))
+      })
+
+      return emotionsArray
+    },
   },
 }

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

@@ -95,5 +95,6 @@ type Mutation {
 }
 
 type Query {
-  postsEmotionsCountByEmotion(id: ID!, data: _EMOTEDInput!): Int!
+  postsEmotionsCountByEmotion(postId: ID!, data: _EMOTEDInput!): Int!
+  postsEmotionsCountByCurrentUser(postId: ID!): [String]
 }

webapp/components/EmotionsButtons/EmotionsButtons.vue

@@ -1,7 +1,7 @@
 <template>
   <ds-space margin="large" style="text-align: center">
     <ds-flex :gutter="{ lg: 'large' }" class="emotions-flex">
-      <div v-for="emotion in emotionsList" :key="emotion">
+      <div v-for="emotion in Object.keys(postsEmotionsCountByEmotion)" :key="emotion">
         <ds-flex-item :width="{ lg: '100%' }">
           <ds-button
             :loading="loading"
@@ -10,14 +10,19 @@
             @click="toggleEmotion(emotion)"
             class="emotions-buttons"
           >
-            <img :src="iconPath(emotion)" alt width="53" />
+            <img :src="iconPath(emotion)" width="53" />
           </ds-button>
           <ds-space margin-bottom="xx-small" />
           <div>
-            <p class="emotions-label">{{ emotion }}</p>
+            <p class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</p>
-            <p :key="postsEmotionsCountByEmotion[emotion.toLowerCase()]">
+            <ds-heading
-              {{ postsEmotionsCountByEmotion[emotion.toLowerCase()] }}
+              style="display: inline"
-            </p>
+              tag="h3"
+              :key="postsEmotionsCountByEmotion[emotion]"
+            >
+              {{ postsEmotionsCountByEmotion[emotion] }}x
+            </ds-heading>
+            {{ $t('contribution.emotions-label.emoted') }}
           </div>
         </ds-flex-item>
       </div>
@@ -35,9 +40,8 @@ export default {
   data() {
     return {
       loading: false,
-      emotionsList: ['Funny', 'Happy', 'Surprised', 'Cry', 'Angry'],
       selectedEmotions: [],
-      postsEmotionsCountByEmotion: {},
+      postsEmotionsCountByEmotion: { funny: 0, happy: 0, surprised: 0, cry: 0, angry: 0 },
     }
   },
   computed: {
@@ -46,24 +50,19 @@ export default {
     }),
   },
   mounted() {
-    this.emotionsList.map(emotion => {
+    this.myEmotions()
-      this.emotionsCount(emotion.toLowerCase())
+    Object.keys(this.postsEmotionsCountByEmotion).map(emotion => {
+      this.emotionsCount(emotion)
     })
   },
   methods: {
     iconPath(emotion) {
       if (this.isActive(emotion)) {
-        return `/img/svg/emoji/${emotion.toLowerCase()}_color.svg`
+        return `/img/svg/emoji/${emotion}_color.svg`
       }
-      return `/img/svg/emoji/${emotion.toLowerCase()}.svg`
+      return `/img/svg/emoji/${emotion}.svg`
     },
     toggleEmotion(emotion) {
-      const index = this.selectedEmotions.indexOf(emotion)
-      if (index > -1) {
-        this.selectedEmotions.splice(index, 1)
-      } else {
-        this.selectedEmotions.push(emotion)
-      }
       const addPostEmotionsMutation = gql`
         mutation($from: _UserInput!, $to: _PostInput!, $data: _EMOTEDInput!) {
           AddPostEmotions(from: $from, to: $to, data: $data) {
@@ -76,14 +75,26 @@ export default {
           RemovePostEmotions(from: $from, to: $to, data: $data)
         }
       `
-      this.$apollo.mutate({
+      this.$apollo
-        mutation: this.isActive(emotion) ? addPostEmotionsMutation : removePostEmotionsMutation,
+        .mutate({
-        variables: {
+          mutation: this.isActive(emotion) ? removePostEmotionsMutation : addPostEmotionsMutation,
-          from: { id: this.currentUser.id },
+          variables: {
-          to: { id: this.post.id },
+            from: { id: this.currentUser.id },
-          data: { emotion: emotion.toLowerCase() },
+            to: { id: this.post.id },
-        },
+            data: { emotion },
-      })
+          },
+        })
+        .then(response => {
+          this.isActive(emotion)
+            ? this.postsEmotionsCountByEmotion[emotion]--
+            : this.postsEmotionsCountByEmotion[emotion]++
+          const index = this.selectedEmotions.indexOf(emotion)
+          if (index > -1) {
+            this.selectedEmotions.splice(index, 1)
+          } else {
+            this.selectedEmotions.push(emotion)
+          }
+        })
     },
     isActive(emotion) {
       const index = this.selectedEmotions.indexOf(emotion)
@@ -96,16 +107,30 @@ export default {
       this.$apollo
         .query({
           query: gql`
-            query($id: ID!, $data: _EMOTEDInput!) {
+            query($postId: ID!, $data: _EMOTEDInput!) {
-              postsEmotionsCountByEmotion(id: $id, data: $data)
+              postsEmotionsCountByEmotion(postId: $postId, data: $data)
             }
           `,
-          variables: { id: this.post.id, data: { emotion } },
+          variables: { postId: this.post.id, data: { emotion } },
         })
         .then(({ data: { postsEmotionsCountByEmotion } }) => {
           this.postsEmotionsCountByEmotion[emotion] = postsEmotionsCountByEmotion
         })
     },
+    myEmotions() {
+      this.$apollo
+        .query({
+          query: gql`
+            query($postId: ID!) {
+              postsEmotionsCountByCurrentUser(postId: $postId)
+            }
+          `,
+          variables: { postId: this.post.id },
+        })
+        .then(({ data: { postsEmotionsCountByCurrentUser } }) => {
+          this.selectedEmotions = postsEmotionsCountByCurrentUser
+        })
+    },
   },
 }
 </script>

webapp/locales/de.json

@@ -415,6 +415,14 @@
     "languageSelectLabel": "Sprache",
     "categories": {
       "infoSelectedNoOfMaxCategories": "{chosen} von {max} Kategorien ausgewählt"
+    },
+    "emotions-label": {
+      "funny": "Lustig",
+      "happy": "Glücklich",
+      "surprised": "Erstaunt",
+      "cry": "Zum Weinen",
+      "angry": "Verärgert",
+      "emoted": "emotiert"
     }
   },
   "terms": {

webapp/locales/en.json

@@ -416,6 +416,14 @@
     "languageSelectLabel": "Language",
     "categories": {
       "infoSelectedNoOfMaxCategories": "{chosen} of {max} categories selected"
+    },
+    "emotions-label": {
+      "funny": "Funny",
+      "happy": "Happy",
+      "surprised": "Surprised",
+      "cry": "Cry",
+      "angry": "Angry",
+      "emoted": "emoted"
     }
   },
   "terms": {