Finish filter by followed users only

webapp/components/FilterMenu/FilterMenu.vue

@@ -8,11 +8,11 @@
       </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"
+          <ds-button
+            name="filter-by-followed-authors-only"
+            icon="user-plus"
+            :primary="onlyFollowed"
+            @click="toggleOnlyFollowed"
           />
         </div>
       </ds-flex-item>

webapp/pages/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
     <ds-flex :width="{ base: '100%' }" gutter="base">
-    <ds-flex-item>
-      <filter-menu />
-    </ds-flex-item>
-    <hc-post-card
-      v-for="(post, index) in uniq(Post)"
-      :key="post.id"
-      :post="post"
-      :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
-      @deletePost="deletePost(index, post.id)"
-    />
+      <ds-flex-item>
+        <filter-menu @changeFilterBubble="changeFilterBubble" />
+      </ds-flex-item>
+      <hc-post-card
+        v-for="(post, index) in uniq(Post)"
+        :key="post.id"
+        :post="post"
+        :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
+        @deletePost="deletePost(index, post.id)"
+      />
     </ds-flex>
     <no-ssr>
       <ds-button
@@ -45,6 +45,7 @@ export default {
       Post: [],
       page: 1,
       pageSize: 10,
+      filterBubble: { author: 'all' },
     }
   },
   computed: {
@@ -56,6 +57,10 @@ export default {
     },
   },
   methods: {
+    changeFilterBubble(filterBubble) {
+      this.filterBubble = filterBubble
+      this.$apollo.queries.Post.refresh()
+    },
     uniq(items, field = 'id') {
       return uniqBy(items, field)
     },
@@ -71,6 +76,7 @@ export default {
       this.page++
       this.$apollo.queries.Post.fetchMore({
         variables: {
+          filterBubble: this.filterBubble,
           first: this.pageSize,
           offset: this.offset,
         },
@@ -96,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
@@ -140,6 +146,7 @@ export default {
       },
       variables() {
         return {
+          filterBubble: this.filterBubble,
           first: this.pageSize,
           offset: 0,
         }