Frontend uses neo4j-graphql-js's filters

webapp/components/FilterMenu/FilterMenu.spec.js

@@ -9,9 +9,11 @@ localVue.use(Styleguide)
 describe('FilterMenu.vue', () => {
   let wrapper
   let mocks
+  let propsData
 
   const createWrapper = mountMethod => {
     return mountMethod(FilterMenu, {
+      propsData,
       mocks,
       localVue,
     })
@@ -19,35 +21,48 @@ describe('FilterMenu.vue', () => {
 
   beforeEach(() => {
     mocks = { $t: () => {} }
+    propsData = {}
   })
 
-  describe('mount', () => {
+  describe('given a user', () => {
     beforeEach(() => {
-      wrapper = createWrapper(mount)
+      propsData = {
+        user: {
+          id: '4711',
+        },
+      }
     })
 
-    it('renders a card', () => {
-      expect(wrapper.is('.ds-card')).toBe(true)
-    })
-
-    describe('click "filter-by-followed-authors-only" button', () => {
-      it('emits filterBubble object', () => {
-        wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
-        expect(wrapper.emitted('changeFilterBubble')).toBeTruthy()
+    describe('mount', () => {
+      beforeEach(() => {
+        wrapper = createWrapper(mount)
       })
 
-      it('toggles filterBubble.author property', () => {
-        wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
-        expect(wrapper.emitted('changeFilterBubble')[0]).toEqual([{ author: 'following' }])
-        wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
-        expect(wrapper.emitted('changeFilterBubble')[1]).toEqual([{ author: 'all' }])
+      it('renders a card', () => {
+        expect(wrapper.is('.ds-card')).toBe(true)
       })
 
-      it('makes button primary', () => {
-        wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
-        expect(
-          wrapper.find({ name: 'filter-by-followed-authors-only' }).classes('ds-button-primary'),
-        ).toBe(true)
+      describe('click "filter-by-followed-authors-only" button', () => {
+        it('emits filterBubble object', () => {
+          wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
+          expect(wrapper.emitted('changeFilterBubble')).toBeTruthy()
+        })
+
+        it('toggles filterBubble.author property', () => {
+          wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
+          expect(wrapper.emitted('changeFilterBubble')[0]).toEqual([
+            { author: { followedBy_some: { id: '4711' } } },
+          ])
+          wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
+          expect(wrapper.emitted('changeFilterBubble')[1]).toEqual([{}])
+        })
+
+        it('makes button primary', () => {
+          wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
+          expect(
+            wrapper.find({ name: 'filter-by-followed-authors-only' }).classes('ds-button-primary'),
+          ).toBe(true)
+        })
       })
     })
   })

webapp/components/FilterMenu/FilterMenu.vue

@@ -11,7 +11,7 @@
           <ds-button
             name="filter-by-followed-authors-only"
             icon="user-plus"
-            :primary="onlyFollowed"
+            :primary="!!filterAuthorIsFollowedById"
             @click="toggleOnlyFollowed"
           />
         </div>
@@ -22,24 +22,30 @@
 
 <script>
 export default {
+  props: {
+    user: { type: Object, required: true },
+  },
   data() {
-    // We have to fix styleguide here. It uses .includes wich will always be
-    // false for arrays of objects.
     return {
-      filterBubble: {
-        author: 'all',
-      },
+      filter: {},
     }
   },
   computed: {
-    onlyFollowed() {
-      return this.filterBubble.author === 'following'
+    filterAuthorIsFollowedById() {
+      const { author = {} } = this.filter
+      /* eslint-disable camelcase */
+      const { followedBy_some = {} } = author
+      const { id } = followedBy_some
+      /* eslint-enable */
+      return id
     },
   },
   methods: {
     toggleOnlyFollowed() {
-      this.filterBubble.author = this.onlyFollowed ? 'all' : 'following'
-      this.$emit('changeFilterBubble', this.filterBubble)
+      this.filter = this.filterAuthorIsFollowedById
+        ? {}
+        : { author: { followedBy_some: { id: this.user.id } } }
+      this.$emit('changeFilterBubble', this.filter)
     },
   },
 }

webapp/pages/index.vue

@@ -2,7 +2,7 @@
   <div>
     <ds-flex :width="{ base: '100%' }" gutter="base">
       <ds-flex-item>
-        <filter-menu @changeFilterBubble="changeFilterBubble" />
+        <filter-menu :user="currentUser" @changeFilterBubble="changeFilterBubble" />
       </ds-flex-item>
       <hc-post-card
         v-for="(post, index) in uniq(Post)"
@@ -32,6 +32,7 @@ import gql from 'graphql-tag'
 import uniqBy from 'lodash/uniqBy'
 import HcPostCard from '~/components/PostCard'
 import HcLoadMore from '~/components/LoadMore.vue'
+import { mapGetters } from 'vuex'
 
 export default {
   components: {
@@ -45,10 +46,13 @@ export default {
       Post: [],
       page: 1,
       pageSize: 10,
-      filterBubble: { author: 'all' },
+      filter: {},
     }
   },
   computed: {
+    ...mapGetters({
+      currentUser: 'auth/user',
+    }),
     tags() {
       return this.Post ? this.Post[0].tags.map(tag => tag.name) : '-'
     },
@@ -57,8 +61,8 @@ export default {
     },
   },
   methods: {
-    changeFilterBubble(filterBubble) {
-      this.filterBubble = filterBubble
+    changeFilterBubble(filter) {
+      this.filter = filter
       this.$apollo.queries.Post.refresh()
     },
     uniq(items, field = 'id') {
@@ -76,7 +80,7 @@ export default {
       this.page++
       this.$apollo.queries.Post.fetchMore({
         variables: {
-          filterBubble: this.filterBubble,
+          filter: this.filter,
           first: this.pageSize,
           offset: this.offset,
         },
@@ -102,8 +106,8 @@ export default {
     Post: {
       query() {
         return gql(`
-          query Post($filterBubble: FilterBubble, $first: Int, $offset: Int) {
-            Post(filterBubble: $filterBubble, first: $first, offset: $offset) {
+          query Post($filter: _PostFilter, $first: Int, $offset: Int) {
+            Post(filter: $filter, first: $first, offset: $offset) {
               id
               title
               contentExcerpt
@@ -146,7 +150,7 @@ export default {
       },
       variables() {
         return {
-          filterBubble: this.filterBubble,
+          filter: this.filter,
           first: this.pageSize,
           offset: 0,
         }