Refactor code

- Remove vuex as we don't need with vue-apollo and watch
- Use chunk[i] instead of firstGroup, etc...
- Extract Category query to its own file
- Mobile responsive categories dropdown

webapp/components/CategoriesSelect/CategoriesSelect.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import gql from 'graphql-tag'
+import CategoryQuery from '~/graphql/CategoryQuery.js'
 
 export default {
   props: {
@@ -85,13 +85,7 @@ export default {
   apollo: {
     Category: {
       query() {
-        return gql(`{
-          Category {
-            id
-            name
-            icon
-          }
-        }`)
+        return CategoryQuery()
       },
       result(result) {
         this.categories = result.data.Category

webapp/components/FilterPosts/FilterPosts.vue

@@ -7,13 +7,16 @@
     <template slot="popover">
       <ds-container>
         <ds-space />
-        <ds-flex>
-          <ds-flex-item width="20%">
+        <ds-flex :groupedCategories="chunk">
+          <ds-flex-item
+            :width="{ base: '100%', sm: '100%', md: '100%', lg: '20%' }"
+            class="categories-list"
+          >
             <ds-space margin-bottom="x-small" />
-            <ds-flex>
+            <ds-flex id="filter-posts-header">
               <ds-heading tag="h4">{{ $t('filter-posts.header') }}</ds-heading>
               <ds-flex-item width="10%" />
-              <ds-flex-item width="100%" style="text-align:center;">
+              <ds-flex-item width="100%">
                 <ds-button
                   icon="check"
                   @click.stop.prevent="toggleCategory()"
@@ -26,8 +29,8 @@
               </ds-flex-item>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in firstGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[0]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -46,8 +49,8 @@
               </ds-flex>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in secondGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[1]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -66,8 +69,8 @@
               </ds-flex>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in thirdGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[2]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -86,8 +89,8 @@
               </ds-flex>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in fourthGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[3]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -106,8 +109,8 @@
               </ds-flex>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in fifthGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[4]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -126,8 +129,8 @@
               </ds-flex>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in sixthGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[5]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -146,8 +149,8 @@
               </ds-flex>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in seventhGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[6]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -166,8 +169,8 @@
               </ds-flex>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in eigthGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[7]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -208,14 +211,6 @@ export default {
   data() {
     return {
       pageSize: 12,
-      firstGroup: [],
-      secondGroup: [],
-      thirdGroup: [],
-      fourthGroup: [],
-      fifthGroup: [],
-      sixthGroup: [],
-      seventhGroup: [],
-      eigthGroup: [],
       selectedCategoryIds: [],
       allCategories: true,
     }
@@ -234,24 +229,10 @@ export default {
       return groupedCategories
     },
   },
-  mounted() {
-    this.groupCategories()
-  },
   methods: {
     ...mapMutations({
       setPosts: 'posts/SET_POSTS',
     }),
-    groupCategories() {
-      const groupedCategories = this.chunk
-      this.firstGroup = groupedCategories[0]
-      this.secondGroup = groupedCategories[1]
-      this.thirdGroup = groupedCategories[2]
-      this.fourthGroup = groupedCategories[3]
-      this.fifthGroup = groupedCategories[4]
-      this.sixthGroup = groupedCategories[5]
-      this.seventhGroup = groupedCategories[6]
-      this.eigthGroup = groupedCategories[7]
-    },
     filterPosts(categoryIds) {
       const filter = categoryIds.length
         ? { categories_in: { id_in: this.selectedCategoryIds } }
@@ -292,6 +273,9 @@ export default {
 }
 </script>
 <style lang="scss">
+#filter-posts-header {
+  display: block;
+}
 .categories-list {
   text-align: center;
 }

webapp/graphql/CategoryQuery.js

@@ -0,0 +1,11 @@
+import gql from 'graphql-tag'
+
+export default () => {
+  return gql(`{
+    Category {
+      id
+      name
+      icon
+    }
+  }`)
+}

webapp/layouts/default.vue

@@ -6,7 +6,7 @@
           <ds-flex class="main-navigation-flex">
             <ds-flex-item :width="{ lg: '5%' }" />
             <ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
-              <a @click="$router.push('/').go('/')">
+              <a @click="$router.go('/')">
                 <ds-logo />
               </a>
             </ds-flex-item>
@@ -37,7 +37,7 @@
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             >
               <no-ssr>
-                <filter-posts placement="bottom-end" offset="23" :categories="getCategories" />
+                <filter-posts placement="bottom-end" offset="23" :categories="categories" />
               </no-ssr>
             </ds-flex-item>
             <ds-flex-item
@@ -129,8 +129,7 @@
 </template>
 
 <script>
-import gql from 'graphql-tag'
-import { mapGetters, mapActions, mapMutations } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import SearchInput from '~/components/SearchInput.vue'
 import Modal from '~/components/Modal'
@@ -139,6 +138,7 @@ import Dropdown from '~/components/Dropdown'
 import HcAvatar from '~/components/Avatar/Avatar.vue'
 import seo from '~/mixins/seo'
 import FilterPosts from '~/components/FilterPosts/FilterPosts.vue'
+import CategoryQuery from '~/graphql/CategoryQuery.js'
 
 export default {
   components: {
@@ -155,6 +155,7 @@ export default {
     return {
       mobileSearchVisible: false,
       toggleMobileMenu: false,
+      categories: [],
     }
   },
   computed: {
@@ -165,7 +166,6 @@ export default {
       isAdmin: 'auth/isAdmin',
       quickSearchResults: 'search/quickResults',
       quickSearchPending: 'search/quickPending',
-      getCategories: 'categories/categories',
     }),
     userName() {
       const { name } = this.user || {}
@@ -204,14 +204,16 @@ export default {
       return routes
     },
   },
+  watch: {
+    Category(category) {
+      this.categories = category || []
+    },
+  },
   methods: {
     ...mapActions({
       quickSearchClear: 'search/quickClear',
       quickSearch: 'search/quickSearch',
     }),
-    ...mapMutations({
-      setCategories: 'categories/SET_CATEGORIES',
-    }),
     goToPost(item) {
       this.$nextTick(() => {
         this.$router.push({
@@ -240,16 +242,7 @@ export default {
   apollo: {
     Category: {
       query() {
-        return gql(`{
-          Category {
-            id
-            name
-            icon
-          }
-        }`)
-      },
-      result({ data: Category }) {
-        this.setCategories(Category)
+        return CategoryQuery()
       },
       fetchPolicy: 'cache-and-network',
     },

webapp/package.json

@@ -111,4 +111,4 @@
     "vue-jest": "~3.0.4",
     "vue-svg-loader": "~0.12.0"
   }
-}
+}

webapp/pages/index.vue

@@ -2,11 +2,7 @@
   <div>
     <ds-flex :width="{ base: '100%' }" gutter="base">
       <ds-flex-item>
-        <filter-menu
-          :user="currentUser"
-          @changeFilterBubble="changeFilterBubble"
-          :categories="categories"
-        />
+        <filter-menu :user="currentUser" @changeFilterBubble="changeFilterBubble" />
       </ds-flex-item>
       <hc-post-card
         v-for="(post, index) in posts"
@@ -35,7 +31,7 @@ import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import uniqBy from 'lodash/uniqBy'
 import HcPostCard from '~/components/PostCard'
 import HcLoadMore from '~/components/LoadMore.vue'
-import { mapGetters, mapActions, mapMutations } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import { filterPosts } from '~/graphql/PostQuery.js'
 
 export default {
@@ -60,7 +56,6 @@ export default {
   computed: {
     ...mapGetters({
       currentUser: 'auth/user',
-      categories: 'categories/categories',
       posts: 'posts/posts',
     }),
     tags() {
@@ -71,9 +66,6 @@ export default {
     },
   },
   methods: {
-    ...mapActions({
-      fetchCategories: 'categories/fetchCategories',
-    }),
     ...mapMutations({
       setPosts: 'posts/SET_POSTS',
     }),

webapp/store/categories.js

@@ -1,42 +0,0 @@
-import gql from 'graphql-tag'
-
-export const state = () => {
-  return {
-    categories: null,
-    pending: false,
-  }
-}
-
-export const mutations = {
-  SET_CATEGORIES(state, categories) {
-    state.categories = categories || null
-  },
-  SET_PENDING(state, pending) {
-    state.pending = pending
-  },
-}
-
-export const getters = {
-  categories(state) {
-    return state.categories || []
-  },
-}
-
-export const actions = {
-  async fetchCategories({ commit }) {
-    const client = this.app.apolloProvider.defaultClient
-    const {
-      data: { Category },
-    } = await client.query({
-      query: gql(`{
-          Category {
-            id
-            name
-            icon
-          }
-      }`),
-    })
-    commit('SET_CATEGORIES', Category)
-    return Category
-  },
-}