From 8a3bd6b770084ded3233745a41d9532cb78faa10 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Thu, 5 Sep 2019 16:00:28 +0200
Subject: [PATCH] Extract categories filter into own component

- Co-authored-by: Brent Vardy <brent.vardy@challengelogic.net>
- Co-authored-by: Mike Aono <aonomike@gmail.com>
- Co-authored-by: Harald <harald.reingruber@gmx.at>
---
 .../FilterPosts/CategoriesFilters.vue         | 101 ++++++++++++++++++
 .../FilterPosts/FilterPostsMenuItems.vue      |  90 +---------------
 2 files changed, 106 insertions(+), 85 deletions(-)
 create mode 100644 webapp/components/FilterPosts/CategoriesFilters.vue

diff --git a/webapp/components/FilterPosts/CategoriesFilters.vue b/webapp/components/FilterPosts/CategoriesFilters.vue
new file mode 100644
index 000000000..59d17cb59
--- /dev/null
+++ b/webapp/components/FilterPosts/CategoriesFilters.vue
@@ -0,0 +1,101 @@
+<template>
+  <ds-space>
+    <ds-flex id="filter-posts-header">
+      <ds-heading tag="h4">{{ $t('filter-posts.categories.header') }}</ds-heading>
+      <ds-space margin-bottom="large" />
+    </ds-flex>
+    <ds-flex :gutter="{ lg: 'small' }">
+      <ds-flex-item
+        :width="{ base: '100%', sm: '100%', md: '100%', lg: '5%' }"
+        class="categories-menu-item"
+      >
+        <ds-flex>
+          <ds-flex-item width="10%" />
+          <ds-flex-item width="100%">
+            <ds-button
+              icon="check"
+              @click.stop.prevent="resetCategories"
+              :primary="!filteredCategoryIds.length"
+            />
+            <ds-flex-item>
+              <label class="category-labels">{{ $t('filter-posts.categories.all') }}</label>
+            </ds-flex-item>
+            <ds-space />
+          </ds-flex-item>
+        </ds-flex>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '4%' }" />
+      <ds-flex-item
+        :width="{ base: '0%', sm: '0%', md: '0%', lg: '3%' }"
+        id="categories-menu-divider"
+      />
+      <ds-flex-item
+        :width="{ base: '50%', sm: '50%', md: '50%', lg: '11%' }"
+        v-for="index in chunk.length"
+        :key="index"
+      >
+        <ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-menu">
+          <ds-flex class="categories-menu">
+            <ds-flex-item width="100%" class="categories-menu-item">
+              <ds-button
+                :icon="category.icon"
+                :primary="filteredCategoryIds.includes(category.id)"
+                @click.stop.prevent="toggleCategory(category.id)"
+              />
+              <ds-space margin-bottom="small" />
+            </ds-flex-item>
+            <ds-flex>
+              <ds-flex-item class="categories-menu-item">
+                <label class="category-labels">
+                  {{ $t(`contribution.category.name.${category.slug}`) }}
+                </label>
+              </ds-flex-item>
+              <ds-space margin-bottom="xx-large" />
+            </ds-flex>
+          </ds-flex>
+        </ds-flex>
+      </ds-flex-item>
+    </ds-flex>
+  </ds-space>
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+
+export default {
+  props: {
+    chunk: { type: Array, default: () => [] },
+  },
+  computed: {
+    ...mapGetters({
+      filteredCategoryIds: 'postsFilter/filteredCategoryIds',
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      resetCategories: 'postsFilter/RESET_CATEGORIES',
+      toggleCategory: 'postsFilter/TOGGLE_CATEGORY',
+    }),
+  },
+}
+</script>
+<style lang="scss">
+.categories-menu-item {
+  text-align: center;
+}
+
+.categories-menu {
+  justify-content: center;
+}
+
+.category-labels,
+.follow-label {
+  font-size: $font-size-small;
+}
+
+@media only screen and (min-width: 960px) {
+  #categories-menu-divider {
+    border-left: 1px solid $border-color-soft;
+    margin: 9px 0px 40px 0px;
+  }
+}
+</style>
diff --git a/webapp/components/FilterPosts/FilterPostsMenuItems.vue b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
index c761070b7..4c39b3fe7 100644
--- a/webapp/components/FilterPosts/FilterPostsMenuItems.vue
+++ b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
@@ -1,62 +1,6 @@
 <template>
   <ds-container>
-    <ds-space />
-    <ds-flex id="filter-posts-header">
-      <ds-heading tag="h4">{{ $t('filter-posts.categories.header') }}</ds-heading>
-      <ds-space margin-bottom="large" />
-    </ds-flex>
-    <ds-flex :gutter="{ lg: 'small' }">
-      <ds-flex-item
-        :width="{ base: '100%', sm: '100%', md: '100%', lg: '5%' }"
-        class="categories-menu-item"
-      >
-        <ds-flex>
-          <ds-flex-item width="10%" />
-          <ds-flex-item width="100%">
-            <ds-button
-              icon="check"
-              @click.stop.prevent="resetCategories"
-              :primary="!filteredCategoryIds.length"
-            />
-            <ds-flex-item>
-              <label class="category-labels">{{ $t('filter-posts.categories.all') }}</label>
-            </ds-flex-item>
-            <ds-space />
-          </ds-flex-item>
-        </ds-flex>
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '4%' }" />
-      <ds-flex-item
-        :width="{ base: '0%', sm: '0%', md: '0%', lg: '3%' }"
-        id="categories-menu-divider"
-      />
-      <ds-flex-item
-        :width="{ base: '50%', sm: '50%', md: '50%', lg: '11%' }"
-        v-for="index in chunk.length"
-        :key="index"
-      >
-        <ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-menu">
-          <ds-flex class="categories-menu">
-            <ds-flex-item width="100%" class="categories-menu-item">
-              <ds-button
-                :icon="category.icon"
-                :primary="filteredCategoryIds.includes(category.id)"
-                @click.stop.prevent="toggleCategory(category.id)"
-              />
-              <ds-space margin-bottom="small" />
-            </ds-flex-item>
-            <ds-flex>
-              <ds-flex-item class="categories-menu-item">
-                <label class="category-labels">
-                  {{ $t(`contribution.category.name.${category.slug}`) }}
-                </label>
-              </ds-flex-item>
-              <ds-space margin-bottom="xx-large" />
-            </ds-flex>
-          </ds-flex>
-        </ds-flex>
-      </ds-flex-item>
-    </ds-flex>
+    <categories-filters :chunk="chunk" />
     <ds-space />
     <ds-flex id="filter-posts-by-followers-header">
       <ds-heading tag="h4">{{ $t('filter-posts.general.header') }}</ds-heading>
@@ -96,28 +40,24 @@
 </template>
 <script>
 import { mapGetters, mapMutations } from 'vuex'
+import CategoriesFilters from './CategoriesFilters'
 
 export default {
+  components: {
+    CategoriesFilters,
+  },
   props: {
     user: { type: Object, required: true },
     chunk: { type: Array, default: () => [] },
   },
-  data() {
-    return {
-      filter: {},
-    }
-  },
   computed: {
     ...mapGetters({
-      filteredCategoryIds: 'postsFilter/filteredCategoryIds',
       filteredByUsersFollowed: 'postsFilter/filteredByUsersFollowed',
     }),
   },
   methods: {
     ...mapMutations({
       toggleFilteredByFollowed: 'postsFilter/TOGGLE_FILTER_BY_FOLLOWED',
-      resetCategories: 'postsFilter/RESET_CATEGORIES',
-      toggleCategory: 'postsFilter/TOGGLE_CATEGORY',
     }),
   },
 }
@@ -131,26 +71,6 @@ export default {
   display: block;
 }
 
-.categories-menu-item {
-  text-align: center;
-}
-
-.categories-menu {
-  justify-content: center;
-}
-
-.category-labels,
-.follow-label {
-  font-size: $font-size-small;
-}
-
-@media only screen and (min-width: 960px) {
-  #categories-menu-divider {
-    border-left: 1px solid $border-color-soft;
-    margin: 9px 0px 40px 0px;
-  }
-}
-
 @media only screen and (max-width: 960px) {
   #filter-posts-header {
     text-align: center;