Allow filter by multiple emotions, test getters

- Co-authored-by: vardyb <brent.vardy@challengelogic.net>
- Co-aurhored-by: mike aono <aonomike@gmail.com>

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

@@ -16,7 +16,7 @@ input _EMOTEDInput {
 }
 
 input _PostEMOTEDFilter {
-	emotion: Emotion
+	emotion_in: [Emotion]
 	createdAt: String
 	updatedAt: String
 }

webapp/components/FilterPosts/FilterPosts.spec.js

@@ -61,7 +61,7 @@ describe('FilterPosts.vue', () => {
       },
       'postsFilter/filteredCategoryIds': jest.fn(() => []),
       'postsFilter/filteredByUsersFollowed': jest.fn(),
-      'postsFilter/filteredByEmotions': jest.fn(() => jest.fn()),
+      'postsFilter/filteredByEmotions': jest.fn(() => []),
     }
     const openFilterPosts = () => {
       const store = new Vuex.Store({ mutations, getters })

webapp/components/FilterPosts/GeneralFilterMenuItems.vue

@@ -32,7 +32,7 @@
           </ds-flex-item>
         </ds-flex>
       </ds-flex-item>
-      <div v-for="emotion in Object.keys(PostsEmotionsCountByEmotion)" :key="emotion">
+      <div v-for="emotion in emotionsArray" :key="emotion">
         <ds-flex-item :width="{ lg: '100%' }">
           <ds-button
             size="large"
@@ -60,7 +60,7 @@ export default {
   },
   data() {
     return {
-      PostsEmotionsCountByEmotion: { funny: 0, happy: 0, surprised: 0, cry: 0, angry: 0 },
+      emotionsArray: ['funny', 'happy', 'surprised', 'cry', 'angry'],
     }
   },
   computed: {
@@ -75,7 +75,7 @@ export default {
       toogleFilteredByEmotions: 'postsFilter/TOGGLE_FILTER_BY_EMOTIONS',
     }),
     iconPath(emotion) {
-      if (this.filteredByEmotions(emotion)) {
+      if (this.filteredByEmotions.includes(emotion)) {
         return `/img/svg/emoji/${emotion}_color.svg`
       }
       return `/img/svg/emoji/${emotion}.svg`

webapp/store/postsFilter.js

@@ -42,16 +42,9 @@ export const mutations = {
   },
   TOGGLE_FILTER_BY_EMOTIONS(state, emotion) {
     const filter = clone(state.filter)
-    const emotionName = get(filter, 'emotions_in.emotions')
-    if (emotionName) {
-      delete filter.emotions_in
+    update(filter, 'emotions_some.emotion_in', emotions => xor(emotions, [emotion]))
+    if (isEmpty(get(filter, 'emotions_some.emotion_in'))) delete filter.emotions_some
     state.filter = filter
-    } else {
-      state.filter = {
-        ...filter,
-        emotions_in: { emotion: emotion },
-      }
-    }
   },
 }
 
@@ -68,7 +61,7 @@ export const getters = {
   filteredByUsersFollowed(state) {
     return !!get(state.filter, 'author.followedBy_some.id')
   },
-  filteredByEmotions: state => emotion => {
-    return get(state.filter, 'emotions_in.emotion') === emotion
+  filteredByEmotions(state) {
+    return get(state.filter, 'emotions_some.emotion_in') || []
   },
 }

webapp/store/postsFilter.spec.js

@@ -43,6 +43,30 @@ describe('getters', () => {
       expect(getters.filteredByUsersFollowed(state)).toBe(false)
     })
   })
+
+  describe('filteredByEmotions', () => {
+    it('returns an emotions array if filter is set', () => {
+      state = { filter: { emotions_some: { emotion_in: ['sad'] } } }
+      expect(getters.filteredByEmotions(state)).toEqual(['sad'])
+    })
+
+    it('returns an emotions array even when other filters are set', () => {
+      state = {
+        filter: { emotions_some: { emotion_in: ['sad'] }, categories_some: { id_in: [23] } },
+      }
+      expect(getters.filteredByEmotions(state)).toEqual(['sad'])
+    })
+
+    it('returns empty array if filter is not set', () => {
+      state = { filter: {} }
+      expect(getters.filteredByEmotions(state)).toEqual([])
+    })
+
+    it('returns empty array if another filter is set, but not emotions', () => {
+      state = { filter: { categories_some: { id_in: [23] } } }
+      expect(getters.filteredByEmotions(state)).toEqual([])
+    })
+  })
 })
 
 describe('mutations', () => {