Merge pull request #699 from Human-Connection/269-filter_by_followed_users

269 filter by followed users

cypress/integration/common/steps.js

@@ -230,7 +230,7 @@ When('I type in the following text:', text => {
 
 Then('the post shows up on the landing page at position {int}', index => {
   cy.openPage('landing')
-  const selector = `:nth-child(${index}) > .ds-card > .ds-card-content`
+  const selector = `.post-card:nth-child(${index}) > .ds-card-content`
   cy.get(selector).should('contain', lastPost.title)
   cy.get(selector).should('contain', lastPost.content)
 })

webapp/components/FilterMenu/FilterMenu.spec.js

@@ -0,0 +1,54 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import FilterMenu from './FilterMenu.vue'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+describe('FilterMenu.vue', () => {
+  let wrapper
+  let mocks
+
+  const createWrapper = mountMethod => {
+    return mountMethod(FilterMenu, {
+      mocks,
+      localVue,
+    })
+  }
+
+  beforeEach(() => {
+    mocks = { $t: () => {} }
+  })
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = createWrapper(mount)
+    })
+
+    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()
+      })
+
+      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('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

@@ -0,0 +1,57 @@
+<template>
+  <ds-card>
+    <ds-flex>
+      <ds-flex-item class="filter-menu-title">
+        <ds-heading size="h3">
+          {{ $t('filter-menu.title') }}
+        </ds-heading>
+      </ds-flex-item>
+      <ds-flex-item>
+        <div class="filter-menu-buttons">
+          <ds-button
+            name="filter-by-followed-authors-only"
+            icon="user-plus"
+            :primary="onlyFollowed"
+            @click="toggleOnlyFollowed"
+          />
+        </div>
+      </ds-flex-item>
+    </ds-flex>
+  </ds-card>
+</template>
+
+<script>
+export default {
+  data() {
+    // We have to fix styleguide here. It uses .includes wich will always be
+    // false for arrays of objects.
+    return {
+      filterBubble: {
+        author: 'all',
+      },
+    }
+  },
+  computed: {
+    onlyFollowed() {
+      return this.filterBubble.author === 'following'
+    },
+  },
+  methods: {
+    toggleOnlyFollowed() {
+      this.filterBubble.author = this.onlyFollowed ? 'all' : 'following'
+      this.$emit('changeFilterBubble', this.filterBubble)
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.filter-menu-title {
+  display: flex;
+  align-items: center;
+}
+
+.filter-menu-buttons {
+  float: right;
+}
+</style>

webapp/locales/de.json

@@ -1,4 +1,7 @@
 {
+  "filter-menu": {
+    "title": "Deine Filterblase"
+  },
   "login": {
     "copy": "Wenn Du bereits ein Konto bei Human Connection hast, melde Dich bitte hier an.",
     "login": "Einloggen",

webapp/locales/en.json

@@ -1,4 +1,7 @@
 {
+  "filter-menu": {
+    "title": "Your filter bubble"
+  },
   "login": {
     "copy": "If you already have a human-connection account, login here.",
     "login": "Login",

webapp/pages/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ds-flex v-if="Post && Post.length" :width="{ base: '100%' }" gutter="base">
+    <ds-flex :width="{ base: '100%' }" gutter="base">
+      <ds-flex-item>
+        <filter-menu @changeFilterBubble="changeFilterBubble" />
+      </ds-flex-item>
       <hc-post-card
         v-for="(post, index) in uniq(Post)"
         :key="post.id"
@@ -24,6 +27,7 @@
 </template>
 
 <script>
+import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import gql from 'graphql-tag'
 import uniqBy from 'lodash/uniqBy'
 import HcPostCard from '~/components/PostCard'
@@ -31,6 +35,7 @@ import HcLoadMore from '~/components/LoadMore.vue'
 
 export default {
   components: {
+    FilterMenu,
     HcPostCard,
     HcLoadMore,
   },
@@ -40,6 +45,7 @@ export default {
       Post: [],
       page: 1,
       pageSize: 10,
+      filterBubble: { author: 'all' },
     }
   },
   computed: {
@@ -51,6 +57,10 @@ export default {
     },
   },
   methods: {
+    changeFilterBubble(filterBubble) {
+      this.filterBubble = filterBubble
+      this.$apollo.queries.Post.refresh()
+    },
     uniq(items, field = 'id') {
       return uniqBy(items, field)
     },
@@ -66,6 +76,7 @@ export default {
       this.page++
       this.$apollo.queries.Post.fetchMore({
         variables: {
+          filterBubble: this.filterBubble,
           first: this.pageSize,
           offset: this.offset,
         },
@@ -91,8 +102,8 @@ export default {
     Post: {
       query() {
         return gql(`
-          query Post($first: Int, $offset: Int) {
-            Post(first: $first, offset: $offset) {
+          query Post($filterBubble: FilterBubble, $first: Int, $offset: Int) {
+            Post(filterBubble: $filterBubble, first: $first, offset: $offset) {
               id
               title
               contentExcerpt
@@ -135,6 +146,7 @@ export default {
       },
       variables() {
         return {
+          filterBubble: this.filterBubble,
           first: this.pageSize,
           offset: 0,
         }