From c7959dadb709ab2c46cf5c1bce68e5dff10e5978 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Tue, 9 Jul 2019 13:00:08 -0300
Subject: [PATCH] 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
---
 .../CategoriesSelect/CategoriesSelect.vue     | 10 +--
 webapp/components/FilterPosts/FilterPosts.vue | 68 +++++++------------
 webapp/graphql/CategoryQuery.js               | 11 +++
 webapp/layouts/default.vue                    | 29 +++-----
 webapp/package.json                           |  2 +-
 webapp/pages/index.vue                        | 12 +---
 webapp/store/categories.js                    | 42 ------------
 7 files changed, 53 insertions(+), 121 deletions(-)
 create mode 100644 webapp/graphql/CategoryQuery.js
 delete mode 100644 webapp/store/categories.js

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index 163f31419..94276a958 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/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
diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 2dfaa7bf4..526736d95 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/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;
 }
diff --git a/webapp/graphql/CategoryQuery.js b/webapp/graphql/CategoryQuery.js
new file mode 100644
index 000000000..a11dcc8e1
--- /dev/null
+++ b/webapp/graphql/CategoryQuery.js
@@ -0,0 +1,11 @@
+import gql from 'graphql-tag'
+
+export default () => {
+  return gql(`{
+    Category {
+      id
+      name
+      icon
+    }
+  }`)
+}
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 82851cb8a..cf9a78a71 100644
--- a/webapp/layouts/default.vue
+++ b/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',
     },
diff --git a/webapp/package.json b/webapp/package.json
index d69f7e20e..3fa5180c1 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -111,4 +111,4 @@
     "vue-jest": "~3.0.4",
     "vue-svg-loader": "~0.12.0"
   }
-}
\ No newline at end of file
+}
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index e39aca567..038a2802c 100644
--- a/webapp/pages/index.vue
+++ b/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',
     }),
diff --git a/webapp/store/categories.js b/webapp/store/categories.js
deleted file mode 100644
index 5fa67ed66..000000000
--- a/webapp/store/categories.js
+++ /dev/null
@@ -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
-  },
-}