Merge branch '1488-filter-posts-by-emotion' of github.com:Human-Connection/Human-Connection into 1488-filter-posts-by-emotion

webapp/components/FilterPosts/FilterPosts.spec.js

@@ -19,6 +19,7 @@ describe('FilterPosts.vue', () => {
   let allCategoriesButton
   let environmentAndNatureButton
   let democracyAndPoliticsButton
+  let happyEmotionButton
 
   beforeEach(() => {
     mocks = {
@@ -52,6 +53,7 @@ describe('FilterPosts.vue', () => {
       'postsFilter/TOGGLE_FILTER_BY_FOLLOWED': jest.fn(),
       'postsFilter/RESET_CATEGORIES': jest.fn(),
       'postsFilter/TOGGLE_CATEGORY': jest.fn(),
+      'postsFilter/TOGGLE_EMOTION': jest.fn(),
     }
     getters = {
       'postsFilter/isActive': () => false,
@@ -121,5 +123,22 @@ describe('FilterPosts.vue', () => {
         expect(mutations['postsFilter/TOGGLE_FILTER_BY_FOLLOWED']).toHaveBeenCalledWith({}, 'u34')
       })
     })
+
+    describe('click on an "emotions-buttons" button', () => {
+      it('calls TOGGLE_EMOTION when clicked', () => {
+        const wrapper = openFilterPosts()
+        happyEmotionButton = wrapper.findAll('button.emotions-buttons').at(1)
+        happyEmotionButton.trigger('click')
+        expect(mutations['postsFilter/TOGGLE_EMOTION']).toHaveBeenCalledWith({}, 'happy')
+      })
+
+      it('sets the attribute `src` to colorized image', () => {
+        getters['postsFilter/filteredByEmotions'] = jest.fn(() => ['happy'])
+        const wrapper = openFilterPosts()
+        happyEmotionButton = wrapper.findAll('button.emotions-buttons').at(1)
+        const happyEmotionButtonImage = happyEmotionButton.find('img')
+        expect(happyEmotionButtonImage.attributes().src).toEqual('/img/svg/emoji/happy_color.svg')
+      })
+    })
   })
 })

webapp/components/FilterPosts/GeneralFilterMenuItems.vue

@@ -72,7 +72,7 @@ export default {
   methods: {
     ...mapMutations({
       toggleFilteredByFollowed: 'postsFilter/TOGGLE_FILTER_BY_FOLLOWED',
-      toogleFilteredByEmotions: 'postsFilter/TOGGLE_FILTER_BY_EMOTIONS',
+      toogleFilteredByEmotions: 'postsFilter/TOGGLE_EMOTION',
     }),
     iconPath(emotion) {
       if (this.filteredByEmotions.includes(emotion)) {

webapp/graphql/ModerationListQuery.js

@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 
 export default app => {
-  return gql(`
+  return gql`
     query {
       Report(first: 20, orderBy: createdAt_desc) {
         id
@@ -30,6 +30,7 @@ export default app => {
           }
         }
         comment {
+          id
           contentExcerpt
           author {
             id
@@ -76,5 +77,5 @@ export default app => {
         }
       }
     }
-  `)
+  `
 }

webapp/pages/moderation/index.vue

@@ -1,8 +1,6 @@
 <template>
   <ds-card space="small">
-    <ds-heading tag="h3">
-      {{ $t('moderation.reports.name') }}
-    </ds-heading>
+    <ds-heading tag="h3">{{ $t('moderation.reports.name') }}</ds-heading>
     <ds-table v-if="Report && Report.length" :data="Report" :fields="fields" condensed>
       <template slot="name" slot-scope="scope">
         <div v-if="scope.row.type === 'Post'">
@@ -15,23 +13,23 @@
             <b>{{ scope.row.post.title | truncate(50) }}</b>
           </nuxt-link>
           <br />
-          <ds-text size="small" color="soft">
-            {{ scope.row.post.author.name }}
-          </ds-text>
+          <ds-text size="small" color="soft">{{ scope.row.post.author.name }}</ds-text>
         </div>
         <div v-else-if="scope.row.type === 'Comment'">
           <nuxt-link
             :to="{
               name: 'post-id-slug',
-              params: { id: scope.row.comment.post.id, slug: scope.row.comment.post.slug },
+              params: {
+                id: scope.row.comment.post.id,
+                slug: scope.row.comment.post.slug,
+              },
+              hash: `#commentId-${scope.row.comment.id}`,
             }"
           >
-            <b>{{ scope.row.comment.contentExcerpt | truncate(50) }}</b>
+            <b>{{ scope.row.comment.contentExcerpt | removeHtml | truncate(50) }}</b>
           </nuxt-link>
           <br />
-          <ds-text size="small" color="soft">
-            {{ scope.row.comment.author.name }}
-          </ds-text>
+          <ds-text size="small" color="soft">{{ scope.row.comment.author.name }}</ds-text>
         </div>
         <div v-else>
           <nuxt-link

webapp/store/postsFilter.js

@@ -40,7 +40,7 @@ export const mutations = {
     if (isEmpty(get(filter, 'categories_some.id_in'))) delete filter.categories_some
     state.filter = filter
   },
-  TOGGLE_FILTER_BY_EMOTIONS(state, emotion) {
+  TOGGLE_EMOTION(state, emotion) {
     const filter = clone(state.filter)
     update(filter, 'emotions_some.emotion_in', emotions => xor(emotions, [emotion]))
     if (isEmpty(get(filter, 'emotions_some.emotion_in'))) delete filter.emotions_some