Add functionality to filter posts by category

- only filters if you send two requests :'(

webapp/components/FilterPosts/FilterPosts.vue

@@ -22,8 +22,7 @@
           slot-scope="item"
           class="locale-menu-item"
           :route="item.route"
-          :parents="item.parents"
-          @click.stop.prevent="filterPostsByCategory(item.route.name, toggleMenu)"
+          @click.stop.prevent="filterPosts(item.route.name, toggleMenu)"
         >
           <ds-icon :name="item.route.icon" />
           {{ item.route.name }}
@@ -33,8 +32,8 @@
   </dropdown>
 </template>
 <script>
-import gql from 'graphql-tag'
 import Dropdown from '~/components/Dropdown'
+import { filterPosts } from '~/graphql/PostQuery.js'
 
 export default {
   components: {
@@ -45,6 +44,12 @@ export default {
     offset: { type: [String, Number], default: '16' },
     categories: { type: Array, default: () => [] },
   },
+  data() {
+    return {
+      filter: {},
+      pageSize: 12,
+    }
+  },
   computed: {
     routes() {
       let routes = this.categories.map(category => {
@@ -58,28 +63,33 @@ export default {
     },
   },
   methods: {
-    filterPostsByCategory(name) {
-      const filterPostsByCategoryMutation = gql`
-        query($name: String) {
-          Post(filter: { categories_some: { name: $name } }) {
-            title
-            id
-            categories {
-              name
-            }
+    filterPosts(name) {
+      this.filter = { categories_some: { name } }
+      this.$apollo.mutate({
+        mutation: filterPosts(this.$i18n),
+        variables: {
+          filter: this.filter,
+          first: this.pageSize,
+          offset: 0,
+        },
+        update: (store, { data: { Post } }) => {
+          const data = store.readQuery({
+            query: filterPosts(this.$i18n),
+            variables: {
+              filter: {},
+              first: this.pageSize,
+              offset: 0,
+            },
+          })
+          data.Post = Post
+          data.Post.push(Post)
+          const index = data.Post.findIndex(old => old.id === Post.id)
+          if (index !== -1) {
+            data.Post.splice(index, 1)
           }
-        }
-      `
-      setTimeout(() => {
-        this.$apollo
-          .mutate({
-            mutation: filterPostsByCategoryMutation,
-            variables: { name },
-          })
-          .then(res => {
-            // update the Post query
-          })
-      }, 500)
+          store.writeQuery({ query: filterPosts(this.$i18n), data })
+        },
+      })
     },
   },
 }

webapp/graphql/PostQuery.js

@@ -77,3 +77,49 @@ export default i18n => {
       }
     `)
 }
+
+export const filterPosts = i18n => {
+  const lang = i18n.locale().toUpperCase()
+  return gql(`
+  query Post($filter: _PostFilter, $first: Int, $offset: Int) {
+    Post(filter: $filter, first: $first, offset: $offset) {
+      id
+      title
+      contentExcerpt
+      createdAt
+      disabled
+      deleted
+      slug
+      image
+      author {
+        id
+        avatar
+        slug
+        name
+        disabled
+        deleted
+        contributionsCount
+        shoutedCount
+        commentsCount
+        followedByCount
+        followedByCurrentUser
+        location {
+          name: name${lang}
+        }
+        badges {
+          id
+          key
+          icon
+        }
+      }
+      commentsCount
+      categories {
+        id
+        name
+        icon
+      }
+      shoutedCount
+    }
+  }
+`)
+}

webapp/pages/index.vue

@@ -28,11 +28,11 @@
 
 <script>
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
-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'
+import { filterPosts } from '~/graphql/PostQuery.js'
 
 export default {
   components: {
@@ -105,48 +105,7 @@ export default {
   apollo: {
     Post: {
       query() {
-        return gql(`
-          query Post($filter: _PostFilter, $first: Int, $offset: Int) {
-            Post(filter: $filter, first: $first, offset: $offset) {
-              id
-              title
-              contentExcerpt
-              createdAt
-              disabled
-              deleted
-              slug
-              image
-              author {
-                id
-                avatar
-                slug
-                name
-                disabled
-                deleted
-                contributionsCount
-                shoutedCount
-                commentsCount
-                followedByCount
-                followedByCurrentUser
-                location {
-                  name: name${this.$i18n.locale().toUpperCase()}
-                }
-                badges {
-                  id
-                  key
-                  icon
-                }
-              }
-              commentsCount
-              categories {
-                id
-                name
-                icon
-              }
-              shoutedCount
-            }
-          }
-        `)
+        return filterPosts(this.$i18n)
       },
       variables() {
         return {