From 0f03d0972389c793a9730bb2d20ab29c1075c6e8 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 16 Mar 2020 13:34:26 +0100
Subject: [PATCH] refactor: Extract FollowingFilter as own component

Co-authored-by: Alina Beck <alina.beck@mail.com>
---
 .../FilterMenu/CategoriesFilter.vue           |  4 +-
 webapp/components/FilterMenu/FilterMenu.vue   |  4 ++
 .../components/FilterMenu/FollowingFilter.vue | 50 +++++++++++++++++++
 .../components/FilterMenu/GeneralFilter.vue   | 33 ++----------
 .../components/FilterMenu/LanguageFilter.vue  |  4 +-
 webapp/locales/de.json                        | 18 +++----
 webapp/locales/en.json                        | 20 +++-----
 webapp/locales/es.json                        | 20 +++-----
 webapp/locales/fr.json                        | 20 +++-----
 webapp/locales/it.json                        | 20 +++-----
 webapp/locales/pt.json                        | 20 +++-----
 webapp/locales/ru.json                        | 20 +++-----
 12 files changed, 104 insertions(+), 129 deletions(-)
 create mode 100644 webapp/components/FilterMenu/FollowingFilter.vue

diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
index f9474dc57..02fe9cc92 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.vue
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -1,10 +1,10 @@
 <template>
   <section class="categories-filter">
-    <h4 class="title">{{ $t('filter-menu.categories.header') }}</h4>
+    <h4 class="title">{{ $t('filter-menu.categories') }}</h4>
     <labeled-button
       :filled="!filteredCategoryIds.length"
       icon="check"
-      :label="$t('filter-menu.categories.all')"
+      :label="$t('filter-menu.all')"
       @click="resetCategories"
     />
     <div class="divider" />
diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index 0cc21f04d..306539d7f 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -12,6 +12,8 @@
     </base-button>
     <template slot="popover">
       <ds-container>
+        <h4 class="title">{{ $t('filter-menu.filter-by') }}</h4>
+        <following-filter />
         <categories-filter />
         <general-filter />
         <language-filter />
@@ -22,6 +24,7 @@
 <script>
 import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
+import FollowingFilter from './FollowingFilter'
 import CategoriesFilter from './CategoriesFilter'
 import GeneralFilter from './GeneralFilter'
 import LanguageFilter from './LanguageFilter'
@@ -29,6 +32,7 @@ import LanguageFilter from './LanguageFilter'
 export default {
   components: {
     Dropdown,
+    FollowingFilter,
     CategoriesFilter,
     GeneralFilter,
     LanguageFilter,
diff --git a/webapp/components/FilterMenu/FollowingFilter.vue b/webapp/components/FilterMenu/FollowingFilter.vue
new file mode 100644
index 000000000..6daf3e600
--- /dev/null
+++ b/webapp/components/FilterMenu/FollowingFilter.vue
@@ -0,0 +1,50 @@
+<template>
+<section class="following-filter">
+  <labeled-button
+    data-test="filter-by-followed"
+    :filled="filteredByUsersFollowed"
+    icon="user-plus"
+    :label="$t('filter-menu.following')"
+    @click="toggleFilteredByFollowed(currentUser.id)"
+    v-tooltip="{
+      content: this.$t('contribution.filterFollow'),
+      placement: 'left',
+      delay: { show: 500 },
+    }"
+  />
+</section>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
+
+export default {
+  components: {
+    LabeledButton,
+  },
+  computed: {
+    ...mapGetters({
+      filteredByUsersFollowed: 'posts/filteredByUsersFollowed',
+      currentUser: 'auth/user',
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      toggleFilteredByFollowed: 'posts/TOGGLE_FILTER_BY_FOLLOWED',
+    }),
+  },
+}
+</script>
+<style lang="scss">
+.following-filter {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: $space-small;
+
+  > .labeled-button {
+    margin-top: $space-small;
+    width: 5%;
+  }
+}
+</style>
diff --git a/webapp/components/FilterMenu/GeneralFilter.vue b/webapp/components/FilterMenu/GeneralFilter.vue
index 0da1e7df4..8f74bc292 100644
--- a/webapp/components/FilterMenu/GeneralFilter.vue
+++ b/webapp/components/FilterMenu/GeneralFilter.vue
@@ -1,19 +1,7 @@
 <template>
-  <section class="general-filter">
-    <h4 class="title">{{ $t('filter-menu.general.header') }}</h4>
+  <section class="emotion-filter">
+    <h4 class="title">{{ $t('filter-menu.emotions') }}</h4>
     <div class="divider" />
-    <labeled-button
-      data-test="filter-by-followed"
-      :filled="filteredByUsersFollowed"
-      icon="user-plus"
-      :label="$t('filter-menu.followers.label')"
-      @click="toggleFilteredByFollowed(currentUser.id)"
-      v-tooltip="{
-        content: this.$t('contribution.filterFollow'),
-        placement: 'left',
-        delay: { show: 500 },
-      }"
-    />
     <emotion-button
       v-for="emotion in emotionsArray"
       :key="emotion"
@@ -26,12 +14,10 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import EmotionButton from '~/components/EmotionButton/EmotionButton'
-import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 
 export default {
   components: {
     EmotionButton,
-    LabeledButton,
   },
   data() {
     return {
@@ -40,14 +26,12 @@ export default {
   },
   computed: {
     ...mapGetters({
-      filteredByUsersFollowed: 'posts/filteredByUsersFollowed',
       filteredByEmotions: 'posts/filteredByEmotions',
       currentUser: 'auth/user',
     }),
   },
   methods: {
     ...mapMutations({
-      toggleFilteredByFollowed: 'posts/TOGGLE_FILTER_BY_FOLLOWED',
       toogleFilteredByEmotions: 'posts/TOGGLE_EMOTION',
     }),
     iconPath(emotion) {
@@ -60,7 +44,7 @@ export default {
 }
 </script>
 <style lang="scss">
-.general-filter {
+.emotion-filter {
   display: flex;
   flex-wrap: wrap;
   margin-top: $space-base;
@@ -70,10 +54,6 @@ export default {
     margin-bottom: $space-base;
   }
 
-  > .labeled-button {
-    width: 11%;
-  }
-
   > .divider {
     border-left: $border-size-base solid $border-color-soft;
     margin: 0px $space-base 0px 76px;
@@ -81,16 +61,11 @@ export default {
 }
 
 @media only screen and (max-width: 630px) {
-  .general-filter {
+  .emotion-filter {
     > .title {
       text-align: center;
     }
 
-    > .labeled-button {
-      width: 100%;
-      margin-bottom: $space-small;
-    }
-
     > .divider {
       border-top: $border-size-base solid $border-color-soft;
     }
diff --git a/webapp/components/FilterMenu/LanguageFilter.vue b/webapp/components/FilterMenu/LanguageFilter.vue
index fcb5b2d04..2328e54c5 100644
--- a/webapp/components/FilterMenu/LanguageFilter.vue
+++ b/webapp/components/FilterMenu/LanguageFilter.vue
@@ -1,7 +1,7 @@
 <template>
   <ds-space margin-top="large">
     <ds-flex id="filter-menu-header">
-      <ds-heading tag="h4">{{ $t('filter-menu.language.header') }}</ds-heading>
+      <ds-heading tag="h4">{{ $t('filter-menu.languages') }}</ds-heading>
       <ds-space margin-bottom="large" />
     </ds-flex>
     <ds-flex :gutter="{ lg: 'small' }">
@@ -19,7 +19,7 @@
               @click="resetLanguages"
             />
             <ds-flex-item>
-              <label class="language-labels">{{ $t('filter-menu.language.all') }}</label>
+              <label class="language-labels">{{ $t('filter-menu.all') }}</label>
             </ds-flex-item>
             <ds-space />
           </ds-flex-item>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 1c333200c..271a03aa2 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -337,20 +337,14 @@
     "title": "Deine Filterblase"
   },
   "filter-menu": {
-    "categories": {
-      "all": "Alle",
-      "header": "Themenkategorien"
-    },
-    "followers": {
+    "all": "Alle",
+    "categories": "Themenkategorien",
+    "following": {
+      "header": "Filtern nach...",
       "label": "Benutzern, denen ich folge"
     },
-    "general": {
-      "header": "Filtern nach …"
-    },
-    "language": {
-      "all": "Alle",
-      "header": "Sprachen"
-    }
+    "emotions": "Emotionen",
+    "languages": "Sprachen"
   },
   "followButton": {
     "follow": "Folgen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 85decedc5..d77176b9f 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -337,20 +337,12 @@
     "title": "Your filter bubble"
   },
   "filter-menu": {
-    "categories": {
-      "all": "All",
-      "header": "Categories of Content"
-    },
-    "followers": {
-      "label": "Users I follow"
-    },
-    "general": {
-      "header": "Filter by …"
-    },
-    "language": {
-      "all": "All",
-      "header": "Languages"
-    }
+    "all": "All",
+    "categories": "Categories of Content",
+    "emotions": "Emotions",
+    "filter-by": "Filter by...",
+    "following": "Users I follow",
+    "languages": "Languages"
   },
   "followButton": {
     "follow": "Follow",
diff --git a/webapp/locales/es.json b/webapp/locales/es.json
index 556348ee5..cb89df59d 100644
--- a/webapp/locales/es.json
+++ b/webapp/locales/es.json
@@ -335,20 +335,12 @@
     "title": "Su burbuja de filtro"
   },
   "filter-menu": {
-    "categories": {
-      "all": "Todas",
-      "header": "Categorías de contenido"
-    },
-    "followers": {
-      "label": "Usuarios que sigo"
-    },
-    "general": {
-      "header": "Filtrar por...."
-    },
-    "language": {
-      "all": "Todos",
-      "header": "Idiomas"
-    }
+    "all": "Todas",
+    "categories": "Categorías de contenido",
+    "emotions": "Emociones",
+    "filter-by": "Filtrar por...",
+    "following": "Usuarios que sigo",
+    "languages": "Idiomas"
   },
   "followButton": {
     "follow": "Seguir",
diff --git a/webapp/locales/fr.json b/webapp/locales/fr.json
index 0231f041a..857099b8a 100644
--- a/webapp/locales/fr.json
+++ b/webapp/locales/fr.json
@@ -324,20 +324,12 @@
     "title": "Votre bulle de filtre"
   },
   "filter-menu": {
-    "categories": {
-      "all": "Toutes",
-      "header": "Catégories de contenu"
-    },
-    "followers": {
-      "label": "Utilisateurs que je suis"
-    },
-    "general": {
-      "header": "Filtrer par ...."
-    },
-    "language": {
-      "all": "Tous",
-      "header": "Langues"
-    }
+    "all": "Toutes",
+    "categories": "Catégories de contenu",
+    "emotions": "Émotions",
+    "filter-by": "Filtrer par...",
+    "following": "Utilisateurs que je suis",
+    "languages": "Langues"
   },
   "followButton": {
     "follow": "Suivre",
diff --git a/webapp/locales/it.json b/webapp/locales/it.json
index a6c63a86b..e9876263d 100644
--- a/webapp/locales/it.json
+++ b/webapp/locales/it.json
@@ -329,20 +329,12 @@
     "title": ""
   },
   "filter-menu": {
-    "categories": {
-      "all": "",
-      "header": ""
-    },
-    "followers": {
-      "label": ""
-    },
-    "general": {
-      "header": ""
-    },
-    "language": {
-      "all": "",
-      "header": ""
-    }
+    "all": "",
+    "categories": "",
+    "emotions": "",
+    "filter-by": "",
+    "following": "",
+    "languages": ""
   },
   "followButton": {
     "follow": "",
diff --git a/webapp/locales/pt.json b/webapp/locales/pt.json
index 5e5b21fe1..fdfdc1781 100644
--- a/webapp/locales/pt.json
+++ b/webapp/locales/pt.json
@@ -320,20 +320,12 @@
     "title": "Sua bolha de filtro"
   },
   "filter-menu": {
-    "categories": {
-      "all": "Todos",
-      "header": "Categorias de Conteúdo"
-    },
-    "followers": {
-      "label": "Usuários que eu sigo"
-    },
-    "general": {
-      "header": "Filtrar por …"
-    },
-    "language": {
-      "all": "Todos",
-      "header": "Idiomas"
-    }
+    "all": "Todos",
+    "categories": "Categorias de Conteúdo",
+    "emotions": "Emoções",
+    "filter-by": "Filtrar por...",
+    "following": "Usuários que eu sigo",
+    "languages": "Idiomas"
   },
   "followButton": {
     "follow": "Seguir",
diff --git a/webapp/locales/ru.json b/webapp/locales/ru.json
index 47a12f75e..909f9bc37 100644
--- a/webapp/locales/ru.json
+++ b/webapp/locales/ru.json
@@ -335,20 +335,12 @@
     "title": "Ваш фильтр пузыря"
   },
   "filter-menu": {
-    "categories": {
-      "all": "Все",
-      "header": "Категории"
-    },
-    "followers": {
-      "label": "Мои подписки"
-    },
-    "general": {
-      "header": "Другие фильтры"
-    },
-    "language": {
-      "all": "Все",
-      "header": "Языки"
-    }
+    "all": "Все",
+    "categories": "Категории",
+    "emotions": "",
+    "filter-by": "Другие фильтры",
+    "following": "Мои подписки",
+    "languages": "Языки"
   },
   "followButton": {
     "follow": "Подписаться",