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 01/14] 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;

From e81942c6f5e14e79460a7138e39e22fbc4a6e99f Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Fri, 6 Sep 2019 13:37:22 +0200
Subject: [PATCH 02/14] Extract FollowsFilterMenuItems

- remove now unnecessary FilterPostsMenuItems
---
 ...oriesFilters.vue => CategoriesFilterMenuItems.vue} |  0
 webapp/components/FilterPosts/FilterPosts.vue         | 11 ++++++++---
 ...rPostsMenuItems.vue => FollowsFilterMenuItems.vue} | 11 ++---------
 3 files changed, 10 insertions(+), 12 deletions(-)
 rename webapp/components/FilterPosts/{CategoriesFilters.vue => CategoriesFilterMenuItems.vue} (100%)
 rename webapp/components/FilterPosts/{FilterPostsMenuItems.vue => FollowsFilterMenuItems.vue} (88%)

diff --git a/webapp/components/FilterPosts/CategoriesFilters.vue b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
similarity index 100%
rename from webapp/components/FilterPosts/CategoriesFilters.vue
rename to webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index defc0eb0a..9beafc2eb 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -11,7 +11,10 @@
       <ds-icon size="xx-small" name="angle-down" />
     </ds-button>
     <template slot="popover">
-      <filter-posts-menu-items :chunk="chunk" :user="currentUser" />
+      <ds-container>
+        <categories-filter-menu-items :chunk="chunk" />
+        <follows-filter-menu-items :user="currentUser" />
+      </ds-container>
     </template>
   </dropdown>
 </template>
@@ -19,12 +22,14 @@
 import _ from 'lodash'
 import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
-import FilterPostsMenuItems from '~/components/FilterPosts/FilterPostsMenuItems'
+import CategoriesFilterMenuItems from './CategoriesFilterMenuItems'
+import FollowsFilterMenuItems from './FollowsFilterMenuItems'
 
 export default {
   components: {
     Dropdown,
-    FilterPostsMenuItems,
+    CategoriesFilterMenuItems,
+    FollowsFilterMenuItems,
   },
   props: {
     placement: { type: String },
diff --git a/webapp/components/FilterPosts/FilterPostsMenuItems.vue b/webapp/components/FilterPosts/FollowsFilterMenuItems.vue
similarity index 88%
rename from webapp/components/FilterPosts/FilterPostsMenuItems.vue
rename to webapp/components/FilterPosts/FollowsFilterMenuItems.vue
index 4c39b3fe7..6e83f79c7 100644
--- a/webapp/components/FilterPosts/FilterPostsMenuItems.vue
+++ b/webapp/components/FilterPosts/FollowsFilterMenuItems.vue
@@ -1,7 +1,5 @@
 <template>
-  <ds-container>
-    <categories-filters :chunk="chunk" />
-    <ds-space />
+  <ds-space>
     <ds-flex id="filter-posts-by-followers-header">
       <ds-heading tag="h4">{{ $t('filter-posts.general.header') }}</ds-heading>
       <ds-space margin-bottom="large" />
@@ -36,19 +34,14 @@
       </ds-flex-item>
       <ds-space margin-bottom="large" />
     </ds-flex>
-  </ds-container>
+  </ds-space>
 </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: () => [] },
   },
   computed: {
     ...mapGetters({

From 07c58fc03ed43a926832ba85c9004d0f83eecfd5 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Fri, 6 Sep 2019 15:45:56 +0200
Subject: [PATCH 03/14] Add emotions buttons, get it filtering

---
 backend/src/schema/types/type/EMOTED.gql      |  32 ++--
 backend/src/schema/types/type/Post.gql        | 154 +++++++++---------
 .../FilterPosts/CategoriesFilterMenuItems.vue |   2 +-
 .../FilterPosts/FilterPosts.spec.js           |   1 +
 webapp/components/FilterPosts/FilterPosts.vue |  10 +-
 ...nuItems.vue => GeneralFilterMenuItems.vue} |  34 +++-
 webapp/pages/index.vue                        |   8 +-
 webapp/store/postsFilter.js                   |  16 ++
 8 files changed, 154 insertions(+), 103 deletions(-)
 rename webapp/components/FilterPosts/{FollowsFilterMenuItems.vue => GeneralFilterMenuItems.vue} (63%)

diff --git a/backend/src/schema/types/type/EMOTED.gql b/backend/src/schema/types/type/EMOTED.gql
index cb8d37d62..c41a75228 100644
--- a/backend/src/schema/types/type/EMOTED.gql
+++ b/backend/src/schema/types/type/EMOTED.gql
@@ -1,21 +1,27 @@
 type EMOTED @relation(name: "EMOTED") {
-  from: User
-  to: Post
+	from: User
+	to: Post
 
-  emotion: Emotion
-  #createdAt: DateTime
-  #updatedAt: DateTime
-  createdAt: String
-  updatedAt: String
+	emotion: Emotion
+	# createdAt: DateTime
+	# updatedAt: DateTime
+	createdAt: String
+	updatedAt: String
 }
 
 input _EMOTEDInput {
-  emotion: Emotion
-  createdAt: String
-  updatedAt: String
+	emotion: Emotion
+	createdAt: String
+	updatedAt: String
+}
+
+input _PostEMOTEDFilter {
+	emotion: Emotion
+	createdAt: String
+	updatedAt: String
 }
 
 type Mutation {
-  AddPostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
-  RemovePostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
-}
+	AddPostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
+	RemovePostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
+}
\ No newline at end of file
diff --git a/backend/src/schema/types/type/Post.gql b/backend/src/schema/types/type/Post.gql
index 5b11757d3..5f0aeea7a 100644
--- a/backend/src/schema/types/type/Post.gql
+++ b/backend/src/schema/types/type/Post.gql
@@ -1,92 +1,92 @@
 type Post {
-  id: ID!
-  activityId: String
-  objectId: String
-  author: User @relation(name: "WROTE", direction: "IN")
-  title: String!
-  slug: String
-  content: String!
-  contentExcerpt: String
-  image: String
-  imageUpload: Upload
-  visibility: Visibility
-  deleted: Boolean
-  disabled: Boolean
-  disabledBy: User @relation(name: "DISABLED", direction: "IN")
-  createdAt: String
-  updatedAt: String
-  language: String
-  relatedContributions: [Post]!
-    @cypher(
-      statement: """
-      MATCH (this)-[:TAGGED|CATEGORIZED]->(categoryOrTag)<-[:TAGGED|CATEGORIZED]-(post:Post)
-      WHERE NOT post.deleted AND NOT post.disabled
-      RETURN DISTINCT post
-      LIMIT 10
-      """
-    )
+	id: ID!
+	activityId: String
+	objectId: String
+	author: User @relation(name: "WROTE", direction: "IN")
+	title: String!
+	slug: String
+	content: String!
+	contentExcerpt: String
+	image: String
+	imageUpload: Upload
+	visibility: Visibility
+	deleted: Boolean
+	disabled: Boolean
+	disabledBy: User @relation(name: "DISABLED", direction: "IN")
+	createdAt: String
+	updatedAt: String
+	language: String
+	relatedContributions: [Post]!
+	@cypher(
+	statement: """
+	MATCH (this)-[: TAGGED|CATEGORIZED]->(categoryOrTag)<-[: TAGGED|CATEGORIZED]-(post: Post)
+	WHERE NOT post.deleted AND NOT post.disabled
+	RETURN DISTINCT post
+	LIMIT 10
+	"""
+	)
 
-  tags: [Tag]! @relation(name: "TAGGED", direction: "OUT")
-  categories: [Category]! @relation(name: "CATEGORIZED", direction: "OUT")
+	tags: [Tag]! @relation(name: "TAGGED", direction: "OUT")
+	categories: [Category]! @relation(name: "CATEGORIZED", direction: "OUT")
 
-  comments: [Comment]! @relation(name: "COMMENTS", direction: "IN")
-  commentsCount: Int!
-    @cypher(
-      statement: "MATCH (this)<-[:COMMENTS]-(r:Comment) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(DISTINCT r)"
-    )
+	comments: [Comment]! @relation(name: "COMMENTS", direction: "IN")
+	commentsCount: Int!
+	@cypher(
+	statement: "MATCH (this)<-[: COMMENTS]-(r: Comment) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(DISTINCT r)"
+	)
 
-  shoutedBy: [User]! @relation(name: "SHOUTED", direction: "IN")
-  shoutedCount: Int!
-    @cypher(
-      statement: "MATCH (this)<-[:SHOUTED]-(r:User) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(DISTINCT r)"
-    )
+	shoutedBy: [User]! @relation(name: "SHOUTED", direction: "IN")
+	shoutedCount: Int!
+	@cypher(
+	statement: "MATCH (this)<-[: SHOUTED]-(r: User) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(DISTINCT r)"
+	)
 
-  # Has the currently logged in user shouted that post?
-  shoutedByCurrentUser: Boolean!
-    @cypher(
-      statement: "MATCH (this)<-[:SHOUTED]-(u:User {id: $cypherParams.currentUserId}) RETURN COUNT(u) >= 1"
-    )
+	# Has the currently logged in user shouted that post?
+	shoutedByCurrentUser: Boolean!
+	@cypher(
+	statement: "MATCH (this)<-[: SHOUTED]-(u: User { id: $cypherParams.currentUserId}) RETURN COUNT(u) >= 1"
+	)
 
-  emotions: [EMOTED]
-  emotionsCount: Int!
-    @cypher(statement: "MATCH (this)<-[emoted:EMOTED]-(:User) RETURN COUNT(DISTINCT emoted)")
+	emotions: [EMOTED]
+	emotionsCount: Int!
+	@cypher(statement: "MATCH (this)<-[emoted: EMOTED]-(: User) RETURN COUNT(DISTINCT emoted)")
 }
 
 input _PostInput {
-  id: ID!
+	id: ID!
 }
 
 type Mutation {
-  CreatePost(
-    id: ID
-    title: String!
-    slug: String
-    content: String!
-    image: String
-    imageUpload: Upload
-    visibility: Visibility
-    language: String
-    categoryIds: [ID]
-    contentExcerpt: String
-  ): Post
-  UpdatePost(
-    id: ID!
-    title: String!
-    slug: String
-    content: String!
-    contentExcerpt: String
-    image: String
-    imageUpload: Upload
-    visibility: Visibility
-    language: String
-    categoryIds: [ID]
-  ): Post
-  DeletePost(id: ID!): Post
-  AddPostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
-  RemovePostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
+	CreatePost(
+	id: ID
+	title: String!
+	slug: String
+	content: String!
+	image: String
+	imageUpload: Upload
+	visibility: Visibility
+	language: String
+	categoryIds: [ID]
+	contentExcerpt: String
+	): Post
+	UpdatePost(
+	id: ID!
+	title: String!
+	slug: String
+	content: String!
+	contentExcerpt: String
+	image: String
+	imageUpload: Upload
+	visibility: Visibility
+	language: String
+	categoryIds: [ID]
+	): Post
+	DeletePost(id: ID!): Post
+	AddPostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
+	RemovePostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
 }
 
 type Query {
-  PostsEmotionsCountByEmotion(postId: ID!, data: _EMOTEDInput!): Int!
-  PostsEmotionsByCurrentUser(postId: ID!): [String]
-}
+	PostsEmotionsCountByEmotion(postId: ID!, data: _EMOTEDInput!): Int!
+	PostsEmotionsByCurrentUser(postId: ID!): [String]
+}
\ No newline at end of file
diff --git a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
index 59d17cb59..7a35bf3cc 100644
--- a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-space>
+  <ds-space margin-top="large">
     <ds-flex id="filter-posts-header">
       <ds-heading tag="h4">{{ $t('filter-posts.categories.header') }}</ds-heading>
       <ds-space margin-bottom="large" />
diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js
index 509ff32b7..75991c4e5 100644
--- a/webapp/components/FilterPosts/FilterPosts.spec.js
+++ b/webapp/components/FilterPosts/FilterPosts.spec.js
@@ -61,6 +61,7 @@ describe('FilterPosts.vue', () => {
       },
       'postsFilter/filteredCategoryIds': jest.fn(() => []),
       'postsFilter/filteredByUsersFollowed': jest.fn(),
+      'postsFilter/filteredByEmotions': jest.fn(() => jest.fn()),
     }
     const openFilterPosts = () => {
       const store = new Vuex.Store({ mutations, getters })
diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 9beafc2eb..8a12ac633 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -13,23 +13,23 @@
     <template slot="popover">
       <ds-container>
         <categories-filter-menu-items :chunk="chunk" />
-        <follows-filter-menu-items :user="currentUser" />
+        <general-filter-menu-items :user="currentUser" />
       </ds-container>
     </template>
   </dropdown>
 </template>
 <script>
-import _ from 'lodash'
+import { chunk } from 'lodash'
 import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
 import CategoriesFilterMenuItems from './CategoriesFilterMenuItems'
-import FollowsFilterMenuItems from './FollowsFilterMenuItems'
+import GeneralFilterMenuItems from './GeneralFilterMenuItems'
 
 export default {
   components: {
     Dropdown,
     CategoriesFilterMenuItems,
-    FollowsFilterMenuItems,
+    GeneralFilterMenuItems,
   },
   props: {
     placement: { type: String },
@@ -42,7 +42,7 @@ export default {
       filterActive: 'postsFilter/isActive',
     }),
     chunk() {
-      return _.chunk(this.categories, 2)
+      return chunk(this.categories, 2)
     },
   },
 }
diff --git a/webapp/components/FilterPosts/FollowsFilterMenuItems.vue b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
similarity index 63%
rename from webapp/components/FilterPosts/FollowsFilterMenuItems.vue
rename to webapp/components/FilterPosts/GeneralFilterMenuItems.vue
index 6e83f79c7..8e79ee622 100644
--- a/webapp/components/FilterPosts/FollowsFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
@@ -4,7 +4,7 @@
       <ds-heading tag="h4">{{ $t('filter-posts.general.header') }}</ds-heading>
       <ds-space margin-bottom="large" />
     </ds-flex>
-    <ds-flex>
+    <ds-flex :gutter="{ lg: 'large' }">
       <ds-flex-item
         :width="{ base: '100%', sm: '100%', md: '100%', lg: '10%' }"
         class="categories-menu-item"
@@ -32,6 +32,21 @@
           </ds-flex-item>
         </ds-flex>
       </ds-flex-item>
+      <div v-for="emotion in Object.keys(PostsEmotionsCountByEmotion)" :key="emotion">
+        <ds-flex-item :width="{ lg: '100%' }">
+          <ds-button
+            size="large"
+            ghost
+            @click="toogleFilteredByEmotions(emotion)"
+            class="emotions-buttons"
+          >
+            <img :src="iconPath(emotion)" width="40" />
+          </ds-button>
+          <div class="emotions-mobile-space text-center">
+            <p class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</p>
+          </div>
+        </ds-flex-item>
+      </div>
       <ds-space margin-bottom="large" />
     </ds-flex>
   </ds-space>
@@ -43,15 +58,28 @@ export default {
   props: {
     user: { type: Object, required: true },
   },
+  data() {
+    return {
+      PostsEmotionsCountByEmotion: { funny: 0, happy: 0, surprised: 0, cry: 0, angry: 0 },
+    }
+  },
   computed: {
     ...mapGetters({
       filteredByUsersFollowed: 'postsFilter/filteredByUsersFollowed',
+      filteredByEmotions: 'postsFilter/filteredByEmotions',
     }),
   },
   methods: {
     ...mapMutations({
       toggleFilteredByFollowed: 'postsFilter/TOGGLE_FILTER_BY_FOLLOWED',
+      toogleFilteredByEmotions: 'postsFilter/TOGGLE_FILTER_BY_EMOTIONS',
     }),
+    iconPath(emotion) {
+      if (this.filteredByEmotions(emotion)) {
+        return `/img/svg/emoji/${emotion}_color.svg`
+      }
+      return `/img/svg/emoji/${emotion}.svg`
+    },
   },
 }
 </script>
@@ -72,4 +100,8 @@ export default {
     float: left;
   }
 }
+
+.text-center {
+  text-align: center;
+}
 </style>
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 09270f936..03be67575 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -27,12 +27,8 @@
       <template v-else>
         <ds-grid-item :row-span="2" column-span="fullWidth">
           <hc-empty icon="docs" />
-          <ds-text align="center">
-            {{ $t('index.no-results') }}
-          </ds-text>
-          <ds-text align="center">
-            {{ $t('index.change-filter-settings') }}
-          </ds-text>
+          <ds-text align="center">{{ $t('index.no-results') }}</ds-text>
+          <ds-text align="center">{{ $t('index.change-filter-settings') }}</ds-text>
         </ds-grid-item>
       </template>
     </masonry-grid>
diff --git a/webapp/store/postsFilter.js b/webapp/store/postsFilter.js
index 487194bae..0c3cef25d 100644
--- a/webapp/store/postsFilter.js
+++ b/webapp/store/postsFilter.js
@@ -40,6 +40,19 @@ export const mutations = {
     if (isEmpty(get(filter, 'categories_some.id_in'))) delete filter.categories_some
     state.filter = filter
   },
+  TOGGLE_FILTER_BY_EMOTIONS(state, emotion) {
+    const filter = clone(state.filter)
+    const emotionName = get(filter, 'emotions_in.emotions')
+    if (emotionName) {
+      delete filter.emotions_in
+      state.filter = filter
+    } else {
+      state.filter = {
+        ...filter,
+        emotions_in: { emotion: emotion },
+      }
+    }
+  },
 }
 
 export const getters = {
@@ -55,4 +68,7 @@ export const getters = {
   filteredByUsersFollowed(state) {
     return !!get(state.filter, 'author.followedBy_some.id')
   },
+  filteredByEmotions: state => emotion => {
+    return get(state.filter, 'emotions_in.emotion') === emotion
+  },
 }

From 30ea892aa128b2fad1a33498a15385ab5c600080 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Sat, 7 Sep 2019 12:31:21 +0200
Subject: [PATCH 04/14] Allow filter by multiple emotions, test getters

- Co-authored-by: vardyb <brent.vardy@challengelogic.net>
- Co-aurhored-by: mike aono <aonomike@gmail.com>
---
 backend/src/schema/types/type/EMOTED.gql      |  2 +-
 .../FilterPosts/FilterPosts.spec.js           |  2 +-
 .../FilterPosts/GeneralFilterMenuItems.vue    |  6 ++---
 webapp/store/postsFilter.js                   | 17 ++++---------
 webapp/store/postsFilter.spec.js              | 24 +++++++++++++++++++
 5 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/backend/src/schema/types/type/EMOTED.gql b/backend/src/schema/types/type/EMOTED.gql
index c41a75228..cefb26f21 100644
--- a/backend/src/schema/types/type/EMOTED.gql
+++ b/backend/src/schema/types/type/EMOTED.gql
@@ -16,7 +16,7 @@ input _EMOTEDInput {
 }
 
 input _PostEMOTEDFilter {
-	emotion: Emotion
+	emotion_in: [Emotion]
 	createdAt: String
 	updatedAt: String
 }
diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js
index 75991c4e5..c0ad56843 100644
--- a/webapp/components/FilterPosts/FilterPosts.spec.js
+++ b/webapp/components/FilterPosts/FilterPosts.spec.js
@@ -61,7 +61,7 @@ describe('FilterPosts.vue', () => {
       },
       'postsFilter/filteredCategoryIds': jest.fn(() => []),
       'postsFilter/filteredByUsersFollowed': jest.fn(),
-      'postsFilter/filteredByEmotions': jest.fn(() => jest.fn()),
+      'postsFilter/filteredByEmotions': jest.fn(() => []),
     }
     const openFilterPosts = () => {
       const store = new Vuex.Store({ mutations, getters })
diff --git a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
index 8e79ee622..4dd79591a 100644
--- a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
@@ -32,7 +32,7 @@
           </ds-flex-item>
         </ds-flex>
       </ds-flex-item>
-      <div v-for="emotion in Object.keys(PostsEmotionsCountByEmotion)" :key="emotion">
+      <div v-for="emotion in emotionsArray" :key="emotion">
         <ds-flex-item :width="{ lg: '100%' }">
           <ds-button
             size="large"
@@ -60,7 +60,7 @@ export default {
   },
   data() {
     return {
-      PostsEmotionsCountByEmotion: { funny: 0, happy: 0, surprised: 0, cry: 0, angry: 0 },
+      emotionsArray: ['funny', 'happy', 'surprised', 'cry', 'angry'],
     }
   },
   computed: {
@@ -75,7 +75,7 @@ export default {
       toogleFilteredByEmotions: 'postsFilter/TOGGLE_FILTER_BY_EMOTIONS',
     }),
     iconPath(emotion) {
-      if (this.filteredByEmotions(emotion)) {
+      if (this.filteredByEmotions.includes(emotion)) {
         return `/img/svg/emoji/${emotion}_color.svg`
       }
       return `/img/svg/emoji/${emotion}.svg`
diff --git a/webapp/store/postsFilter.js b/webapp/store/postsFilter.js
index 0c3cef25d..8ad1acbfb 100644
--- a/webapp/store/postsFilter.js
+++ b/webapp/store/postsFilter.js
@@ -42,16 +42,9 @@ export const mutations = {
   },
   TOGGLE_FILTER_BY_EMOTIONS(state, emotion) {
     const filter = clone(state.filter)
-    const emotionName = get(filter, 'emotions_in.emotions')
-    if (emotionName) {
-      delete filter.emotions_in
-      state.filter = filter
-    } else {
-      state.filter = {
-        ...filter,
-        emotions_in: { emotion: emotion },
-      }
-    }
+    update(filter, 'emotions_some.emotion_in', emotions => xor(emotions, [emotion]))
+    if (isEmpty(get(filter, 'emotions_some.emotion_in'))) delete filter.emotions_some
+    state.filter = filter
   },
 }
 
@@ -68,7 +61,7 @@ export const getters = {
   filteredByUsersFollowed(state) {
     return !!get(state.filter, 'author.followedBy_some.id')
   },
-  filteredByEmotions: state => emotion => {
-    return get(state.filter, 'emotions_in.emotion') === emotion
+  filteredByEmotions(state) {
+    return get(state.filter, 'emotions_some.emotion_in') || []
   },
 }
diff --git a/webapp/store/postsFilter.spec.js b/webapp/store/postsFilter.spec.js
index f06b4a31d..68a3dbd6e 100644
--- a/webapp/store/postsFilter.spec.js
+++ b/webapp/store/postsFilter.spec.js
@@ -43,6 +43,30 @@ describe('getters', () => {
       expect(getters.filteredByUsersFollowed(state)).toBe(false)
     })
   })
+
+  describe('filteredByEmotions', () => {
+    it('returns an emotions array if filter is set', () => {
+      state = { filter: { emotions_some: { emotion_in: ['sad'] } } }
+      expect(getters.filteredByEmotions(state)).toEqual(['sad'])
+    })
+
+    it('returns an emotions array even when other filters are set', () => {
+      state = {
+        filter: { emotions_some: { emotion_in: ['sad'] }, categories_some: { id_in: [23] } },
+      }
+      expect(getters.filteredByEmotions(state)).toEqual(['sad'])
+    })
+
+    it('returns empty array if filter is not set', () => {
+      state = { filter: {} }
+      expect(getters.filteredByEmotions(state)).toEqual([])
+    })
+
+    it('returns empty array if another filter is set, but not emotions', () => {
+      state = { filter: { categories_some: { id_in: [23] } } }
+      expect(getters.filteredByEmotions(state)).toEqual([])
+    })
+  })
 })
 
 describe('mutations', () => {

From a63e132b419b31f0208d67c9a8c547b7c67564fd Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Thu, 5 Sep 2019 16:00:28 +0200
Subject: [PATCH 05/14] 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/CategoriesFilterMenuItems.vue | 104 +++++++-----------
 .../FilterPosts/CategoriesFilters.vue         | 101 +++++++++++++++++
 2 files changed, 143 insertions(+), 62 deletions(-)
 create mode 100644 webapp/components/FilterPosts/CategoriesFilters.vue

diff --git a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
index 7a35bf3cc..7b683276b 100644
--- a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
@@ -1,101 +1,81 @@
 <template>
-  <ds-space margin-top="large">
-    <ds-flex id="filter-posts-header">
-      <ds-heading tag="h4">{{ $t('filter-posts.categories.header') }}</ds-heading>
+  <ds-container>
+    <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>
       <ds-space margin-bottom="large" />
     </ds-flex>
-    <ds-flex :gutter="{ lg: 'small' }">
+    <ds-flex>
       <ds-flex-item
-        :width="{ base: '100%', sm: '100%', md: '100%', lg: '5%' }"
+        :width="{ base: '100%', sm: '100%', md: '100%', lg: '10%' }"
         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 />
+            <div class="follow-button">
+              <ds-button
+                v-tooltip="{
+                  content: this.$t('contribution.filterFollow'),
+                  placement: 'left',
+                  delay: { show: 500 },
+                }"
+                name="filter-by-followed-authors-only"
+                icon="user-plus"
+                :primary="filteredByUsersFollowed"
+                @click="toggleFilteredByFollowed(user.id)"
+              />
+              <ds-flex-item>
+                <label class="follow-label">{{ $t('filter-posts.followers.label') }}</label>
+              </ds-flex-item>
+              <ds-space />
+            </div>
           </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-space margin-bottom="large" />
     </ds-flex>
-  </ds-space>
+  </ds-container>
 </template>
 <script>
 import { mapGetters, mapMutations } from 'vuex'
+import CategoriesFilters from './CategoriesFilters'
 
 export default {
+  components: {
+    CategoriesFilters,
+  },
   props: {
     chunk: { type: Array, default: () => [] },
   },
   computed: {
     ...mapGetters({
-      filteredCategoryIds: 'postsFilter/filteredCategoryIds',
+      filteredByUsersFollowed: 'postsFilter/filteredByUsersFollowed',
     }),
   },
   methods: {
     ...mapMutations({
-      resetCategories: 'postsFilter/RESET_CATEGORIES',
-      toggleCategory: 'postsFilter/TOGGLE_CATEGORY',
+      toggleFilteredByFollowed: 'postsFilter/TOGGLE_FILTER_BY_FOLLOWED',
     }),
   },
 }
 </script>
 <style lang="scss">
-.categories-menu-item {
-  text-align: center;
+#filter-posts-header {
+  display: block;
 }
 
-.categories-menu {
-  justify-content: center;
+#filter-posts-by-followers-header {
+  display: block;
 }
 
-.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;
+  }
+  .follow-button {
+    float: left;
   }
 }
 </style>
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>

From 3b5c02e2762127d207c11782a50b62fbd1f46257 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Fri, 6 Sep 2019 13:37:22 +0200
Subject: [PATCH 06/14] Extract FollowsFilterMenuItems

- remove now unnecessary FilterPostsMenuItems
---
 .../FilterPosts/CategoriesFilterMenuItems.vue | 104 +++++++++++-------
 .../FilterPosts/CategoriesFilters.vue         | 101 -----------------
 .../FilterPosts/FollowsFilterMenuItems.vue    |  75 +++++++++++++
 3 files changed, 137 insertions(+), 143 deletions(-)
 delete mode 100644 webapp/components/FilterPosts/CategoriesFilters.vue
 create mode 100644 webapp/components/FilterPosts/FollowsFilterMenuItems.vue

diff --git a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
index 7b683276b..15fcba9f0 100644
--- a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
@@ -1,81 +1,101 @@
 <template>
-  <ds-container>
-    <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>
+  <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>
+    <ds-flex :gutter="{ lg: 'small' }">
       <ds-flex-item
-        :width="{ base: '100%', sm: '100%', md: '100%', lg: '10%' }"
+        :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%">
-            <div class="follow-button">
-              <ds-button
-                v-tooltip="{
-                  content: this.$t('contribution.filterFollow'),
-                  placement: 'left',
-                  delay: { show: 500 },
-                }"
-                name="filter-by-followed-authors-only"
-                icon="user-plus"
-                :primary="filteredByUsersFollowed"
-                @click="toggleFilteredByFollowed(user.id)"
-              />
-              <ds-flex-item>
-                <label class="follow-label">{{ $t('filter-posts.followers.label') }}</label>
-              </ds-flex-item>
-              <ds-space />
-            </div>
+            <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-space margin-bottom="large" />
+      <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-container>
+  </ds-space>
 </template>
 <script>
 import { mapGetters, mapMutations } from 'vuex'
-import CategoriesFilters from './CategoriesFilters'
 
 export default {
-  components: {
-    CategoriesFilters,
-  },
   props: {
     chunk: { type: Array, default: () => [] },
   },
   computed: {
     ...mapGetters({
-      filteredByUsersFollowed: 'postsFilter/filteredByUsersFollowed',
+      filteredCategoryIds: 'postsFilter/filteredCategoryIds',
     }),
   },
   methods: {
     ...mapMutations({
-      toggleFilteredByFollowed: 'postsFilter/TOGGLE_FILTER_BY_FOLLOWED',
+      resetCategories: 'postsFilter/RESET_CATEGORIES',
+      toggleCategory: 'postsFilter/TOGGLE_CATEGORY',
     }),
   },
 }
 </script>
 <style lang="scss">
-#filter-posts-header {
-  display: block;
+.categories-menu-item {
+  text-align: center;
 }
 
-#filter-posts-by-followers-header {
-  display: block;
+.categories-menu {
+  justify-content: center;
 }
 
-@media only screen and (max-width: 960px) {
-  #filter-posts-header {
-    text-align: center;
-  }
-  .follow-button {
-    float: left;
+.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/CategoriesFilters.vue b/webapp/components/FilterPosts/CategoriesFilters.vue
deleted file mode 100644
index 59d17cb59..000000000
--- a/webapp/components/FilterPosts/CategoriesFilters.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<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/FollowsFilterMenuItems.vue b/webapp/components/FilterPosts/FollowsFilterMenuItems.vue
new file mode 100644
index 000000000..6e83f79c7
--- /dev/null
+++ b/webapp/components/FilterPosts/FollowsFilterMenuItems.vue
@@ -0,0 +1,75 @@
+<template>
+  <ds-space>
+    <ds-flex id="filter-posts-by-followers-header">
+      <ds-heading tag="h4">{{ $t('filter-posts.general.header') }}</ds-heading>
+      <ds-space margin-bottom="large" />
+    </ds-flex>
+    <ds-flex>
+      <ds-flex-item
+        :width="{ base: '100%', sm: '100%', md: '100%', lg: '10%' }"
+        class="categories-menu-item"
+      >
+        <ds-flex>
+          <ds-flex-item width="10%" />
+          <ds-flex-item width="100%">
+            <div class="follow-button">
+              <ds-button
+                v-tooltip="{
+                  content: this.$t('contribution.filterFollow'),
+                  placement: 'left',
+                  delay: { show: 500 },
+                }"
+                name="filter-by-followed-authors-only"
+                icon="user-plus"
+                :primary="filteredByUsersFollowed"
+                @click="toggleFilteredByFollowed(user.id)"
+              />
+              <ds-flex-item>
+                <label class="follow-label">{{ $t('filter-posts.followers.label') }}</label>
+              </ds-flex-item>
+              <ds-space />
+            </div>
+          </ds-flex-item>
+        </ds-flex>
+      </ds-flex-item>
+      <ds-space margin-bottom="large" />
+    </ds-flex>
+  </ds-space>
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+
+export default {
+  props: {
+    user: { type: Object, required: true },
+  },
+  computed: {
+    ...mapGetters({
+      filteredByUsersFollowed: 'postsFilter/filteredByUsersFollowed',
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      toggleFilteredByFollowed: 'postsFilter/TOGGLE_FILTER_BY_FOLLOWED',
+    }),
+  },
+}
+</script>
+<style lang="scss">
+#filter-posts-header {
+  display: block;
+}
+
+#filter-posts-by-followers-header {
+  display: block;
+}
+
+@media only screen and (max-width: 960px) {
+  #filter-posts-header {
+    text-align: center;
+  }
+  .follow-button {
+    float: left;
+  }
+}
+</style>

From 079864a7a97abdcaf7934e342de4d92930c1d172 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Fri, 6 Sep 2019 15:45:56 +0200
Subject: [PATCH 07/14] Add emotions buttons, get it filtering

---
 .../FilterPosts/CategoriesFilterMenuItems.vue |  2 +-
 .../FilterPosts/FollowsFilterMenuItems.vue    | 75 -------------------
 2 files changed, 1 insertion(+), 76 deletions(-)
 delete mode 100644 webapp/components/FilterPosts/FollowsFilterMenuItems.vue

diff --git a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
index 15fcba9f0..eb51153a6 100644
--- a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-space>
+  <ds-space margin-top="large">
     <ds-flex id="filter-posts-header">
       <ds-heading tag="h4">{{ $t('filter-posts.categories.header') }}</ds-heading>
       <ds-space margin-bottom="large" />
diff --git a/webapp/components/FilterPosts/FollowsFilterMenuItems.vue b/webapp/components/FilterPosts/FollowsFilterMenuItems.vue
deleted file mode 100644
index 6e83f79c7..000000000
--- a/webapp/components/FilterPosts/FollowsFilterMenuItems.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <ds-space>
-    <ds-flex id="filter-posts-by-followers-header">
-      <ds-heading tag="h4">{{ $t('filter-posts.general.header') }}</ds-heading>
-      <ds-space margin-bottom="large" />
-    </ds-flex>
-    <ds-flex>
-      <ds-flex-item
-        :width="{ base: '100%', sm: '100%', md: '100%', lg: '10%' }"
-        class="categories-menu-item"
-      >
-        <ds-flex>
-          <ds-flex-item width="10%" />
-          <ds-flex-item width="100%">
-            <div class="follow-button">
-              <ds-button
-                v-tooltip="{
-                  content: this.$t('contribution.filterFollow'),
-                  placement: 'left',
-                  delay: { show: 500 },
-                }"
-                name="filter-by-followed-authors-only"
-                icon="user-plus"
-                :primary="filteredByUsersFollowed"
-                @click="toggleFilteredByFollowed(user.id)"
-              />
-              <ds-flex-item>
-                <label class="follow-label">{{ $t('filter-posts.followers.label') }}</label>
-              </ds-flex-item>
-              <ds-space />
-            </div>
-          </ds-flex-item>
-        </ds-flex>
-      </ds-flex-item>
-      <ds-space margin-bottom="large" />
-    </ds-flex>
-  </ds-space>
-</template>
-<script>
-import { mapGetters, mapMutations } from 'vuex'
-
-export default {
-  props: {
-    user: { type: Object, required: true },
-  },
-  computed: {
-    ...mapGetters({
-      filteredByUsersFollowed: 'postsFilter/filteredByUsersFollowed',
-    }),
-  },
-  methods: {
-    ...mapMutations({
-      toggleFilteredByFollowed: 'postsFilter/TOGGLE_FILTER_BY_FOLLOWED',
-    }),
-  },
-}
-</script>
-<style lang="scss">
-#filter-posts-header {
-  display: block;
-}
-
-#filter-posts-by-followers-header {
-  display: block;
-}
-
-@media only screen and (max-width: 960px) {
-  #filter-posts-header {
-    text-align: center;
-  }
-  .follow-button {
-    float: left;
-  }
-}
-</style>

From 48e696dde498da08fbca3ab0493415a2c01b91f7 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 9 Sep 2019 08:24:33 +0200
Subject: [PATCH 08/14] Fix lint

---
 webapp/components/FilterPosts/CategoriesFilterMenuItems.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
index eb51153a6..7a35bf3cc 100644
--- a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
@@ -46,9 +46,9 @@
             </ds-flex-item>
             <ds-flex>
               <ds-flex-item class="categories-menu-item">
-                <label
-                  class="category-labels"
-                >{{ $t(`contribution.category.name.${category.slug}`) }}</label>
+                <label class="category-labels">
+                  {{ $t(`contribution.category.name.${category.slug}`) }}
+                </label>
               </ds-flex-item>
               <ds-space margin-bottom="xx-large" />
             </ds-flex>

From 9a6a3a6bea23bf4dc3828b5df52fff88f643b581 Mon Sep 17 00:00:00 2001
From: aonomike <aonomike@gmail.com>
Date: Mon, 9 Sep 2019 15:42:10 +0300
Subject: [PATCH 09/14] Test clicks on the emotions buttons

- Add tests for clicks on the emotion button
- Refactor name of TOGGLE_EMOTIONS
---
 .../FilterPosts/FilterPosts.spec.js           | 19 +++++++++++++++++++
 .../FilterPosts/GeneralFilterMenuItems.vue    |  2 +-
 webapp/store/postsFilter.js                   |  2 +-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js
index c0ad56843..0cbd3e962 100644
--- a/webapp/components/FilterPosts/FilterPosts.spec.js
+++ b/webapp/components/FilterPosts/FilterPosts.spec.js
@@ -19,6 +19,7 @@ describe('FilterPosts.vue', () => {
   let allCategoriesButton
   let environmentAndNatureButton
   let democracyAndPoliticsButton
+  let happyEmotionButton
 
   beforeEach(() => {
     mocks = {
@@ -52,6 +53,7 @@ describe('FilterPosts.vue', () => {
       'postsFilter/TOGGLE_FILTER_BY_FOLLOWED': jest.fn(),
       'postsFilter/RESET_CATEGORIES': jest.fn(),
       'postsFilter/TOGGLE_CATEGORY': jest.fn(),
+      'postsFilter/TOGGLE_EMOTION': jest.fn(),
     }
     getters = {
       'postsFilter/isActive': () => false,
@@ -121,5 +123,22 @@ describe('FilterPosts.vue', () => {
         expect(mutations['postsFilter/TOGGLE_FILTER_BY_FOLLOWED']).toHaveBeenCalledWith({}, 'u34')
       })
     })
+
+    describe('click on an "emotions-buttons" button', () => {
+      it('calls TOGGLE_EMOTION when clicked', () => {
+        const wrapper = openFilterPosts()
+        happyEmotionButton = wrapper.findAll('button.emotions-buttons').at(1)
+        happyEmotionButton.trigger('click')
+        expect(mutations['postsFilter/TOGGLE_EMOTION']).toHaveBeenCalledWith({}, 'happy')
+      })
+
+      it('sets the attribute `src` to colorized image', () => {
+        getters['postsFilter/filteredByEmotions'] = jest.fn(() => ['happy'])
+        const wrapper = openFilterPosts()
+        happyEmotionButton = wrapper.findAll('button.emotions-buttons').at(1)
+        const happyEmotionButtonImage = happyEmotionButton.find('img')
+        expect(happyEmotionButtonImage.attributes().src).toEqual('/img/svg/emoji/happy_color.svg')
+      })
+    })
   })
 })
diff --git a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
index 4dd79591a..183f2b250 100644
--- a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
@@ -72,7 +72,7 @@ export default {
   methods: {
     ...mapMutations({
       toggleFilteredByFollowed: 'postsFilter/TOGGLE_FILTER_BY_FOLLOWED',
-      toogleFilteredByEmotions: 'postsFilter/TOGGLE_FILTER_BY_EMOTIONS',
+      toogleFilteredByEmotions: 'postsFilter/TOGGLE_EMOTION',
     }),
     iconPath(emotion) {
       if (this.filteredByEmotions.includes(emotion)) {
diff --git a/webapp/store/postsFilter.js b/webapp/store/postsFilter.js
index 8ad1acbfb..964b265c0 100644
--- a/webapp/store/postsFilter.js
+++ b/webapp/store/postsFilter.js
@@ -40,7 +40,7 @@ export const mutations = {
     if (isEmpty(get(filter, 'categories_some.id_in'))) delete filter.categories_some
     state.filter = filter
   },
-  TOGGLE_FILTER_BY_EMOTIONS(state, emotion) {
+  TOGGLE_EMOTION(state, emotion) {
     const filter = clone(state.filter)
     update(filter, 'emotions_some.emotion_in', emotions => xor(emotions, [emotion]))
     if (isEmpty(get(filter, 'emotions_some.emotion_in'))) delete filter.emotions_some

From b89043166b89844094a4221f4a7edd5ef9e4b9c7 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 9 Sep 2019 16:35:11 +0200
Subject: [PATCH 10/14] Add backend tests for filtering posts by emotions

- Co-authored-by: Mike Aono <aonomike@gmail.com>
---
 backend/src/schema/resolvers/posts.spec.js | 66 ++++++++++++++++++++--
 backend/src/seed/factories/posts.js        |  2 +-
 2 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/backend/src/schema/resolvers/posts.spec.js b/backend/src/schema/resolvers/posts.spec.js
index 7c5e88d69..af2d8089c 100644
--- a/backend/src/schema/resolvers/posts.spec.js
+++ b/backend/src/schema/resolvers/posts.spec.js
@@ -91,7 +91,7 @@ afterEach(async () => {
 })
 
 describe('Post', () => {
-  const postQuery = gql`
+  const postQueryFilteredByCategories = gql`
     query Post($filter: _PostFilter) {
       Post(filter: $filter) {
         id
@@ -102,13 +102,28 @@ describe('Post', () => {
     }
   `
 
+  const postQueryFilteredByEmotions = gql`
+    query Post($filter: _PostFilter) {
+      Post(filter: $filter) {
+        id
+        emotions {
+          emotion
+        }
+      }
+    }
+  `
+
   describe('can be filtered', () => {
-    it('by categories', async () => {
-      await Promise.all([
+    let post31, post32
+    beforeEach(async () => {
+      ;[post31, post32] = await Promise.all([
         factory.create('Post', { id: 'p31', categoryIds: ['cat4'] }),
         factory.create('Post', { id: 'p32', categoryIds: ['cat15'] }),
         factory.create('Post', { id: 'p33', categoryIds: ['cat9'] }),
       ])
+    })
+
+    it('by categories', async () => {
       const expected = {
         data: {
           Post: [
@@ -120,7 +135,50 @@ describe('Post', () => {
         },
       }
       variables = { ...variables, filter: { categories_some: { id_in: ['cat9'] } } }
-      await expect(query({ query: postQuery, variables })).resolves.toMatchObject(expected)
+      await expect(
+        query({ query: postQueryFilteredByCategories, variables }),
+      ).resolves.toMatchObject(expected)
+    })
+
+    it('by emotions', async () => {
+      const expected = {
+        data: {
+          Post: [
+            {
+              id: 'p31',
+              emotions: [{ emotion: 'happy' }],
+            },
+          ],
+        },
+      }
+      await user.relateTo(post31, 'emoted', { emotion: 'happy' })
+      variables = { ...variables, filter: { emotions_some: { emotion_in: ['happy'] } } }
+      await expect(query({ query: postQueryFilteredByEmotions, variables })).resolves.toMatchObject(
+        expected,
+      )
+    })
+
+    it('supports filtering by multiple emotions', async () => {
+      const expected = [
+        {
+          id: 'p31',
+          emotions: [{ emotion: 'happy' }],
+        },
+        {
+          id: 'p32',
+          emotions: [{ emotion: 'cry' }],
+        },
+      ]
+      await user.relateTo(post31, 'emoted', { emotion: 'happy' })
+      await user.relateTo(post32, 'emoted', { emotion: 'cry' })
+      variables = { ...variables, filter: { emotions_some: { emotion_in: ['happy', 'cry'] } } }
+      await expect(query({ query: postQueryFilteredByEmotions, variables })).resolves.toMatchObject(
+        {
+          data: {
+            Post: expect.arrayContaining(expected),
+          },
+        },
+      )
     })
   })
 })
diff --git a/backend/src/seed/factories/posts.js b/backend/src/seed/factories/posts.js
index e81251c53..3058204a1 100644
--- a/backend/src/seed/factories/posts.js
+++ b/backend/src/seed/factories/posts.js
@@ -30,7 +30,7 @@ export default function create() {
       let { categories, categoryIds } = args
       delete args.categories
       delete args.categoryIds
-      if (categories && categoryIds) throw new Error('You provided both category and categoryIds')
+      if (categories && categoryIds) throw new Error('You provided both categories and categoryIds')
       if (categoryIds)
         categories = await Promise.all(categoryIds.map(id => neodeInstance.find('Category', id)))
       categories = categories || (await Promise.all([factoryInstance.create('Category')]))

From 919dc1924fcaf2566edb01dc4e796e22cc836e6d Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 9 Sep 2019 16:46:51 +0200
Subject: [PATCH 11/14] Fix indent issue

---
 backend/src/schema/types/type/Post.gql | 154 ++++++++++++-------------
 1 file changed, 77 insertions(+), 77 deletions(-)

diff --git a/backend/src/schema/types/type/Post.gql b/backend/src/schema/types/type/Post.gql
index 5f0aeea7a..5b11757d3 100644
--- a/backend/src/schema/types/type/Post.gql
+++ b/backend/src/schema/types/type/Post.gql
@@ -1,92 +1,92 @@
 type Post {
-	id: ID!
-	activityId: String
-	objectId: String
-	author: User @relation(name: "WROTE", direction: "IN")
-	title: String!
-	slug: String
-	content: String!
-	contentExcerpt: String
-	image: String
-	imageUpload: Upload
-	visibility: Visibility
-	deleted: Boolean
-	disabled: Boolean
-	disabledBy: User @relation(name: "DISABLED", direction: "IN")
-	createdAt: String
-	updatedAt: String
-	language: String
-	relatedContributions: [Post]!
-	@cypher(
-	statement: """
-	MATCH (this)-[: TAGGED|CATEGORIZED]->(categoryOrTag)<-[: TAGGED|CATEGORIZED]-(post: Post)
-	WHERE NOT post.deleted AND NOT post.disabled
-	RETURN DISTINCT post
-	LIMIT 10
-	"""
-	)
+  id: ID!
+  activityId: String
+  objectId: String
+  author: User @relation(name: "WROTE", direction: "IN")
+  title: String!
+  slug: String
+  content: String!
+  contentExcerpt: String
+  image: String
+  imageUpload: Upload
+  visibility: Visibility
+  deleted: Boolean
+  disabled: Boolean
+  disabledBy: User @relation(name: "DISABLED", direction: "IN")
+  createdAt: String
+  updatedAt: String
+  language: String
+  relatedContributions: [Post]!
+    @cypher(
+      statement: """
+      MATCH (this)-[:TAGGED|CATEGORIZED]->(categoryOrTag)<-[:TAGGED|CATEGORIZED]-(post:Post)
+      WHERE NOT post.deleted AND NOT post.disabled
+      RETURN DISTINCT post
+      LIMIT 10
+      """
+    )
 
-	tags: [Tag]! @relation(name: "TAGGED", direction: "OUT")
-	categories: [Category]! @relation(name: "CATEGORIZED", direction: "OUT")
+  tags: [Tag]! @relation(name: "TAGGED", direction: "OUT")
+  categories: [Category]! @relation(name: "CATEGORIZED", direction: "OUT")
 
-	comments: [Comment]! @relation(name: "COMMENTS", direction: "IN")
-	commentsCount: Int!
-	@cypher(
-	statement: "MATCH (this)<-[: COMMENTS]-(r: Comment) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(DISTINCT r)"
-	)
+  comments: [Comment]! @relation(name: "COMMENTS", direction: "IN")
+  commentsCount: Int!
+    @cypher(
+      statement: "MATCH (this)<-[:COMMENTS]-(r:Comment) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(DISTINCT r)"
+    )
 
-	shoutedBy: [User]! @relation(name: "SHOUTED", direction: "IN")
-	shoutedCount: Int!
-	@cypher(
-	statement: "MATCH (this)<-[: SHOUTED]-(r: User) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(DISTINCT r)"
-	)
+  shoutedBy: [User]! @relation(name: "SHOUTED", direction: "IN")
+  shoutedCount: Int!
+    @cypher(
+      statement: "MATCH (this)<-[:SHOUTED]-(r:User) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(DISTINCT r)"
+    )
 
-	# Has the currently logged in user shouted that post?
-	shoutedByCurrentUser: Boolean!
-	@cypher(
-	statement: "MATCH (this)<-[: SHOUTED]-(u: User { id: $cypherParams.currentUserId}) RETURN COUNT(u) >= 1"
-	)
+  # Has the currently logged in user shouted that post?
+  shoutedByCurrentUser: Boolean!
+    @cypher(
+      statement: "MATCH (this)<-[:SHOUTED]-(u:User {id: $cypherParams.currentUserId}) RETURN COUNT(u) >= 1"
+    )
 
-	emotions: [EMOTED]
-	emotionsCount: Int!
-	@cypher(statement: "MATCH (this)<-[emoted: EMOTED]-(: User) RETURN COUNT(DISTINCT emoted)")
+  emotions: [EMOTED]
+  emotionsCount: Int!
+    @cypher(statement: "MATCH (this)<-[emoted:EMOTED]-(:User) RETURN COUNT(DISTINCT emoted)")
 }
 
 input _PostInput {
-	id: ID!
+  id: ID!
 }
 
 type Mutation {
-	CreatePost(
-	id: ID
-	title: String!
-	slug: String
-	content: String!
-	image: String
-	imageUpload: Upload
-	visibility: Visibility
-	language: String
-	categoryIds: [ID]
-	contentExcerpt: String
-	): Post
-	UpdatePost(
-	id: ID!
-	title: String!
-	slug: String
-	content: String!
-	contentExcerpt: String
-	image: String
-	imageUpload: Upload
-	visibility: Visibility
-	language: String
-	categoryIds: [ID]
-	): Post
-	DeletePost(id: ID!): Post
-	AddPostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
-	RemovePostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
+  CreatePost(
+    id: ID
+    title: String!
+    slug: String
+    content: String!
+    image: String
+    imageUpload: Upload
+    visibility: Visibility
+    language: String
+    categoryIds: [ID]
+    contentExcerpt: String
+  ): Post
+  UpdatePost(
+    id: ID!
+    title: String!
+    slug: String
+    content: String!
+    contentExcerpt: String
+    image: String
+    imageUpload: Upload
+    visibility: Visibility
+    language: String
+    categoryIds: [ID]
+  ): Post
+  DeletePost(id: ID!): Post
+  AddPostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
+  RemovePostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
 }
 
 type Query {
-	PostsEmotionsCountByEmotion(postId: ID!, data: _EMOTEDInput!): Int!
-	PostsEmotionsByCurrentUser(postId: ID!): [String]
-}
\ No newline at end of file
+  PostsEmotionsCountByEmotion(postId: ID!, data: _EMOTEDInput!): Int!
+  PostsEmotionsByCurrentUser(postId: ID!): [String]
+}

From 86d80c689cefdca525cac11b31a845d22073fa5f Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 9 Sep 2019 16:51:24 +0200
Subject: [PATCH 12/14] Fix indentation issue on EMOTED

---
 backend/src/schema/types/type/EMOTED.gql | 1 +
 1 file changed, 1 insertion(+)

diff --git a/backend/src/schema/types/type/EMOTED.gql b/backend/src/schema/types/type/EMOTED.gql
index cefb26f21..9928c5741 100644
--- a/backend/src/schema/types/type/EMOTED.gql
+++ b/backend/src/schema/types/type/EMOTED.gql
@@ -15,6 +15,7 @@ input _EMOTEDInput {
 	updatedAt: String
 }
 
+
 input _PostEMOTEDFilter {
 	emotion_in: [Emotion]
 	createdAt: String

From 3b056aacc167bef6baf160fb3618c3934cd2485d Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 9 Sep 2019 16:58:49 +0200
Subject: [PATCH 13/14] Fix weird indentation issue with VS Code

---
 backend/src/schema/types/type/EMOTED.gql | 33 ++++++++++++------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/backend/src/schema/types/type/EMOTED.gql b/backend/src/schema/types/type/EMOTED.gql
index 9928c5741..ee1576517 100644
--- a/backend/src/schema/types/type/EMOTED.gql
+++ b/backend/src/schema/types/type/EMOTED.gql
@@ -1,28 +1,27 @@
 type EMOTED @relation(name: "EMOTED") {
-	from: User
-	to: Post
+  from: User
+  to: Post
 
-	emotion: Emotion
-	# createdAt: DateTime
-	# updatedAt: DateTime
-	createdAt: String
-	updatedAt: String
+  emotion: Emotion
+  # createdAt: DateTime
+  # updatedAt: DateTime
+  createdAt: String
+  updatedAt: String
 }
 
 input _EMOTEDInput {
-	emotion: Emotion
-	createdAt: String
-	updatedAt: String
+  emotion: Emotion
+  createdAt: String
+  updatedAt: String
 }
 
-
 input _PostEMOTEDFilter {
-	emotion_in: [Emotion]
-	createdAt: String
-	updatedAt: String
+  emotion_in: [Emotion]
+  createdAt: String
+  updatedAt: String
 }
 
 type Mutation {
-	AddPostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
-	RemovePostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
-}
\ No newline at end of file
+  AddPostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
+  RemovePostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
+}

From 72ae2a4e44794154c4f911645619cfc45bcfa2cd Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Tue, 10 Sep 2019 09:31:59 +0200
Subject: [PATCH 14/14] Improve CSS

- filter by users followed button was slightly higher than emotions
buttons
---
 webapp/components/FilterPosts/GeneralFilterMenuItems.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
index 183f2b250..0c8db9d22 100644
--- a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
@@ -11,6 +11,7 @@
       >
         <ds-flex>
           <ds-flex-item width="10%" />
+          <ds-space margin-bottom="xx-small" />
           <ds-flex-item width="100%">
             <div class="follow-button">
               <ds-button
@@ -24,6 +25,7 @@
                 :primary="filteredByUsersFollowed"
                 @click="toggleFilteredByFollowed(user.id)"
               />
+              <ds-space margin-bottom="x-small" />
               <ds-flex-item>
                 <label class="follow-label">{{ $t('filter-posts.followers.label') }}</label>
               </ds-flex-item>
@@ -42,9 +44,10 @@
           >
             <img :src="iconPath(emotion)" width="40" />
           </ds-button>
-          <div class="emotions-mobile-space text-center">
-            <p class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</p>
-          </div>
+          <ds-space margin-bottom="x-small" />
+          <ds-flex-item class="emotions-mobile-space text-center">
+            <label class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</label>
+          </ds-flex-item>
         </ds-flex-item>
       </div>
       <ds-space margin-bottom="large" />