From c6b261853f9aef26fc1d72b3f87fd62d947c6a9e Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Wed, 3 Jul 2019 19:46:26 -0300
Subject: [PATCH 01/39] Add test for filter posts by category

---
 backend/src/schema/resolvers/posts.spec.js | 52 ++++++++++++++++++++--
 1 file changed, 49 insertions(+), 3 deletions(-)

diff --git a/backend/src/schema/resolvers/posts.spec.js b/backend/src/schema/resolvers/posts.spec.js
index 763945527..4c288fc25 100644
--- a/backend/src/schema/resolvers/posts.spec.js
+++ b/backend/src/schema/resolvers/posts.spec.js
@@ -32,6 +32,26 @@ const postQueryWithCategories = `
     }
   }
 `
+const createPostWithoutCategoriesVariables = {
+  title: 'This is a post without categories',
+  content: 'I should be able to filter it out',
+  categoryIds: null,
+}
+const postQueryFilteredByCategory = `
+  query($name: String) {
+    Post(filter: { categories_some: { name: $name } }) {
+      title
+      id
+      categories {
+        name
+      }
+    }
+  }
+`
+const postCategoriesFilterParam = 'Environment & Nature'
+const postQueryFilteredByCategoryVariables = {
+  name: postCategoriesFilterParam,
+}
 beforeEach(async () => {
   await factory.create('User', {
     email: 'test@example.org',
@@ -124,7 +144,8 @@ describe('CreatePost', () => {
     })
 
     describe('categories', () => {
-      it('allows a user to set the categories of the post', async () => {
+      let postWithCategories
+      beforeEach(async () => {
         await Promise.all([
           factory.create('Category', {
             id: 'cat9',
@@ -142,11 +163,14 @@ describe('CreatePost', () => {
             icon: 'shopping-cart',
           }),
         ])
-        const expected = [{ id: 'cat9' }, { id: 'cat4' }, { id: 'cat15' }]
-        const postWithCategories = await client.request(
+        postWithCategories = await client.request(
           createPostWithCategoriesMutation,
           creatPostWithCategoriesVariables,
         )
+      })
+
+      it('allows a user to set the categories of the post', async () => {
+        const expected = [{ id: 'cat9' }, { id: 'cat4' }, { id: 'cat15' }]
         const postQueryWithCategoriesVariables = {
           id: postWithCategories.CreatePost.id,
         }
@@ -154,6 +178,28 @@ describe('CreatePost', () => {
           client.request(postQueryWithCategories, postQueryWithCategoriesVariables),
         ).resolves.toEqual({ Post: [{ categories: expect.arrayContaining(expected) }] })
       })
+
+      it('allows a user to filter for posts by category', async () => {
+        await client.request(createPostWithCategoriesMutation, createPostWithoutCategoriesVariables)
+        const categoryNames = [
+          { name: 'Democracy & Politics' },
+          { name: 'Environment & Nature' },
+          { name: 'Consumption & Sustainability' },
+        ]
+        const expected = {
+          Post: [
+            {
+              title: postTitle,
+              id: postWithCategories.CreatePost.id,
+              categories: expect.arrayContaining(categoryNames),
+            },
+          ],
+        }
+
+        await expect(
+          client.request(postQueryFilteredByCategory, postQueryFilteredByCategoryVariables),
+        ).resolves.toEqual(expected)
+      })
     })
   })
 })

From bb93052b88da55c9c551cacd2934a91b38319e28 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Wed, 3 Jul 2019 19:46:49 -0300
Subject: [PATCH 02/39] Add FilterPosts dropdown with category names

---
 webapp/components/FilterPosts/FilterPosts.vue | 86 +++++++++++++++++++
 webapp/layouts/default.vue                    | 21 ++++-
 webapp/store/categories.js                    | 42 +++++++++
 3 files changed, 147 insertions(+), 2 deletions(-)
 create mode 100644 webapp/components/FilterPosts/FilterPosts.vue
 create mode 100644 webapp/store/categories.js

diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
new file mode 100644
index 000000000..7fff1d477
--- /dev/null
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -0,0 +1,86 @@
+<template>
+  <dropdown class="avatar-menu">
+    <dropdown ref="menu" :placement="placement" :offset="offset">
+      <a
+        slot="default"
+        slot-scope="{ toggleMenu }"
+        class="locale-menu"
+        href="#"
+        @click.prevent="toggleMenu()"
+      >
+        <ds-icon style="margin: 5px 0px 0px 10px;" name="filter" size="large" />
+        <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
+      </a>
+      <ds-menu
+        slot="popover"
+        slot-scope="{ toggleMenu }"
+        class="locale-menu-popover"
+        :routes="routes"
+      >
+        <ds-menu-item
+          slot="menuitem"
+          slot-scope="item"
+          class="locale-menu-item"
+          :route="item.route"
+          :parents="item.parents"
+          @click.stop.prevent="filterPostsByCategory(item.route.name, toggleMenu)"
+        >
+          <ds-icon :name="item.route.icon" />
+          {{ item.route.name }}
+        </ds-menu-item>
+      </ds-menu>
+    </dropdown>
+  </dropdown>
+</template>
+<script>
+import gql from 'graphql-tag'
+import Dropdown from '~/components/Dropdown'
+
+export default {
+  components: {
+    Dropdown,
+  },
+  props: {
+    placement: { type: String, default: 'bottom-start' },
+    offset: { type: [String, Number], default: '16' },
+    categories: { type: Array, default: () => [] },
+  },
+  computed: {
+    routes() {
+      let routes = this.categories.map(category => {
+        return {
+          name: category.name,
+          id: category.id,
+          icon: category.icon,
+        }
+      })
+      return routes
+    },
+  },
+  methods: {
+    filterPostsByCategory(name) {
+      const filterPostsByCategoryMutation = gql`
+        query($name: String) {
+          Post(filter: { categories_some: { name: $name } }) {
+            title
+            id
+            categories {
+              name
+            }
+          }
+        }
+      `
+      setTimeout(() => {
+        this.$apollo
+          .mutate({
+            mutation: filterPostsByCategoryMutation,
+            variables: { name },
+          })
+          .then(res => {
+            // update the Post query
+          })
+      }, 500)
+    },
+  },
+}
+</script>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index e3fc1cccd..1c1ace9de 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -4,12 +4,12 @@
       <ds-container class="main-navigation-container" style="padding: 10px 10px;">
         <div>
           <ds-flex>
-            <ds-flex-item :width="{ base: '49px', md: '150px' }">
+            <ds-flex-item :width="{ base: '49px', md: '150px', lg: '15%' }">
               <a v-router-link style="display: inline-flex" href="/">
                 <ds-logo />
               </a>
             </ds-flex-item>
-            <ds-flex-item>
+            <ds-flex-item :width="{ lg: '50%' }">
               <div id="nav-search-box" v-on:click="unfolded" @blur.capture="foldedup">
                 <search-input
                   id="nav-search"
@@ -22,6 +22,16 @@
                 />
               </div>
             </ds-flex-item>
+            <ds-flex-item :width="{ lg: '10%' }">
+              <no-ssr>
+                <filter-posts
+                  class="topbar-locale-switch"
+                  placement="bottom"
+                  offset="23"
+                  :categories="categories"
+                />
+              </no-ssr>
+            </ds-flex-item>
             <ds-flex-item width="200px" style="background-color:white">
               <div class="main-navigation-right" style="float:right">
                 <no-ssr>
@@ -109,6 +119,7 @@ import NotificationMenu from '~/components/notifications/NotificationMenu'
 import Dropdown from '~/components/Dropdown'
 import HcAvatar from '~/components/Avatar/Avatar.vue'
 import seo from '~/mixins/seo'
+import FilterPosts from '~/components/FilterPosts/FilterPosts.vue'
 
 export default {
   components: {
@@ -118,6 +129,7 @@ export default {
     Modal,
     NotificationMenu,
     HcAvatar,
+    FilterPosts,
   },
   mixins: [seo],
   data() {
@@ -133,6 +145,7 @@ export default {
       isAdmin: 'auth/isAdmin',
       quickSearchResults: 'search/quickResults',
       quickSearchPending: 'search/quickPending',
+      categories: 'categories/categories',
     }),
     userName() {
       const { name } = this.user || {}
@@ -171,10 +184,14 @@ export default {
       return routes
     },
   },
+  mounted() {
+    this.fetchCategories()
+  },
   methods: {
     ...mapActions({
       quickSearchClear: 'search/quickClear',
       quickSearch: 'search/quickSearch',
+      fetchCategories: 'categories/fetchCategories',
     }),
     goToPost(item) {
       this.$nextTick(() => {
diff --git a/webapp/store/categories.js b/webapp/store/categories.js
new file mode 100644
index 000000000..5fa67ed66
--- /dev/null
+++ b/webapp/store/categories.js
@@ -0,0 +1,42 @@
+import gql from 'graphql-tag'
+
+export const state = () => {
+  return {
+    categories: null,
+    pending: false,
+  }
+}
+
+export const mutations = {
+  SET_CATEGORIES(state, categories) {
+    state.categories = categories || null
+  },
+  SET_PENDING(state, pending) {
+    state.pending = pending
+  },
+}
+
+export const getters = {
+  categories(state) {
+    return state.categories || []
+  },
+}
+
+export const actions = {
+  async fetchCategories({ commit }) {
+    const client = this.app.apolloProvider.defaultClient
+    const {
+      data: { Category },
+    } = await client.query({
+      query: gql(`{
+          Category {
+            id
+            name
+            icon
+          }
+      }`),
+    })
+    commit('SET_CATEGORIES', Category)
+    return Category
+  },
+}

From 65f11d6f988cb0e47fb3867b057d44d08a6ef0de Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Thu, 4 Jul 2019 20:32:16 -0300
Subject: [PATCH 03/39] Add functionality to filter posts by category

- only filters if you send two requests :'(
---
 webapp/components/FilterPosts/FilterPosts.vue | 58 +++++++++++--------
 webapp/graphql/PostQuery.js                   | 46 +++++++++++++++
 webapp/pages/index.vue                        | 45 +-------------
 3 files changed, 82 insertions(+), 67 deletions(-)

diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 7fff1d477..bf22ba795 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -22,8 +22,7 @@
           slot-scope="item"
           class="locale-menu-item"
           :route="item.route"
-          :parents="item.parents"
-          @click.stop.prevent="filterPostsByCategory(item.route.name, toggleMenu)"
+          @click.stop.prevent="filterPosts(item.route.name, toggleMenu)"
         >
           <ds-icon :name="item.route.icon" />
           {{ item.route.name }}
@@ -33,8 +32,8 @@
   </dropdown>
 </template>
 <script>
-import gql from 'graphql-tag'
 import Dropdown from '~/components/Dropdown'
+import { filterPosts } from '~/graphql/PostQuery.js'
 
 export default {
   components: {
@@ -45,6 +44,12 @@ export default {
     offset: { type: [String, Number], default: '16' },
     categories: { type: Array, default: () => [] },
   },
+  data() {
+    return {
+      filter: {},
+      pageSize: 12,
+    }
+  },
   computed: {
     routes() {
       let routes = this.categories.map(category => {
@@ -58,28 +63,33 @@ export default {
     },
   },
   methods: {
-    filterPostsByCategory(name) {
-      const filterPostsByCategoryMutation = gql`
-        query($name: String) {
-          Post(filter: { categories_some: { name: $name } }) {
-            title
-            id
-            categories {
-              name
-            }
+    filterPosts(name) {
+      this.filter = { categories_some: { name } }
+      this.$apollo.mutate({
+        mutation: filterPosts(this.$i18n),
+        variables: {
+          filter: this.filter,
+          first: this.pageSize,
+          offset: 0,
+        },
+        update: (store, { data: { Post } }) => {
+          const data = store.readQuery({
+            query: filterPosts(this.$i18n),
+            variables: {
+              filter: {},
+              first: this.pageSize,
+              offset: 0,
+            },
+          })
+          data.Post = Post
+          data.Post.push(Post)
+          const index = data.Post.findIndex(old => old.id === Post.id)
+          if (index !== -1) {
+            data.Post.splice(index, 1)
           }
-        }
-      `
-      setTimeout(() => {
-        this.$apollo
-          .mutate({
-            mutation: filterPostsByCategoryMutation,
-            variables: { name },
-          })
-          .then(res => {
-            // update the Post query
-          })
-      }, 500)
+          store.writeQuery({ query: filterPosts(this.$i18n), data })
+        },
+      })
     },
   },
 }
diff --git a/webapp/graphql/PostQuery.js b/webapp/graphql/PostQuery.js
index 240f718ae..cac53cda6 100644
--- a/webapp/graphql/PostQuery.js
+++ b/webapp/graphql/PostQuery.js
@@ -77,3 +77,49 @@ export default i18n => {
       }
     `)
 }
+
+export const filterPosts = i18n => {
+  const lang = i18n.locale().toUpperCase()
+  return gql(`
+  query Post($filter: _PostFilter, $first: Int, $offset: Int) {
+    Post(filter: $filter, first: $first, offset: $offset) {
+      id
+      title
+      contentExcerpt
+      createdAt
+      disabled
+      deleted
+      slug
+      image
+      author {
+        id
+        avatar
+        slug
+        name
+        disabled
+        deleted
+        contributionsCount
+        shoutedCount
+        commentsCount
+        followedByCount
+        followedByCurrentUser
+        location {
+          name: name${lang}
+        }
+        badges {
+          id
+          key
+          icon
+        }
+      }
+      commentsCount
+      categories {
+        id
+        name
+        icon
+      }
+      shoutedCount
+    }
+  }
+`)
+}
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 40cbebcca..43a65117a 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -28,11 +28,11 @@
 
 <script>
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
-import gql from 'graphql-tag'
 import uniqBy from 'lodash/uniqBy'
 import HcPostCard from '~/components/PostCard'
 import HcLoadMore from '~/components/LoadMore.vue'
 import { mapGetters } from 'vuex'
+import { filterPosts } from '~/graphql/PostQuery.js'
 
 export default {
   components: {
@@ -105,48 +105,7 @@ export default {
   apollo: {
     Post: {
       query() {
-        return gql(`
-          query Post($filter: _PostFilter, $first: Int, $offset: Int) {
-            Post(filter: $filter, first: $first, offset: $offset) {
-              id
-              title
-              contentExcerpt
-              createdAt
-              disabled
-              deleted
-              slug
-              image
-              author {
-                id
-                avatar
-                slug
-                name
-                disabled
-                deleted
-                contributionsCount
-                shoutedCount
-                commentsCount
-                followedByCount
-                followedByCurrentUser
-                location {
-                  name: name${this.$i18n.locale().toUpperCase()}
-                }
-                badges {
-                  id
-                  key
-                  icon
-                }
-              }
-              commentsCount
-              categories {
-                id
-                name
-                icon
-              }
-              shoutedCount
-            }
-          }
-        `)
+        return filterPosts(this.$i18n)
       },
       variables() {
         return {

From 3b6db5f6314a99e0bd068a5bb058bd3ab12f1931 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 5 Jul 2019 12:47:44 -0300
Subject: [PATCH 04/39] Set up posts in store, get working from FilterPosts

- also, set it up to be mobile responsive
---
 webapp/components/FilterPosts/FilterPosts.vue | 43 +++++-------
 webapp/layouts/default.vue                    | 69 +++++++++++++++----
 webapp/pages/index.vue                        | 26 +++++--
 webapp/store/posts.js                         | 17 +++++
 4 files changed, 111 insertions(+), 44 deletions(-)
 create mode 100644 webapp/store/posts.js

diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index bf22ba795..842e3f15e 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -34,6 +34,7 @@
 <script>
 import Dropdown from '~/components/Dropdown'
 import { filterPosts } from '~/graphql/PostQuery.js'
+import { mapMutations } from 'vuex'
 
 export default {
   components: {
@@ -46,7 +47,6 @@ export default {
   },
   data() {
     return {
-      filter: {},
       pageSize: 12,
     }
   },
@@ -63,33 +63,24 @@ export default {
     },
   },
   methods: {
+    ...mapMutations({
+      setPosts: 'posts/SET_POSTS',
+    }),
     filterPosts(name) {
       this.filter = { categories_some: { name } }
-      this.$apollo.mutate({
-        mutation: filterPosts(this.$i18n),
-        variables: {
-          filter: this.filter,
-          first: this.pageSize,
-          offset: 0,
-        },
-        update: (store, { data: { Post } }) => {
-          const data = store.readQuery({
-            query: filterPosts(this.$i18n),
-            variables: {
-              filter: {},
-              first: this.pageSize,
-              offset: 0,
-            },
-          })
-          data.Post = Post
-          data.Post.push(Post)
-          const index = data.Post.findIndex(old => old.id === Post.id)
-          if (index !== -1) {
-            data.Post.splice(index, 1)
-          }
-          store.writeQuery({ query: filterPosts(this.$i18n), data })
-        },
-      })
+      this.$apollo
+        .query({
+          query: filterPosts(this.$i18n),
+          variables: {
+            filter: this.filter,
+            first: this.pageSize,
+            offset: 0,
+          },
+        })
+        .then(({ data: { Post } }) => {
+          this.setPosts(Post)
+        })
+        .catch(error => this.$toast.error(error.message))
     },
   },
 }
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index b98960bae..1f9f4a1a2 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -3,13 +3,23 @@
     <div class="main-navigation">
       <ds-container class="main-navigation-container" style="padding: 10px 10px;">
         <div>
-          <ds-flex>
-            <ds-flex-item :width="{ base: '49px', md: '150px', lg: '15%' }">
-              <a v-router-link style="display: inline-flex" href="/">
+          <ds-flex class="main-navigation-flex">
+            <ds-flex-item :width="{ lg: '5%' }" />
+            <ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
+              <a @click="$router.go('/')">
                 <ds-logo />
               </a>
             </ds-flex-item>
-            <ds-flex-item :width="{ lg: '50%' }">
+            <ds-flex-item
+              :width="{ base: '20%', sm: '20%', md: '20%', lg: '0%' }"
+              class="mobile-hamburger-menu"
+            >
+              <ds-button icon="bars" @click="toggleMobileMenuView" right />
+            </ds-flex-item>
+            <ds-flex-item
+              :width="{ base: '100%', sm: '100%', md: '50%', lg: '45%' }"
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+            >
               <div id="nav-search-box" v-on:click="unfolded" @blur.capture="foldedup">
                 <search-input
                   id="nav-search"
@@ -22,18 +32,26 @@
                 />
               </div>
             </ds-flex-item>
-            <ds-flex-item :width="{ lg: '10%' }">
+            <ds-flex-item
+              :width="{ base: '100%', sm: '100%', md: '10%', lg: '10%' }"
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+            >
               <no-ssr>
-                <filter-posts
-                  class="topbar-locale-switch"
-                  placement="bottom"
-                  offset="23"
-                  :categories="categories"
-                />
+                <filter-posts placement="bottom" offset="23" :categories="categories" />
               </no-ssr>
             </ds-flex-item>
-            <ds-flex-item width="200px" style="background-color:white">
-              <div class="main-navigation-right" style="float:right">
+            <ds-flex-item
+              :width="{ base: '100%', sm: '100%', md: '100%', lg: '20%' }"
+              style="background-color:white"
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+            >
+              <div
+                class="main-navigation-right"
+                :class="{
+                  'desktop-view': !toggleMobileMenu,
+                  'hide-mobile-menu': !toggleMobileMenu,
+                }"
+              >
                 <no-ssr>
                   <locale-switch class="topbar-locale-switch" placement="bottom" offset="23" />
                 </no-ssr>
@@ -135,6 +153,7 @@ export default {
   data() {
     return {
       mobileSearchVisible: false,
+      toggleMobileMenu: false,
     }
   },
   computed: {
@@ -214,6 +233,9 @@ export default {
     foldedup: function() {
       document.getElementById('nav-search-box').classList.remove('unfolded')
     },
+    toggleMobileMenuView() {
+      this.toggleMobileMenu = !this.toggleMobileMenu
+    },
   },
 }
 </script>
@@ -245,6 +267,10 @@ export default {
   flex: 1;
 }
 
+.main-navigation-right .desktop-view {
+  float: right;
+}
+
 .avatar-menu-trigger {
   user-select: none;
   display: flex;
@@ -288,4 +314,21 @@ export default {
     }
   }
 }
+
+@media only screen and (min-width: 960px) {
+  .mobile-hamburger-menu {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 960px) {
+  #nav-search-box,
+  .main-navigation-right {
+    margin: 10px 0px;
+  }
+
+  .hide-mobile-menu {
+    display: none;
+  }
+}
 </style>
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 43a65117a..e39aca567 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -2,10 +2,14 @@
   <div>
     <ds-flex :width="{ base: '100%' }" gutter="base">
       <ds-flex-item>
-        <filter-menu :user="currentUser" @changeFilterBubble="changeFilterBubble" />
+        <filter-menu
+          :user="currentUser"
+          @changeFilterBubble="changeFilterBubble"
+          :categories="categories"
+        />
       </ds-flex-item>
       <hc-post-card
-        v-for="(post, index) in uniq(Post)"
+        v-for="(post, index) in posts"
         :key="post.id"
         :post="post"
         :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
@@ -31,7 +35,7 @@ import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import uniqBy from 'lodash/uniqBy'
 import HcPostCard from '~/components/PostCard'
 import HcLoadMore from '~/components/LoadMore.vue'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions, mapMutations } from 'vuex'
 import { filterPosts } from '~/graphql/PostQuery.js'
 
 export default {
@@ -43,24 +47,36 @@ export default {
   data() {
     return {
       // Initialize your apollo data
-      Post: [],
       page: 1,
       pageSize: 12,
       filter: {},
     }
   },
+  watch: {
+    Post(post) {
+      this.setPosts(this.Post)
+    },
+  },
   computed: {
     ...mapGetters({
       currentUser: 'auth/user',
+      categories: 'categories/categories',
+      posts: 'posts/posts',
     }),
     tags() {
-      return this.Post ? this.Post[0].tags.map(tag => tag.name) : '-'
+      return this.posts ? this.posts.tags.map(tag => tag.name) : '-'
     },
     offset() {
       return (this.page - 1) * this.pageSize
     },
   },
   methods: {
+    ...mapActions({
+      fetchCategories: 'categories/fetchCategories',
+    }),
+    ...mapMutations({
+      setPosts: 'posts/SET_POSTS',
+    }),
     changeFilterBubble(filter) {
       this.filter = filter
       this.$apollo.queries.Post.refresh()
diff --git a/webapp/store/posts.js b/webapp/store/posts.js
new file mode 100644
index 000000000..cecc2a58e
--- /dev/null
+++ b/webapp/store/posts.js
@@ -0,0 +1,17 @@
+export const state = () => {
+  return {
+    posts: [],
+  }
+}
+
+export const mutations = {
+  SET_POSTS(state, posts) {
+    state.posts = posts || null
+  },
+}
+
+export const getters = {
+  posts(state) {
+    return state.posts || []
+  },
+}

From 98080b597df527a150881a48a19bd3b87c0bbfd4 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 5 Jul 2019 14:34:54 -0300
Subject: [PATCH 05/39] Style categories dropdown items

- it's a vertical list, dealing with difficulties to make it horizontal
---
 webapp/components/FilterPosts/FilterPosts.vue | 65 ++++++++++---------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 842e3f15e..cac6e44c4 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -1,34 +1,27 @@
 <template>
-  <dropdown class="avatar-menu">
-    <dropdown ref="menu" :placement="placement" :offset="offset">
-      <a
-        slot="default"
-        slot-scope="{ toggleMenu }"
-        class="locale-menu"
-        href="#"
-        @click.prevent="toggleMenu()"
+  <dropdown ref="menu" :placement="placement" :offset="offset">
+    <a slot="default" slot-scope="{ toggleMenu }" href="#" @click.prevent="toggleMenu()">
+      <ds-icon style="margin: 5px 0px 0px 10px;" name="filter" size="large" />
+      <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
+    </a>
+    <ds-menu slot="popover" slot-scope="{ toggleMenu }" :routes="routes">
+      <ds-menu-item
+        slot="menuitem"
+        slot-scope="item"
+        :route="item.route"
+        @click.stop.prevent="filterPosts(item.route.name, toggleMenu)"
+        class="categories-menu"
       >
-        <ds-icon style="margin: 5px 0px 0px 10px;" name="filter" size="large" />
-        <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
-      </a>
-      <ds-menu
-        slot="popover"
-        slot-scope="{ toggleMenu }"
-        class="locale-menu-popover"
-        :routes="routes"
-      >
-        <ds-menu-item
-          slot="menuitem"
-          slot-scope="item"
-          class="locale-menu-item"
-          :route="item.route"
-          @click.stop.prevent="filterPosts(item.route.name, toggleMenu)"
-        >
-          <ds-icon :name="item.route.icon" />
-          {{ item.route.name }}
-        </ds-menu-item>
-      </ds-menu>
-    </dropdown>
+        <ds-flex class="categories-list">
+          <ds-flex-item width="20%">
+            <ds-button :icon="item.route.icon" primary />
+          </ds-flex-item>
+          <ds-flex-item width="80%">
+            <ds-flex>{{ item.route.name }}</ds-flex>
+          </ds-flex-item>
+        </ds-flex>
+      </ds-menu-item>
+    </ds-menu>
   </dropdown>
 </template>
 <script>
@@ -85,3 +78,17 @@ export default {
   },
 }
 </script>
+<style lang="scss">
+.categories-menu {
+  width: 300px;
+}
+.category-menu-item {
+  text-align: center;
+  padding-bottom: 20px;
+}
+
+.categories-list {
+  display: flex;
+  align-items: baseline;
+}
+</style>

From 737d1f839af4aa8f7adb07d400d4fb463e296a3b Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 8 Jul 2019 21:44:47 -0300
Subject: [PATCH 06/39] Style categories filter dropdown, get working with
 multiple categories

---
 webapp/components/FilterPosts/FilterPosts.vue | 274 +++++++++++++++---
 webapp/layouts/default.vue                    |  33 ++-
 webapp/locales/de.json                        |   7 +-
 webapp/locales/en.json                        |   5 +-
 4 files changed, 273 insertions(+), 46 deletions(-)

diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index cac6e44c4..2dfaa7bf4 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -4,24 +4,191 @@
       <ds-icon style="margin: 5px 0px 0px 10px;" name="filter" size="large" />
       <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
     </a>
-    <ds-menu slot="popover" slot-scope="{ toggleMenu }" :routes="routes">
-      <ds-menu-item
-        slot="menuitem"
-        slot-scope="item"
-        :route="item.route"
-        @click.stop.prevent="filterPosts(item.route.name, toggleMenu)"
-        class="categories-menu"
-      >
-        <ds-flex class="categories-list">
+    <template slot="popover">
+      <ds-container>
+        <ds-space />
+        <ds-flex>
           <ds-flex-item width="20%">
-            <ds-button :icon="item.route.icon" primary />
+            <ds-space margin-bottom="x-small" />
+            <ds-flex>
+              <ds-heading tag="h4">{{ $t('filter-posts.header') }}</ds-heading>
+              <ds-flex-item width="10%" />
+              <ds-flex-item width="100%" style="text-align:center;">
+                <ds-button
+                  icon="check"
+                  @click.stop.prevent="toggleCategory()"
+                  :primary="allCategories"
+                />
+                <ds-flex-item>
+                  <label>{{ $t('filter-posts.all') }}</label>
+                </ds-flex-item>
+                <ds-space />
+              </ds-flex-item>
+            </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="80%">
-            <ds-flex>{{ item.route.name }}</ds-flex>
+          <ds-flex-item width="10%">
+            <ds-flex v-for="category in firstGroup" :key="category.id" class="categories-list">
+              <ds-flex>
+                <ds-flex-item width="100%">
+                  <ds-button
+                    :icon="category.icon"
+                    :primary="isActive(category.id)"
+                    @click.stop.prevent="toggleCategory(category.id)"
+                  />
+                  <ds-space margin-bottom="small" />
+                </ds-flex-item>
+                <ds-flex>
+                  <ds-flex-item>
+                    <label>{{ category.name }}</label>
+                  </ds-flex-item>
+                  <ds-space margin-bottom="xx-large" />
+                </ds-flex>
+              </ds-flex>
+            </ds-flex>
+          </ds-flex-item>
+          <ds-flex-item width="10%">
+            <ds-flex v-for="category in secondGroup" :key="category.id" class="categories-list">
+              <ds-flex>
+                <ds-flex-item width="100%">
+                  <ds-button
+                    :icon="category.icon"
+                    :primary="isActive(category.id)"
+                    @click.stop.prevent="toggleCategory(category.id)"
+                  />
+                  <ds-space margin-bottom="small" />
+                </ds-flex-item>
+                <ds-flex class="categories-list">
+                  <ds-flex-item>
+                    <label>{{ category.name }}</label>
+                  </ds-flex-item>
+                  <ds-space margin-bottom="xx-large" />
+                </ds-flex>
+              </ds-flex>
+            </ds-flex>
+          </ds-flex-item>
+          <ds-flex-item width="10%">
+            <ds-flex v-for="category in thirdGroup" :key="category.id" class="categories-list">
+              <ds-flex>
+                <ds-flex-item width="100%">
+                  <ds-button
+                    :icon="category.icon"
+                    :primary="isActive(category.id)"
+                    @click.stop.prevent="toggleCategory(category.id)"
+                  />
+                  <ds-space margin-bottom="small" />
+                </ds-flex-item>
+                <ds-flex>
+                  <ds-flex-item>
+                    <label>{{ category.name }}</label>
+                  </ds-flex-item>
+                  <ds-space margin-bottom="xx-large" />
+                </ds-flex>
+              </ds-flex>
+            </ds-flex>
+          </ds-flex-item>
+          <ds-flex-item width="10%">
+            <ds-flex v-for="category in fourthGroup" :key="category.id" class="categories-list">
+              <ds-flex>
+                <ds-flex-item width="100%">
+                  <ds-button
+                    :icon="category.icon"
+                    :primary="isActive(category.id)"
+                    @click.stop.prevent="toggleCategory(category.id)"
+                  />
+                  <ds-space margin-bottom="small" />
+                </ds-flex-item>
+                <ds-flex>
+                  <ds-flex-item>
+                    <label>{{ category.name }}</label>
+                  </ds-flex-item>
+                  <ds-space margin-bottom="xx-large" />
+                </ds-flex>
+              </ds-flex>
+            </ds-flex>
+          </ds-flex-item>
+          <ds-flex-item width="10%">
+            <ds-flex v-for="category in fifthGroup" :key="category.id" class="categories-list">
+              <ds-flex>
+                <ds-flex-item width="100%">
+                  <ds-button
+                    :icon="category.icon"
+                    :primary="isActive(category.id)"
+                    @click.stop.prevent="toggleCategory(category.id)"
+                  />
+                  <ds-space margin-bottom="small" />
+                </ds-flex-item>
+                <ds-flex>
+                  <ds-flex-item>
+                    <label>{{ category.name }}</label>
+                  </ds-flex-item>
+                  <ds-space margin-bottom="xx-large" />
+                </ds-flex>
+              </ds-flex>
+            </ds-flex>
+          </ds-flex-item>
+          <ds-flex-item width="10%">
+            <ds-flex v-for="category in sixthGroup" :key="category.id" class="categories-list">
+              <ds-flex>
+                <ds-flex-item width="100%">
+                  <ds-button
+                    :icon="category.icon"
+                    :primary="isActive(category.id)"
+                    @click.stop.prevent="toggleCategory(category.id)"
+                  />
+                  <ds-space margin-bottom="small" />
+                </ds-flex-item>
+                <ds-flex>
+                  <ds-flex-item>
+                    <label>{{ category.name }}</label>
+                  </ds-flex-item>
+                  <ds-space margin-bottom="xx-large" />
+                </ds-flex>
+              </ds-flex>
+            </ds-flex>
+          </ds-flex-item>
+          <ds-flex-item width="10%">
+            <ds-flex v-for="category in seventhGroup" :key="category.id" class="categories-list">
+              <ds-flex>
+                <ds-flex-item width="100%">
+                  <ds-button
+                    :icon="category.icon"
+                    :primary="isActive(category.id)"
+                    @click.stop.prevent="toggleCategory(category.id)"
+                  />
+                  <ds-space margin-bottom="small" />
+                </ds-flex-item>
+                <ds-flex>
+                  <ds-flex-item>
+                    <label>{{ category.name }}</label>
+                  </ds-flex-item>
+                  <ds-space margin-bottom="xx-large" />
+                </ds-flex>
+              </ds-flex>
+            </ds-flex>
+          </ds-flex-item>
+          <ds-flex-item width="10%">
+            <ds-flex v-for="category in eigthGroup" :key="category.id" class="categories-list">
+              <ds-flex>
+                <ds-flex-item width="100%">
+                  <ds-button
+                    :icon="category.icon"
+                    :primary="isActive(category.id)"
+                    @click.stop.prevent="toggleCategory(category.id)"
+                  />
+                  <ds-space margin-bottom="small" />
+                </ds-flex-item>
+                <ds-flex>
+                  <ds-flex-item>
+                    <label>{{ category.name }}</label>
+                  </ds-flex-item>
+                  <ds-space margin-bottom="xx-large" />
+                </ds-flex>
+              </ds-flex>
+            </ds-flex>
           </ds-flex-item>
         </ds-flex>
-      </ds-menu-item>
-    </ds-menu>
+      </ds-container>
+    </template>
   </dropdown>
 </template>
 <script>
@@ -41,31 +208,60 @@ export default {
   data() {
     return {
       pageSize: 12,
+      firstGroup: [],
+      secondGroup: [],
+      thirdGroup: [],
+      fourthGroup: [],
+      fifthGroup: [],
+      sixthGroup: [],
+      seventhGroup: [],
+      eigthGroup: [],
+      selectedCategoryIds: [],
+      allCategories: true,
     }
   },
   computed: {
-    routes() {
-      let routes = this.categories.map(category => {
-        return {
-          name: category.name,
-          id: category.id,
-          icon: category.icon,
+    chunk() {
+      const groupedCategories = []
+      for (let i = 0; i < this.categories.length; i++) {
+        const last = groupedCategories[groupedCategories.length - 1]
+        if (!last || last.length === 2) {
+          groupedCategories.push([this.categories[i]])
+        } else {
+          last.push(this.categories[i])
         }
-      })
-      return routes
+      }
+      return groupedCategories
     },
   },
+  mounted() {
+    this.groupCategories()
+  },
   methods: {
     ...mapMutations({
       setPosts: 'posts/SET_POSTS',
     }),
-    filterPosts(name) {
-      this.filter = { categories_some: { name } }
+    groupCategories() {
+      const groupedCategories = this.chunk
+      this.firstGroup = groupedCategories[0]
+      this.secondGroup = groupedCategories[1]
+      this.thirdGroup = groupedCategories[2]
+      this.fourthGroup = groupedCategories[3]
+      this.fifthGroup = groupedCategories[4]
+      this.sixthGroup = groupedCategories[5]
+      this.seventhGroup = groupedCategories[6]
+      this.eigthGroup = groupedCategories[7]
+    },
+    filterPosts(categoryIds) {
+      const filter = categoryIds.length
+        ? { categories_in: { id_in: this.selectedCategoryIds } }
+        : {}
+      filter.categories_in ? (this.allCategories = false) : (this.allCategories = true)
       this.$apollo
         .query({
           query: filterPosts(this.$i18n),
           variables: {
-            filter: this.filter,
+            filter: filter,
             first: this.pageSize,
             offset: 0,
           },
@@ -75,20 +271,28 @@ export default {
         })
         .catch(error => this.$toast.error(error.message))
     },
+    isActive(id) {
+      const index = this.selectedCategoryIds.indexOf(id)
+      if (index > -1) {
+        return true
+      }
+      return false
+    },
+    toggleCategory(id) {
+      const index = this.selectedCategoryIds.indexOf(id)
+      if (index > -1) {
+        this.selectedCategoryIds.splice(index, 1)
+      } else {
+        this.selectedCategoryIds.push(id)
+      }
+      if (!id) this.selectedCategoryIds = []
+      this.filterPosts(this.selectedCategoryIds)
+    },
   },
 }
 </script>
 <style lang="scss">
-.categories-menu {
-  width: 300px;
-}
-.category-menu-item {
-  text-align: center;
-  padding-bottom: 20px;
-}
-
 .categories-list {
-  display: flex;
-  align-items: baseline;
+  text-align: center;
 }
 </style>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 1f9f4a1a2..6135d95ee 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -6,7 +6,7 @@
           <ds-flex class="main-navigation-flex">
             <ds-flex-item :width="{ lg: '5%' }" />
             <ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
-              <a @click="$router.go('/')">
+              <a @click="$router.push('/').go('/')">
                 <ds-logo />
               </a>
             </ds-flex-item>
@@ -37,7 +37,7 @@
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             >
               <no-ssr>
-                <filter-posts placement="bottom" offset="23" :categories="categories" />
+                <filter-posts placement="bottom-end" offset="23" :categories="getCategories" />
               </no-ssr>
             </ds-flex-item>
             <ds-flex-item
@@ -129,7 +129,8 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import gql from 'graphql-tag'
+import { mapGetters, mapActions, mapMutations } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import SearchInput from '~/components/SearchInput.vue'
 import Modal from '~/components/Modal'
@@ -164,7 +165,7 @@ export default {
       isAdmin: 'auth/isAdmin',
       quickSearchResults: 'search/quickResults',
       quickSearchPending: 'search/quickPending',
-      categories: 'categories/categories',
+      getCategories: 'categories/categories',
     }),
     userName() {
       const { name } = this.user || {}
@@ -203,14 +204,13 @@ export default {
       return routes
     },
   },
-  mounted() {
-    this.fetchCategories()
-  },
   methods: {
     ...mapActions({
       quickSearchClear: 'search/quickClear',
       quickSearch: 'search/quickSearch',
-      fetchCategories: 'categories/fetchCategories',
+    }),
+    ...mapMutations({
+      setCategories: 'categories/SET_CATEGORIES',
     }),
     goToPost(item) {
       this.$nextTick(() => {
@@ -237,6 +237,23 @@ export default {
       this.toggleMobileMenu = !this.toggleMobileMenu
     },
   },
+  apollo: {
+    Category: {
+      query() {
+        return gql(`{
+          Category {
+            id
+            name
+            icon
+          }
+        }`)
+      },
+      result(result) {
+        this.setCategories(result.data.Category)
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+  },
 }
 </script>
 <style>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 430402c84..64e69e053 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -1,6 +1,10 @@
 {
   "filter-menu": {
-    "title": "Deine Filterblase"
+    "title": "Deine Filterblase",
+    "all": "Alle"
+  },
+  "filter-posts": {
+    "header": "Themenkategorien"
   },
   "login": {
     "copy": "Wenn Du bereits ein Konto bei Human Connection hast, melde Dich bitte hier an.",
@@ -344,5 +348,4 @@
       "infoSelectedNoOfMaxCategories": "{chosen} von {max} Kategorien ausgewählt"
     }
   }
-
 }
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index de5884f61..e6c109020 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -2,6 +2,10 @@
   "filter-menu": {
     "title": "Your filter bubble"
   },
+  "filter-posts": {
+    "header": "Categories of Content",
+    "all": "All"
+  },
   "login": {
     "copy": "If you already have a human-connection account, login here.",
     "login": "Login",
@@ -195,7 +199,6 @@
       "more": "show more",
       "less": "show less"
     }
-
   },
   "quotes": {
     "african": {

From 014de3b97b5ec9caec2cb771c94da7c9d3822abb Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Tue, 9 Jul 2019 07:58:15 -0300
Subject: [PATCH 07/39] Destructure category from result

---
 backend/.env.template                            |  2 +-
 .../administration/TagsAndCategories.feature     | 16 ++++++++--------
 webapp/layouts/default.vue                       |  4 ++--
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/backend/.env.template b/backend/.env.template
index 0c80529a1..594c7b28b 100644
--- a/backend/.env.template
+++ b/backend/.env.template
@@ -1,5 +1,5 @@
 NEO4J_URI=bolt://localhost:7687
-NEO4J_USER=neo4j
+NEO4J_USERNAME=neo4j
 NEO4J_PASSWORD=letmein
 GRAPHQL_PORT=4000
 GRAPHQL_URI=http://localhost:4000
diff --git a/cypress/integration/administration/TagsAndCategories.feature b/cypress/integration/administration/TagsAndCategories.feature
index e55535ea9..96196be01 100644
--- a/cypress/integration/administration/TagsAndCategories.feature
+++ b/cypress/integration/administration/TagsAndCategories.feature
@@ -22,16 +22,16 @@ Feature: Tags and Categories
     When I navigate to the administration dashboard
     And I click on the menu item "Categories"
     Then I can see the following table:
-      |      | Name               | Posts      |
-      |      | Just For Fun       | 2          |
-      |      | Happyness & Values | 1          |
-      |      | Health & Wellbeing | 0          |
+      |  | Name               | Posts |
+      |  | Just For Fun       | 2     |
+      |  | Happyness & Values | 1     |
+      |  | Health & Wellbeing | 0     |
 
   Scenario: See an overview of tags
     When I navigate to the administration dashboard
     And I click on the menu item "Tags"
     Then I can see the following table:
-      |   | Name      | Users  | Posts    |
-      | 1 | Democracy | 3      | 4        |
-      | 2 | Nature    | 2      | 3        |
-      | 3 | Ecology   | 1      | 1        |
+      |   | Name      | Users | Posts |
+      | 1 | Democracy | 3     | 4     |
+      | 2 | Nature    | 2     | 3     |
+      | 3 | Ecology   | 1     | 1     |
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 6135d95ee..82851cb8a 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -248,8 +248,8 @@ export default {
           }
         }`)
       },
-      result(result) {
-        this.setCategories(result.data.Category)
+      result({ data: Category }) {
+        this.setCategories(Category)
       },
       fetchPolicy: 'cache-and-network',
     },

From e541d88e727af96e411b6810a7938a0e04baaf80 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Tue, 9 Jul 2019 10:52:04 -0300
Subject: [PATCH 08/39] Add force true to userprofile upload

- It was being covered by another element:
<div class="v-popover avatar-menu">...</div>
---
 cypress/integration/common/profile.js | 52 +++++++++++++--------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/cypress/integration/common/profile.js b/cypress/integration/common/profile.js
index 1df1e2652..b1bf9e4e0 100644
--- a/cypress/integration/common/profile.js
+++ b/cypress/integration/common/profile.js
@@ -1,36 +1,36 @@
-import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+import { When, Then } from "cypress-cucumber-preprocessor/steps";
 
 /* global cy */
 
-When('I visit my profile page', () => {
-  cy.openPage('profile/peter-pan')
-})
+When("I visit my profile page", () => {
+  cy.openPage("profile/peter-pan");
+});
 
-Then('I should be able to change my profile picture', () => {
-  const avatarUpload = 'onourjourney.png'
+Then("I should be able to change my profile picture", () => {
+  const avatarUpload = "onourjourney.png";
 
-  cy.fixture(avatarUpload, 'base64').then(fileContent => {
-    cy.get('#customdropzone').upload(
-      { fileContent, fileName: avatarUpload, mimeType: 'image/png' },
-      { subjectType: 'drag-n-drop' }
-    )
-  })
-  cy.get('.profile-avatar img')
-    .should('have.attr', 'src')
-    .and('contains', 'onourjourney')
-  cy.contains('.iziToast-message', 'Upload successful').should(
-    'have.length',
+  cy.fixture(avatarUpload, "base64").then(fileContent => {
+    cy.get("#customdropzone").upload(
+      { fileContent, fileName: avatarUpload, mimeType: "image/png" },
+      { subjectType: "drag-n-drop", force: true }
+    );
+  });
+  cy.get(".profile-avatar img")
+    .should("have.attr", "src")
+    .and("contains", "onourjourney");
+  cy.contains(".iziToast-message", "Upload successful").should(
+    "have.length",
     1
-  )
-})
+  );
+});
 
 When("I visit another user's profile page", () => {
-  cy.openPage('profile/peter-pan')
-})
+  cy.openPage("profile/peter-pan");
+});
 
-Then('I cannot upload a picture', () => {
-  cy.get('.ds-card-content')
+Then("I cannot upload a picture", () => {
+  cy.get(".ds-card-content")
     .children()
-    .should('not.have.id', 'customdropzone')
-    .should('have.class', 'ds-avatar')
-})
+    .should("not.have.id", "customdropzone")
+    .should("have.class", "ds-avatar");
+});

From c7959dadb709ab2c46cf5c1bce68e5dff10e5978 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Tue, 9 Jul 2019 13:00:08 -0300
Subject: [PATCH 09/39] Refactor code

- Remove vuex as we don't need with vue-apollo and watch
- Use chunk[i] instead of firstGroup, etc...
- Extract Category query to its own file
- Mobile responsive categories dropdown
---
 .../CategoriesSelect/CategoriesSelect.vue     | 10 +--
 webapp/components/FilterPosts/FilterPosts.vue | 68 +++++++------------
 webapp/graphql/CategoryQuery.js               | 11 +++
 webapp/layouts/default.vue                    | 29 +++-----
 webapp/package.json                           |  2 +-
 webapp/pages/index.vue                        | 12 +---
 webapp/store/categories.js                    | 42 ------------
 7 files changed, 53 insertions(+), 121 deletions(-)
 create mode 100644 webapp/graphql/CategoryQuery.js
 delete mode 100644 webapp/store/categories.js

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index 163f31419..94276a958 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import gql from 'graphql-tag'
+import CategoryQuery from '~/graphql/CategoryQuery.js'
 
 export default {
   props: {
@@ -85,13 +85,7 @@ export default {
   apollo: {
     Category: {
       query() {
-        return gql(`{
-          Category {
-            id
-            name
-            icon
-          }
-        }`)
+        return CategoryQuery()
       },
       result(result) {
         this.categories = result.data.Category
diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 2dfaa7bf4..526736d95 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -7,13 +7,16 @@
     <template slot="popover">
       <ds-container>
         <ds-space />
-        <ds-flex>
-          <ds-flex-item width="20%">
+        <ds-flex :groupedCategories="chunk">
+          <ds-flex-item
+            :width="{ base: '100%', sm: '100%', md: '100%', lg: '20%' }"
+            class="categories-list"
+          >
             <ds-space margin-bottom="x-small" />
-            <ds-flex>
+            <ds-flex id="filter-posts-header">
               <ds-heading tag="h4">{{ $t('filter-posts.header') }}</ds-heading>
               <ds-flex-item width="10%" />
-              <ds-flex-item width="100%" style="text-align:center;">
+              <ds-flex-item width="100%">
                 <ds-button
                   icon="check"
                   @click.stop.prevent="toggleCategory()"
@@ -26,8 +29,8 @@
               </ds-flex-item>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in firstGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[0]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -46,8 +49,8 @@
               </ds-flex>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in secondGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[1]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -66,8 +69,8 @@
               </ds-flex>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in thirdGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[2]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -86,8 +89,8 @@
               </ds-flex>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in fourthGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[3]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -106,8 +109,8 @@
               </ds-flex>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in fifthGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[4]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -126,8 +129,8 @@
               </ds-flex>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in sixthGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[5]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -146,8 +149,8 @@
               </ds-flex>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in seventhGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[6]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -166,8 +169,8 @@
               </ds-flex>
             </ds-flex>
           </ds-flex-item>
-          <ds-flex-item width="10%">
-            <ds-flex v-for="category in eigthGroup" :key="category.id" class="categories-list">
+          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+            <ds-flex v-for="category in chunk[7]" :key="category.id" class="categories-list">
               <ds-flex>
                 <ds-flex-item width="100%">
                   <ds-button
@@ -208,14 +211,6 @@ export default {
   data() {
     return {
       pageSize: 12,
-      firstGroup: [],
-      secondGroup: [],
-      thirdGroup: [],
-      fourthGroup: [],
-      fifthGroup: [],
-      sixthGroup: [],
-      seventhGroup: [],
-      eigthGroup: [],
       selectedCategoryIds: [],
       allCategories: true,
     }
@@ -234,24 +229,10 @@ export default {
       return groupedCategories
     },
   },
-  mounted() {
-    this.groupCategories()
-  },
   methods: {
     ...mapMutations({
       setPosts: 'posts/SET_POSTS',
     }),
-    groupCategories() {
-      const groupedCategories = this.chunk
-      this.firstGroup = groupedCategories[0]
-      this.secondGroup = groupedCategories[1]
-      this.thirdGroup = groupedCategories[2]
-      this.fourthGroup = groupedCategories[3]
-      this.fifthGroup = groupedCategories[4]
-      this.sixthGroup = groupedCategories[5]
-      this.seventhGroup = groupedCategories[6]
-      this.eigthGroup = groupedCategories[7]
-    },
     filterPosts(categoryIds) {
       const filter = categoryIds.length
         ? { categories_in: { id_in: this.selectedCategoryIds } }
@@ -292,6 +273,9 @@ export default {
 }
 </script>
 <style lang="scss">
+#filter-posts-header {
+  display: block;
+}
 .categories-list {
   text-align: center;
 }
diff --git a/webapp/graphql/CategoryQuery.js b/webapp/graphql/CategoryQuery.js
new file mode 100644
index 000000000..a11dcc8e1
--- /dev/null
+++ b/webapp/graphql/CategoryQuery.js
@@ -0,0 +1,11 @@
+import gql from 'graphql-tag'
+
+export default () => {
+  return gql(`{
+    Category {
+      id
+      name
+      icon
+    }
+  }`)
+}
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 82851cb8a..cf9a78a71 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -6,7 +6,7 @@
           <ds-flex class="main-navigation-flex">
             <ds-flex-item :width="{ lg: '5%' }" />
             <ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
-              <a @click="$router.push('/').go('/')">
+              <a @click="$router.go('/')">
                 <ds-logo />
               </a>
             </ds-flex-item>
@@ -37,7 +37,7 @@
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             >
               <no-ssr>
-                <filter-posts placement="bottom-end" offset="23" :categories="getCategories" />
+                <filter-posts placement="bottom-end" offset="23" :categories="categories" />
               </no-ssr>
             </ds-flex-item>
             <ds-flex-item
@@ -129,8 +129,7 @@
 </template>
 
 <script>
-import gql from 'graphql-tag'
-import { mapGetters, mapActions, mapMutations } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import SearchInput from '~/components/SearchInput.vue'
 import Modal from '~/components/Modal'
@@ -139,6 +138,7 @@ import Dropdown from '~/components/Dropdown'
 import HcAvatar from '~/components/Avatar/Avatar.vue'
 import seo from '~/mixins/seo'
 import FilterPosts from '~/components/FilterPosts/FilterPosts.vue'
+import CategoryQuery from '~/graphql/CategoryQuery.js'
 
 export default {
   components: {
@@ -155,6 +155,7 @@ export default {
     return {
       mobileSearchVisible: false,
       toggleMobileMenu: false,
+      categories: [],
     }
   },
   computed: {
@@ -165,7 +166,6 @@ export default {
       isAdmin: 'auth/isAdmin',
       quickSearchResults: 'search/quickResults',
       quickSearchPending: 'search/quickPending',
-      getCategories: 'categories/categories',
     }),
     userName() {
       const { name } = this.user || {}
@@ -204,14 +204,16 @@ export default {
       return routes
     },
   },
+  watch: {
+    Category(category) {
+      this.categories = category || []
+    },
+  },
   methods: {
     ...mapActions({
       quickSearchClear: 'search/quickClear',
       quickSearch: 'search/quickSearch',
     }),
-    ...mapMutations({
-      setCategories: 'categories/SET_CATEGORIES',
-    }),
     goToPost(item) {
       this.$nextTick(() => {
         this.$router.push({
@@ -240,16 +242,7 @@ export default {
   apollo: {
     Category: {
       query() {
-        return gql(`{
-          Category {
-            id
-            name
-            icon
-          }
-        }`)
-      },
-      result({ data: Category }) {
-        this.setCategories(Category)
+        return CategoryQuery()
       },
       fetchPolicy: 'cache-and-network',
     },
diff --git a/webapp/package.json b/webapp/package.json
index d69f7e20e..3fa5180c1 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -111,4 +111,4 @@
     "vue-jest": "~3.0.4",
     "vue-svg-loader": "~0.12.0"
   }
-}
\ No newline at end of file
+}
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index e39aca567..038a2802c 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -2,11 +2,7 @@
   <div>
     <ds-flex :width="{ base: '100%' }" gutter="base">
       <ds-flex-item>
-        <filter-menu
-          :user="currentUser"
-          @changeFilterBubble="changeFilterBubble"
-          :categories="categories"
-        />
+        <filter-menu :user="currentUser" @changeFilterBubble="changeFilterBubble" />
       </ds-flex-item>
       <hc-post-card
         v-for="(post, index) in posts"
@@ -35,7 +31,7 @@ import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import uniqBy from 'lodash/uniqBy'
 import HcPostCard from '~/components/PostCard'
 import HcLoadMore from '~/components/LoadMore.vue'
-import { mapGetters, mapActions, mapMutations } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import { filterPosts } from '~/graphql/PostQuery.js'
 
 export default {
@@ -60,7 +56,6 @@ export default {
   computed: {
     ...mapGetters({
       currentUser: 'auth/user',
-      categories: 'categories/categories',
       posts: 'posts/posts',
     }),
     tags() {
@@ -71,9 +66,6 @@ export default {
     },
   },
   methods: {
-    ...mapActions({
-      fetchCategories: 'categories/fetchCategories',
-    }),
     ...mapMutations({
       setPosts: 'posts/SET_POSTS',
     }),
diff --git a/webapp/store/categories.js b/webapp/store/categories.js
deleted file mode 100644
index 5fa67ed66..000000000
--- a/webapp/store/categories.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import gql from 'graphql-tag'
-
-export const state = () => {
-  return {
-    categories: null,
-    pending: false,
-  }
-}
-
-export const mutations = {
-  SET_CATEGORIES(state, categories) {
-    state.categories = categories || null
-  },
-  SET_PENDING(state, pending) {
-    state.pending = pending
-  },
-}
-
-export const getters = {
-  categories(state) {
-    return state.categories || []
-  },
-}
-
-export const actions = {
-  async fetchCategories({ commit }) {
-    const client = this.app.apolloProvider.defaultClient
-    const {
-      data: { Category },
-    } = await client.query({
-      query: gql(`{
-          Category {
-            id
-            name
-            icon
-          }
-      }`),
-    })
-    commit('SET_CATEGORIES', Category)
-    return Category
-  },
-}

From 0d4617399b9addc6206eb15bfee3537814751170 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Tue, 9 Jul 2019 18:29:31 -0300
Subject: [PATCH 10/39] Fix/add tests

---
 backend/src/schema/resolvers/posts.spec.js    |  27 ++---
 .../FilterPosts/FilterPosts.spec.js           | 114 ++++++++++++++++++
 webapp/components/FilterPosts/FilterPosts.vue |   4 +-
 3 files changed, 128 insertions(+), 17 deletions(-)
 create mode 100644 webapp/components/FilterPosts/FilterPosts.spec.js

diff --git a/backend/src/schema/resolvers/posts.spec.js b/backend/src/schema/resolvers/posts.spec.js
index 46a2912a8..233be450a 100644
--- a/backend/src/schema/resolvers/posts.spec.js
+++ b/backend/src/schema/resolvers/posts.spec.js
@@ -18,10 +18,11 @@ const createPostWithCategoriesMutation = `
   mutation($title: String!, $content: String!, $categoryIds: [ID]) {
     CreatePost(title: $title, content: $content, categoryIds: $categoryIds) {
       id
+      title
     }
   }
 `
-const creatPostWithCategoriesVariables = {
+const createPostWithCategoriesVariables = {
   title: postTitle,
   content: postContent,
   categoryIds: ['cat9', 'cat4', 'cat15'],
@@ -41,19 +42,19 @@ const createPostWithoutCategoriesVariables = {
   categoryIds: null,
 }
 const postQueryFilteredByCategory = `
-  query($name: String) {
-    Post(filter: { categories_some: { name: $name } }) {
+query Post($filter: _PostFilter) {
+  Post(filter: $filter) {
       title
       id
       categories {
-        name
+        id
       }
     }
   }
 `
-const postCategoriesFilterParam = 'Environment & Nature'
+const postCategoriesFilterParam = { categories_some: { id_in: ['cat4'] } }
 const postQueryFilteredByCategoryVariables = {
-  name: postCategoriesFilterParam,
+  filter: postCategoriesFilterParam,
 }
 beforeEach(async () => {
   userParams = {
@@ -174,7 +175,7 @@ describe('CreatePost', () => {
         ])
         postWithCategories = await client.request(
           createPostWithCategoriesMutation,
-          creatPostWithCategoriesVariables,
+          createPostWithCategoriesVariables,
         )
       })
 
@@ -183,6 +184,7 @@ describe('CreatePost', () => {
         const postQueryWithCategoriesVariables = {
           id: postWithCategories.CreatePost.id,
         }
+
         await expect(
           client.request(postQueryWithCategories, postQueryWithCategoriesVariables),
         ).resolves.toEqual({ Post: [{ categories: expect.arrayContaining(expected) }] })
@@ -190,21 +192,16 @@ describe('CreatePost', () => {
 
       it('allows a user to filter for posts by category', async () => {
         await client.request(createPostWithCategoriesMutation, createPostWithoutCategoriesVariables)
-        const categoryNames = [
-          { name: 'Democracy & Politics' },
-          { name: 'Environment & Nature' },
-          { name: 'Consumption & Sustainability' },
-        ]
+        const categoryIds = [{ id: 'cat4' }, { id: 'cat15' }, { id: 'cat9' }]
         const expected = {
           Post: [
             {
               title: postTitle,
               id: postWithCategories.CreatePost.id,
-              categories: expect.arrayContaining(categoryNames),
+              categories: expect.arrayContaining(categoryIds),
             },
           ],
         }
-
         await expect(
           client.request(postQueryFilteredByCategory, postQueryFilteredByCategoryVariables),
         ).resolves.toEqual(expected)
@@ -306,7 +303,7 @@ describe('UpdatePost', () => {
         ])
         postWithCategories = await client.request(
           createPostWithCategoriesMutation,
-          creatPostWithCategoriesVariables,
+          createPostWithCategoriesVariables,
         )
         updatePostVariables = {
           id: postWithCategories.CreatePost.id,
diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js
new file mode 100644
index 000000000..bbeeeee52
--- /dev/null
+++ b/webapp/components/FilterPosts/FilterPosts.spec.js
@@ -0,0 +1,114 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import FilterPosts from './FilterPosts.vue'
+import Styleguide from '@human-connection/styleguide'
+import VTooltip from 'v-tooltip'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+localVue.use(VTooltip)
+
+describe('FilterPosts.vue', () => {
+  let wrapper
+  let mocks
+  let propsData
+  let menuToggle
+  let allCategoriesButton
+  let environmentAndNatureButton
+  let consumptionAndSustainabiltyButton
+  let democracyAndPoliticsButton
+
+  beforeEach(() => {
+    mocks = {
+      $apollo: {
+        query: jest
+          .fn()
+          .mockResolvedValueOnce()
+          .mockRejectedValue({ message: 'We were unable to filter' }),
+      },
+      $t: jest.fn(),
+      $i18n: {
+        locale: () => 'en',
+      },
+      $toast: {
+        error: jest.fn(),
+      },
+    }
+    propsData = {
+      categories: [
+        { id: 'cat4', name: 'Environment & Nature', icon: 'tree' },
+        { id: 'cat15', name: 'Consumption & Sustainability', icon: 'shopping-cart' },
+        { id: 'cat9', name: 'Democracy & Politics', icon: 'university' },
+      ],
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(FilterPosts, { mocks, localVue, propsData })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+      menuToggle = wrapper.findAll('a').at(0)
+      menuToggle.trigger('click')
+    })
+
+    it('groups the categories by pair', () => {
+      expect(wrapper.vm.chunk).toEqual([
+        [
+          { id: 'cat4', name: 'Environment & Nature', icon: 'tree' },
+          { id: 'cat15', name: 'Consumption & Sustainability', icon: 'shopping-cart' },
+        ],
+        [{ id: 'cat9', name: 'Democracy & Politics', icon: 'university' }],
+      ])
+    })
+
+    it('starts with all categories button active', () => {
+      allCategoriesButton = wrapper.findAll('button').at(0)
+      expect(allCategoriesButton.attributes().class).toContain('ds-button-primary')
+    })
+
+    it('adds a categories id to selectedCategoryIds when clicked', () => {
+      environmentAndNatureButton = wrapper.findAll('button').at(1)
+      environmentAndNatureButton.trigger('click')
+      expect(wrapper.vm.selectedCategoryIds).toEqual(['cat4'])
+    })
+
+    it('sets primary to true when the button is clicked', () => {
+      democracyAndPoliticsButton = wrapper.findAll('button').at(3)
+      democracyAndPoliticsButton.trigger('click')
+      expect(democracyAndPoliticsButton.attributes().class).toContain('ds-button-primary')
+    })
+
+    it('queries a post by its categories', () => {
+      consumptionAndSustainabiltyButton = wrapper.findAll('button').at(2)
+      consumptionAndSustainabiltyButton.trigger('click')
+      expect(mocks.$apollo.query).toHaveBeenCalledWith(
+        expect.objectContaining({
+          variables: {
+            filter: { categories_some: { id_in: ['cat15'] } },
+            first: expect.any(Number),
+            offset: expect.any(Number),
+          },
+        }),
+      )
+    })
+
+    it('supports a query of multiple categories', () => {
+      environmentAndNatureButton = wrapper.findAll('button').at(1)
+      environmentAndNatureButton.trigger('click')
+      consumptionAndSustainabiltyButton = wrapper.findAll('button').at(2)
+      consumptionAndSustainabiltyButton.trigger('click')
+      expect(mocks.$apollo.query).toHaveBeenCalledWith(
+        expect.objectContaining({
+          variables: {
+            filter: { categories_some: { id_in: ['cat4', 'cat15'] } },
+            first: expect.any(Number),
+            offset: expect.any(Number),
+          },
+        }),
+      )
+    })
+  })
+})
diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 526736d95..01073b834 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -235,9 +235,9 @@ export default {
     }),
     filterPosts(categoryIds) {
       const filter = categoryIds.length
-        ? { categories_in: { id_in: this.selectedCategoryIds } }
+        ? { categories_some: { id_in: this.selectedCategoryIds } }
         : {}
-      filter.categories_in ? (this.allCategories = false) : (this.allCategories = true)
+      filter.categories_some ? (this.allCategories = false) : (this.allCategories = true)
       this.$apollo
         .query({
           query: filterPosts(this.$i18n),

From 1399da8b70dc3a9ecb367141f029e90eb9bd9bf9 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Tue, 9 Jul 2019 18:35:27 -0300
Subject: [PATCH 11/39] Add router callback, clear searches on logo click

---
 webapp/layouts/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index cf9a78a71..e0a5a8d5c 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -6,7 +6,7 @@
           <ds-flex class="main-navigation-flex">
             <ds-flex-item :width="{ lg: '5%' }" />
             <ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
-              <a @click="$router.go('/')">
+              <a @click="$router.push('/').then(() => $router.go())">
                 <ds-logo />
               </a>
             </ds-flex-item>

From 448f350c2ed5a134fcddbb13f4f105c799974359 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 10 Jul 2019 21:45:37 +0200
Subject: [PATCH 12/39] Implement paginating user view for admins

---
 backend/src/seed/seed-db.js  |  7 +++
 webapp/locales/de.json       |  9 +++-
 webapp/locales/en.json       |  9 +++-
 webapp/pages/admin.vue       |  7 ++-
 webapp/pages/admin/users.vue | 86 ++++++++++++++++++++++++++++++++++--
 5 files changed, 108 insertions(+), 10 deletions(-)

diff --git a/backend/src/seed/seed-db.js b/backend/src/seed/seed-db.js
index 18eefb76f..bd12549be 100644
--- a/backend/src/seed/seed-db.js
+++ b/backend/src/seed/seed-db.js
@@ -707,6 +707,13 @@ import Factory from './factories'
         to: 'o3',
       }),
     ])
+
+    await Promise.all(
+      [...Array(30).keys()].map(i => {
+        return f.create('User')
+      }),
+    )
+
     /* eslint-disable-next-line no-console */
     console.log('Seeded Data...')
     process.exit(0)
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index f5231ddf6..2f38e2be3 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -188,7 +188,14 @@
       "name": "Organisationen"
     },
     "users": {
-      "name": "Benutzer"
+      "name": "Benutzer",
+      "table": {
+        "columns": {
+          "name": "Name",
+          "slug": "Username",
+          "role": "Rolle"
+        }
+      }
     },
     "pages": {
       "name": "Seiten"
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 7fb596c9e..14872b3d4 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -189,7 +189,14 @@
       "name": "Organizations"
     },
     "users": {
-      "name": "Users"
+      "name": "Users",
+      "table": {
+        "columns": {
+          "name": "Name",
+          "slug": "Username",
+          "role": "Role"
+        }
+      }
     },
     "pages": {
       "name": "Pages"
diff --git a/webapp/pages/admin.vue b/webapp/pages/admin.vue
index c9e48ca65..4d498dc9b 100644
--- a/webapp/pages/admin.vue
+++ b/webapp/pages/admin.vue
@@ -24,11 +24,10 @@ export default {
           name: this.$t('admin.dashboard.name'),
           path: `/admin`,
         },
-        // TODO implement
-        /* {
+        {
           name: this.$t('admin.users.name'),
-          path: `/admin/users`
-        }, */
+          path: `/admin/users`,
+        },
         // TODO implement
         /* {
           name: this.$t('admin.organizations.name'),
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 90f6d598d..6632d39ca 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -1,15 +1,93 @@
 <template>
   <ds-card :header="$t('admin.users.name')">
-    <hc-empty icon="tasks" message="Coming Soon…" />
+    <ds-table v-if="User && User.length" :data="User" :fields="fields" condensed>
+      <template slot="name" slot-scope="scope">
+        <nuxt-link
+          :to="{
+            name: 'profile-id-slug',
+            params: { id: scope.row.id, slug: scope.row.slug },
+          }"
+        >
+          <b>{{ scope.row.name | truncate(50) }}</b>
+        </nuxt-link>
+      </template>
+    </ds-table>
+    <ds-flex direction="row-reverse">
+      <ds-flex-item width="50px">
+        <ds-button @click="next" :disabled="!hasNext" icon="arrow-right" primary />
+      </ds-flex-item>
+      <ds-flex-item width="50px">
+        <ds-button @click="back" :disabled="!hasPrevious" icon="arrow-left" primary />
+      </ds-flex-item>
+    </ds-flex>
   </ds-card>
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty.vue'
+import gql from 'graphql-tag'
 
 export default {
-  components: {
-    HcEmpty,
+  data() {
+    const pageSize = 15
+    return {
+      offset: 0,
+      pageSize,
+      first: pageSize,
+      User: [],
+    }
+  },
+  computed: {
+    hasNext() {
+      const { countUsers } = this.statistics
+      return this.offset < countUsers - this.pageSize
+    },
+    hasPrevious() {
+      return this.offset > 0
+    },
+    fields() {
+      return {
+        id: 'ID',
+        name: this.$t('admin.users.table.columns.name'),
+        slug: this.$t('admin.users.table.columns.slug'),
+        role: this.$t('admin.users.table.columns.role'),
+      }
+    },
+  },
+  apollo: {
+    statistics: {
+      query() {
+        return gql('query { statistics { countUsers } }')
+      },
+    },
+    User: {
+      query() {
+        return gql(`
+        query($filter: _UserFilter, $first: Int, $offset: Int) {
+          User(filter: $filter, first: $first, offset: $offset, orderBy: createdAt_desc) {
+            id
+            name
+            slug
+            role
+          }
+        }
+      `)
+      },
+      variables() {
+        const { offset, first } = this
+        return { first, offset }
+      },
+    },
+  },
+  methods: {
+    back() {
+      this.offset -= this.pageSize
+      this.offset = Math.max(this.offset, 0)
+    },
+    next() {
+      this.offset += this.pageSize
+      const { countUsers } = this.statistics
+      this.offset = Math.min(this.offset, countUsers - this.pageSize)
+    },
   },
 }
 </script>

From 095a5e7c679d0a493d6986e2c738c8e68ab3bee5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 10 Jul 2019 21:49:15 +0200
Subject: [PATCH 13/39] Id is not so important, it's in the profile URL

---
 webapp/pages/admin/users.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 6632d39ca..3ecb5edf9 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -46,7 +46,6 @@ export default {
     },
     fields() {
       return {
-        id: 'ID',
         name: this.$t('admin.users.table.columns.name'),
         slug: this.$t('admin.users.table.columns.slug'),
         role: this.$t('admin.users.table.columns.role'),

From 6536574a3b01b4223fd823bb781610d44973a076 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Wed, 10 Jul 2019 17:10:01 -0300
Subject: [PATCH 14/39] Refactor FilterPosts

- extract FilterPostsMenuItems to its own component
- update tests accordingly
- add _.chunk from lodash to dry out code
---
 .../FilterPosts/FilterPosts.spec.js           |  30 ++-
 webapp/components/FilterPosts/FilterPosts.vue | 225 +-----------------
 .../FilterPosts/FilterPostsMenuItems.vue      | 221 +++++++++++++++++
 3 files changed, 252 insertions(+), 224 deletions(-)
 create mode 100644 webapp/components/FilterPosts/FilterPostsMenuItems.vue

diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js
index bbeeeee52..366ac2661 100644
--- a/webapp/components/FilterPosts/FilterPosts.spec.js
+++ b/webapp/components/FilterPosts/FilterPosts.spec.js
@@ -1,12 +1,16 @@
 import { mount, createLocalVue } from '@vue/test-utils'
-import FilterPosts from './FilterPosts.vue'
-import Styleguide from '@human-connection/styleguide'
 import VTooltip from 'v-tooltip'
+import Styleguide from '@human-connection/styleguide'
+import Vuex from 'vuex'
+import FilterPosts from './FilterPosts.vue'
+import FilterPostsMenuItem from './FilterPostsMenuItems.vue'
+import { mutations } from '~/store/posts'
 
 const localVue = createLocalVue()
 
 localVue.use(Styleguide)
 localVue.use(VTooltip)
+localVue.use(Vuex)
 
 describe('FilterPosts.vue', () => {
   let wrapper
@@ -23,7 +27,9 @@ describe('FilterPosts.vue', () => {
       $apollo: {
         query: jest
           .fn()
-          .mockResolvedValueOnce()
+          .mockResolvedValueOnce({
+            data: { Post: { title: 'Post with Category', category: [{ id: 'cat4' }] } },
+          })
           .mockRejectedValue({ message: 'We were unable to filter' }),
       },
       $t: jest.fn(),
@@ -44,8 +50,13 @@ describe('FilterPosts.vue', () => {
   })
 
   describe('mount', () => {
+    const store = new Vuex.Store({
+      mutations: {
+        'posts/SET_POSTS': mutations.SET_POSTS,
+      },
+    })
     const Wrapper = () => {
-      return mount(FilterPosts, { mocks, localVue, propsData })
+      return mount(FilterPosts, { mocks, localVue, propsData, store })
     }
 
     beforeEach(() => {
@@ -72,7 +83,8 @@ describe('FilterPosts.vue', () => {
     it('adds a categories id to selectedCategoryIds when clicked', () => {
       environmentAndNatureButton = wrapper.findAll('button').at(1)
       environmentAndNatureButton.trigger('click')
-      expect(wrapper.vm.selectedCategoryIds).toEqual(['cat4'])
+      const filterPostsMenuItem = wrapper.find(FilterPostsMenuItem)
+      expect(filterPostsMenuItem.vm.selectedCategoryIds).toEqual(['cat4'])
     })
 
     it('sets primary to true when the button is clicked', () => {
@@ -110,5 +122,13 @@ describe('FilterPosts.vue', () => {
         }),
       )
     })
+
+    it('toggles the categoryIds when clicked more than once', () => {
+      environmentAndNatureButton = wrapper.findAll('button').at(1)
+      environmentAndNatureButton.trigger('click')
+      environmentAndNatureButton.trigger('click')
+      const filterPostsMenuItem = wrapper.find(FilterPostsMenuItem)
+      expect(filterPostsMenuItem.vm.selectedCategoryIds).toEqual([])
+    })
   })
 })
diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 01073b834..95ed3b8f5 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -5,203 +5,21 @@
       <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
     </a>
     <template slot="popover">
-      <ds-container>
-        <ds-space />
-        <ds-flex :groupedCategories="chunk">
-          <ds-flex-item
-            :width="{ base: '100%', sm: '100%', md: '100%', lg: '20%' }"
-            class="categories-list"
-          >
-            <ds-space margin-bottom="x-small" />
-            <ds-flex id="filter-posts-header">
-              <ds-heading tag="h4">{{ $t('filter-posts.header') }}</ds-heading>
-              <ds-flex-item width="10%" />
-              <ds-flex-item width="100%">
-                <ds-button
-                  icon="check"
-                  @click.stop.prevent="toggleCategory()"
-                  :primary="allCategories"
-                />
-                <ds-flex-item>
-                  <label>{{ $t('filter-posts.all') }}</label>
-                </ds-flex-item>
-                <ds-space />
-              </ds-flex-item>
-            </ds-flex>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-            <ds-flex v-for="category in chunk[0]" :key="category.id" class="categories-list">
-              <ds-flex>
-                <ds-flex-item width="100%">
-                  <ds-button
-                    :icon="category.icon"
-                    :primary="isActive(category.id)"
-                    @click.stop.prevent="toggleCategory(category.id)"
-                  />
-                  <ds-space margin-bottom="small" />
-                </ds-flex-item>
-                <ds-flex>
-                  <ds-flex-item>
-                    <label>{{ category.name }}</label>
-                  </ds-flex-item>
-                  <ds-space margin-bottom="xx-large" />
-                </ds-flex>
-              </ds-flex>
-            </ds-flex>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-            <ds-flex v-for="category in chunk[1]" :key="category.id" class="categories-list">
-              <ds-flex>
-                <ds-flex-item width="100%">
-                  <ds-button
-                    :icon="category.icon"
-                    :primary="isActive(category.id)"
-                    @click.stop.prevent="toggleCategory(category.id)"
-                  />
-                  <ds-space margin-bottom="small" />
-                </ds-flex-item>
-                <ds-flex class="categories-list">
-                  <ds-flex-item>
-                    <label>{{ category.name }}</label>
-                  </ds-flex-item>
-                  <ds-space margin-bottom="xx-large" />
-                </ds-flex>
-              </ds-flex>
-            </ds-flex>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-            <ds-flex v-for="category in chunk[2]" :key="category.id" class="categories-list">
-              <ds-flex>
-                <ds-flex-item width="100%">
-                  <ds-button
-                    :icon="category.icon"
-                    :primary="isActive(category.id)"
-                    @click.stop.prevent="toggleCategory(category.id)"
-                  />
-                  <ds-space margin-bottom="small" />
-                </ds-flex-item>
-                <ds-flex>
-                  <ds-flex-item>
-                    <label>{{ category.name }}</label>
-                  </ds-flex-item>
-                  <ds-space margin-bottom="xx-large" />
-                </ds-flex>
-              </ds-flex>
-            </ds-flex>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-            <ds-flex v-for="category in chunk[3]" :key="category.id" class="categories-list">
-              <ds-flex>
-                <ds-flex-item width="100%">
-                  <ds-button
-                    :icon="category.icon"
-                    :primary="isActive(category.id)"
-                    @click.stop.prevent="toggleCategory(category.id)"
-                  />
-                  <ds-space margin-bottom="small" />
-                </ds-flex-item>
-                <ds-flex>
-                  <ds-flex-item>
-                    <label>{{ category.name }}</label>
-                  </ds-flex-item>
-                  <ds-space margin-bottom="xx-large" />
-                </ds-flex>
-              </ds-flex>
-            </ds-flex>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-            <ds-flex v-for="category in chunk[4]" :key="category.id" class="categories-list">
-              <ds-flex>
-                <ds-flex-item width="100%">
-                  <ds-button
-                    :icon="category.icon"
-                    :primary="isActive(category.id)"
-                    @click.stop.prevent="toggleCategory(category.id)"
-                  />
-                  <ds-space margin-bottom="small" />
-                </ds-flex-item>
-                <ds-flex>
-                  <ds-flex-item>
-                    <label>{{ category.name }}</label>
-                  </ds-flex-item>
-                  <ds-space margin-bottom="xx-large" />
-                </ds-flex>
-              </ds-flex>
-            </ds-flex>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-            <ds-flex v-for="category in chunk[5]" :key="category.id" class="categories-list">
-              <ds-flex>
-                <ds-flex-item width="100%">
-                  <ds-button
-                    :icon="category.icon"
-                    :primary="isActive(category.id)"
-                    @click.stop.prevent="toggleCategory(category.id)"
-                  />
-                  <ds-space margin-bottom="small" />
-                </ds-flex-item>
-                <ds-flex>
-                  <ds-flex-item>
-                    <label>{{ category.name }}</label>
-                  </ds-flex-item>
-                  <ds-space margin-bottom="xx-large" />
-                </ds-flex>
-              </ds-flex>
-            </ds-flex>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-            <ds-flex v-for="category in chunk[6]" :key="category.id" class="categories-list">
-              <ds-flex>
-                <ds-flex-item width="100%">
-                  <ds-button
-                    :icon="category.icon"
-                    :primary="isActive(category.id)"
-                    @click.stop.prevent="toggleCategory(category.id)"
-                  />
-                  <ds-space margin-bottom="small" />
-                </ds-flex-item>
-                <ds-flex>
-                  <ds-flex-item>
-                    <label>{{ category.name }}</label>
-                  </ds-flex-item>
-                  <ds-space margin-bottom="xx-large" />
-                </ds-flex>
-              </ds-flex>
-            </ds-flex>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-            <ds-flex v-for="category in chunk[7]" :key="category.id" class="categories-list">
-              <ds-flex>
-                <ds-flex-item width="100%">
-                  <ds-button
-                    :icon="category.icon"
-                    :primary="isActive(category.id)"
-                    @click.stop.prevent="toggleCategory(category.id)"
-                  />
-                  <ds-space margin-bottom="small" />
-                </ds-flex-item>
-                <ds-flex>
-                  <ds-flex-item>
-                    <label>{{ category.name }}</label>
-                  </ds-flex-item>
-                  <ds-space margin-bottom="xx-large" />
-                </ds-flex>
-              </ds-flex>
-            </ds-flex>
-          </ds-flex-item>
-        </ds-flex>
-      </ds-container>
+      <filter-posts-menu-items :chunk="chunk" @filterPosts="filterPosts" />
     </template>
   </dropdown>
 </template>
 <script>
+import _ from 'lodash'
 import Dropdown from '~/components/Dropdown'
 import { filterPosts } from '~/graphql/PostQuery.js'
 import { mapMutations } from 'vuex'
+import FilterPostsMenuItems from '~/components/FilterPosts/FilterPostsMenuItems'
 
 export default {
   components: {
     Dropdown,
+    FilterPostsMenuItems,
   },
   props: {
     placement: { type: String, default: 'bottom-start' },
@@ -211,22 +29,11 @@ export default {
   data() {
     return {
       pageSize: 12,
-      selectedCategoryIds: [],
-      allCategories: true,
     }
   },
   computed: {
     chunk() {
-      const groupedCategories = []
-      for (let i = 0; i < this.categories.length; i++) {
-        const last = groupedCategories[groupedCategories.length - 1]
-        if (!last || last.length === 2) {
-          groupedCategories.push([this.categories[i]])
-        } else {
-          last.push(this.categories[i])
-        }
-      }
-      return groupedCategories
+      return _.chunk(this.categories, 2)
     },
   },
   methods: {
@@ -234,10 +41,7 @@ export default {
       setPosts: 'posts/SET_POSTS',
     }),
     filterPosts(categoryIds) {
-      const filter = categoryIds.length
-        ? { categories_some: { id_in: this.selectedCategoryIds } }
-        : {}
-      filter.categories_some ? (this.allCategories = false) : (this.allCategories = true)
+      const filter = categoryIds.length ? { categories_some: { id_in: categoryIds } } : {}
       this.$apollo
         .query({
           query: filterPosts(this.$i18n),
@@ -252,23 +56,6 @@ export default {
         })
         .catch(error => this.$toast.error(error.message))
     },
-    isActive(id) {
-      const index = this.selectedCategoryIds.indexOf(id)
-      if (index > -1) {
-        return true
-      }
-      return false
-    },
-    toggleCategory(id) {
-      const index = this.selectedCategoryIds.indexOf(id)
-      if (index > -1) {
-        this.selectedCategoryIds.splice(index, 1)
-      } else {
-        this.selectedCategoryIds.push(id)
-      }
-      if (!id) this.selectedCategoryIds = []
-      this.filterPosts(this.selectedCategoryIds)
-    },
   },
 }
 </script>
diff --git a/webapp/components/FilterPosts/FilterPostsMenuItems.vue b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
new file mode 100644
index 000000000..10a3f98fa
--- /dev/null
+++ b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
@@ -0,0 +1,221 @@
+<template>
+  <ds-container>
+    <ds-space />
+    <ds-flex>
+      <ds-flex-item
+        :width="{ base: '100%', sm: '100%', md: '100%', lg: '20%' }"
+        class="categories-list"
+      >
+        <ds-space margin-bottom="x-small" />
+        <ds-flex id="filter-posts-header">
+          <ds-heading tag="h4">{{ $t('filter-posts.header') }}</ds-heading>
+          <ds-flex-item width="10%" />
+          <ds-flex-item width="100%">
+            <ds-button
+              icon="check"
+              @click.stop.prevent="toggleCategory()"
+              :primary="allCategories"
+            />
+            <ds-flex-item>
+              <label>{{ $t('filter-posts.all') }}</label>
+            </ds-flex-item>
+            <ds-space />
+          </ds-flex-item>
+        </ds-flex>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+        <ds-flex v-for="category in chunk[0]" :key="category.id" class="categories-list">
+          <ds-flex>
+            <ds-flex-item width="100%">
+              <ds-button
+                :icon="category.icon"
+                :primary="isActive(category.id)"
+                @click.stop.prevent="toggleCategory(category.id)"
+              />
+              <ds-space margin-bottom="small" />
+            </ds-flex-item>
+            <ds-flex>
+              <ds-flex-item>
+                <label>{{ category.name }}</label>
+              </ds-flex-item>
+              <ds-space margin-bottom="xx-large" />
+            </ds-flex>
+          </ds-flex>
+        </ds-flex>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+        <ds-flex v-for="category in chunk[1]" :key="category.id" class="categories-list">
+          <ds-flex>
+            <ds-flex-item width="100%">
+              <ds-button
+                :icon="category.icon"
+                :primary="isActive(category.id)"
+                @click.stop.prevent="toggleCategory(category.id)"
+              />
+              <ds-space margin-bottom="small" />
+            </ds-flex-item>
+            <ds-flex class="categories-list">
+              <ds-flex-item>
+                <label>{{ category.name }}</label>
+              </ds-flex-item>
+              <ds-space margin-bottom="xx-large" />
+            </ds-flex>
+          </ds-flex>
+        </ds-flex>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+        <ds-flex v-for="category in chunk[2]" :key="category.id" class="categories-list">
+          <ds-flex>
+            <ds-flex-item width="100%">
+              <ds-button
+                :icon="category.icon"
+                :primary="isActive(category.id)"
+                @click.stop.prevent="toggleCategory(category.id)"
+              />
+              <ds-space margin-bottom="small" />
+            </ds-flex-item>
+            <ds-flex>
+              <ds-flex-item>
+                <label>{{ category.name }}</label>
+              </ds-flex-item>
+              <ds-space margin-bottom="xx-large" />
+            </ds-flex>
+          </ds-flex>
+        </ds-flex>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+        <ds-flex v-for="category in chunk[3]" :key="category.id" class="categories-list">
+          <ds-flex>
+            <ds-flex-item width="100%">
+              <ds-button
+                :icon="category.icon"
+                :primary="isActive(category.id)"
+                @click.stop.prevent="toggleCategory(category.id)"
+              />
+              <ds-space margin-bottom="small" />
+            </ds-flex-item>
+            <ds-flex>
+              <ds-flex-item>
+                <label>{{ category.name }}</label>
+              </ds-flex-item>
+              <ds-space margin-bottom="xx-large" />
+            </ds-flex>
+          </ds-flex>
+        </ds-flex>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+        <ds-flex v-for="category in chunk[4]" :key="category.id" class="categories-list">
+          <ds-flex>
+            <ds-flex-item width="100%">
+              <ds-button
+                :icon="category.icon"
+                :primary="isActive(category.id)"
+                @click.stop.prevent="toggleCategory(category.id)"
+              />
+              <ds-space margin-bottom="small" />
+            </ds-flex-item>
+            <ds-flex>
+              <ds-flex-item>
+                <label>{{ category.name }}</label>
+              </ds-flex-item>
+              <ds-space margin-bottom="xx-large" />
+            </ds-flex>
+          </ds-flex>
+        </ds-flex>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+        <ds-flex v-for="category in chunk[5]" :key="category.id" class="categories-list">
+          <ds-flex>
+            <ds-flex-item width="100%">
+              <ds-button
+                :icon="category.icon"
+                :primary="isActive(category.id)"
+                @click.stop.prevent="toggleCategory(category.id)"
+              />
+              <ds-space margin-bottom="small" />
+            </ds-flex-item>
+            <ds-flex>
+              <ds-flex-item>
+                <label>{{ category.name }}</label>
+              </ds-flex-item>
+              <ds-space margin-bottom="xx-large" />
+            </ds-flex>
+          </ds-flex>
+        </ds-flex>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+        <ds-flex v-for="category in chunk[6]" :key="category.id" class="categories-list">
+          <ds-flex>
+            <ds-flex-item width="100%">
+              <ds-button
+                :icon="category.icon"
+                :primary="isActive(category.id)"
+                @click.stop.prevent="toggleCategory(category.id)"
+              />
+              <ds-space margin-bottom="small" />
+            </ds-flex-item>
+            <ds-flex>
+              <ds-flex-item>
+                <label>{{ category.name }}</label>
+              </ds-flex-item>
+              <ds-space margin-bottom="xx-large" />
+            </ds-flex>
+          </ds-flex>
+        </ds-flex>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
+        <ds-flex v-for="category in chunk[7]" :key="category.id" class="categories-list">
+          <ds-flex>
+            <ds-flex-item width="100%">
+              <ds-button
+                :icon="category.icon"
+                :primary="isActive(category.id)"
+                @click.stop.prevent="toggleCategory(category.id)"
+              />
+              <ds-space margin-bottom="small" />
+            </ds-flex-item>
+            <ds-flex>
+              <ds-flex-item>
+                <label>{{ category.name }}</label>
+              </ds-flex-item>
+              <ds-space margin-bottom="xx-large" />
+            </ds-flex>
+          </ds-flex>
+        </ds-flex>
+      </ds-flex-item>
+    </ds-flex>
+  </ds-container>
+</template>
+<script>
+export default {
+  props: {
+    chunk: { type: Array, default: () => [] },
+  },
+  data() {
+    return {
+      selectedCategoryIds: [],
+      allCategories: true,
+    }
+  },
+  methods: {
+    isActive(id) {
+      const index = this.selectedCategoryIds.indexOf(id)
+      if (index > -1) {
+        return true
+      }
+      return false
+    },
+    toggleCategory(id) {
+      const index = this.selectedCategoryIds.indexOf(id)
+      if (index > -1) {
+        this.selectedCategoryIds.splice(index, 1)
+      } else {
+        this.selectedCategoryIds.push(id)
+      }
+      if (!id) this.selectedCategoryIds = []
+      this.selectedCategoryIds.length ? (this.allCategories = false) : (this.allCategories = true)
+      this.$emit('filterPosts', this.selectedCategoryIds)
+    },
+  },
+}
+</script>

From 79930dcdc422d2db416e82deb7e36264851f5d18 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Wed, 10 Jul 2019 18:44:07 -0300
Subject: [PATCH 15/39] Refetch posts when a user clicks on the HC logo

---
 webapp/layouts/default.vue |  7 ++++-
 webapp/store/posts.js      | 60 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 4bc35d03b..a52f2c1d6 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -6,7 +6,7 @@
           <ds-flex class="main-navigation-flex">
             <ds-flex-item :width="{ lg: '5%' }" />
             <ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
-              <a @click="$router.push('/').then(() => $router.go())">
+              <a @click="redirectToRoot">
                 <ds-logo />
               </a>
             </ds-flex-item>
@@ -222,6 +222,7 @@ export default {
     ...mapActions({
       quickSearchClear: 'search/quickClear',
       quickSearch: 'search/quickSearch',
+      fetchPosts: 'posts/fetchPosts',
     }),
     goToPost(item) {
       this.$nextTick(() => {
@@ -247,6 +248,10 @@ export default {
     toggleMobileMenuView() {
       this.toggleMobileMenu = !this.toggleMobileMenu
     },
+    redirectToRoot() {
+      this.$router.replace('/')
+      this.fetchPosts({ i18n: this.$i18n, filter: {} })
+    },
   },
   apollo: {
     Category: {
diff --git a/webapp/store/posts.js b/webapp/store/posts.js
index cecc2a58e..7112a8add 100644
--- a/webapp/store/posts.js
+++ b/webapp/store/posts.js
@@ -1,3 +1,5 @@
+import gql from 'graphql-tag'
+
 export const state = () => {
   return {
     posts: [],
@@ -15,3 +17,61 @@ export const getters = {
     return state.posts || []
   },
 }
+
+export const actions = {
+  async fetchPosts({ commit, dispatch }, { i18n, filter }) {
+    const client = this.app.apolloProvider.defaultClient
+    const {
+      data: { Post },
+    } = await client.query({
+      query: gql(`
+        query Post($filter: _PostFilter, $first: Int, $offset: Int) {
+          Post(filter: $filter, first: $first, offset: $offset) {
+            id
+            title
+            contentExcerpt
+            createdAt
+            disabled
+            deleted
+            slug
+            image
+            author {
+              id
+              avatar
+              slug
+              name
+              disabled
+              deleted
+              contributionsCount
+              shoutedCount
+              commentsCount
+              followedByCount
+              followedByCurrentUser
+              location {
+                name: name${i18n.locale().toUpperCase()}
+              }
+              badges {
+                id
+                key
+                icon
+              }
+            }
+            commentsCount
+            categories {
+              id
+              name
+              icon
+            }
+            shoutedCount
+          }
+      }`),
+      variables: {
+        filter,
+        first: 12,
+        offset: 0,
+      },
+    })
+    commit('SET_POSTS', Post)
+    return Post
+  },
+}

From 2e97af074c2f4f91db27c4e680a789b36d6ee3d8 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Thu, 11 Jul 2019 07:08:17 -0300
Subject: [PATCH 16/39] Remove duplicate code

- was silly for writing so much duplicate code to change the index of the array
- woke up with inspiration
---
 .../FilterPosts/FilterPostsMenuItems.vue      | 151 +-----------------
 1 file changed, 8 insertions(+), 143 deletions(-)

diff --git a/webapp/components/FilterPosts/FilterPostsMenuItems.vue b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
index 10a3f98fa..c8d0d37cf 100644
--- a/webapp/components/FilterPosts/FilterPostsMenuItems.vue
+++ b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
@@ -3,7 +3,7 @@
     <ds-space />
     <ds-flex>
       <ds-flex-item
-        :width="{ base: '100%', sm: '100%', md: '100%', lg: '20%' }"
+        :width="{ base: '100%', sm: '100%', md: '100%', lg: '13%' }"
         class="categories-list"
       >
         <ds-space margin-bottom="x-small" />
@@ -23,148 +23,13 @@
           </ds-flex-item>
         </ds-flex>
       </ds-flex-item>
-      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-        <ds-flex v-for="category in chunk[0]" :key="category.id" class="categories-list">
-          <ds-flex>
-            <ds-flex-item width="100%">
-              <ds-button
-                :icon="category.icon"
-                :primary="isActive(category.id)"
-                @click.stop.prevent="toggleCategory(category.id)"
-              />
-              <ds-space margin-bottom="small" />
-            </ds-flex-item>
-            <ds-flex>
-              <ds-flex-item>
-                <label>{{ category.name }}</label>
-              </ds-flex-item>
-              <ds-space margin-bottom="xx-large" />
-            </ds-flex>
-          </ds-flex>
-        </ds-flex>
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-        <ds-flex v-for="category in chunk[1]" :key="category.id" class="categories-list">
-          <ds-flex>
-            <ds-flex-item width="100%">
-              <ds-button
-                :icon="category.icon"
-                :primary="isActive(category.id)"
-                @click.stop.prevent="toggleCategory(category.id)"
-              />
-              <ds-space margin-bottom="small" />
-            </ds-flex-item>
-            <ds-flex class="categories-list">
-              <ds-flex-item>
-                <label>{{ category.name }}</label>
-              </ds-flex-item>
-              <ds-space margin-bottom="xx-large" />
-            </ds-flex>
-          </ds-flex>
-        </ds-flex>
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-        <ds-flex v-for="category in chunk[2]" :key="category.id" class="categories-list">
-          <ds-flex>
-            <ds-flex-item width="100%">
-              <ds-button
-                :icon="category.icon"
-                :primary="isActive(category.id)"
-                @click.stop.prevent="toggleCategory(category.id)"
-              />
-              <ds-space margin-bottom="small" />
-            </ds-flex-item>
-            <ds-flex>
-              <ds-flex-item>
-                <label>{{ category.name }}</label>
-              </ds-flex-item>
-              <ds-space margin-bottom="xx-large" />
-            </ds-flex>
-          </ds-flex>
-        </ds-flex>
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-        <ds-flex v-for="category in chunk[3]" :key="category.id" class="categories-list">
-          <ds-flex>
-            <ds-flex-item width="100%">
-              <ds-button
-                :icon="category.icon"
-                :primary="isActive(category.id)"
-                @click.stop.prevent="toggleCategory(category.id)"
-              />
-              <ds-space margin-bottom="small" />
-            </ds-flex-item>
-            <ds-flex>
-              <ds-flex-item>
-                <label>{{ category.name }}</label>
-              </ds-flex-item>
-              <ds-space margin-bottom="xx-large" />
-            </ds-flex>
-          </ds-flex>
-        </ds-flex>
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-        <ds-flex v-for="category in chunk[4]" :key="category.id" class="categories-list">
-          <ds-flex>
-            <ds-flex-item width="100%">
-              <ds-button
-                :icon="category.icon"
-                :primary="isActive(category.id)"
-                @click.stop.prevent="toggleCategory(category.id)"
-              />
-              <ds-space margin-bottom="small" />
-            </ds-flex-item>
-            <ds-flex>
-              <ds-flex-item>
-                <label>{{ category.name }}</label>
-              </ds-flex-item>
-              <ds-space margin-bottom="xx-large" />
-            </ds-flex>
-          </ds-flex>
-        </ds-flex>
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-        <ds-flex v-for="category in chunk[5]" :key="category.id" class="categories-list">
-          <ds-flex>
-            <ds-flex-item width="100%">
-              <ds-button
-                :icon="category.icon"
-                :primary="isActive(category.id)"
-                @click.stop.prevent="toggleCategory(category.id)"
-              />
-              <ds-space margin-bottom="small" />
-            </ds-flex-item>
-            <ds-flex>
-              <ds-flex-item>
-                <label>{{ category.name }}</label>
-              </ds-flex-item>
-              <ds-space margin-bottom="xx-large" />
-            </ds-flex>
-          </ds-flex>
-        </ds-flex>
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-        <ds-flex v-for="category in chunk[6]" :key="category.id" class="categories-list">
-          <ds-flex>
-            <ds-flex-item width="100%">
-              <ds-button
-                :icon="category.icon"
-                :primary="isActive(category.id)"
-                @click.stop.prevent="toggleCategory(category.id)"
-              />
-              <ds-space margin-bottom="small" />
-            </ds-flex-item>
-            <ds-flex>
-              <ds-flex-item>
-                <label>{{ category.name }}</label>
-              </ds-flex-item>
-              <ds-space margin-bottom="xx-large" />
-            </ds-flex>
-          </ds-flex>
-        </ds-flex>
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
-        <ds-flex v-for="category in chunk[7]" :key="category.id" class="categories-list">
+      <ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '7%' }" />
+      <ds-flex-item
+        :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }"
+        v-for="index in chunk.length"
+        :key="index"
+      >
+        <ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-list">
           <ds-flex>
             <ds-flex-item width="100%">
               <ds-button

From 8b1d92ee7e84d313cbcbc03e2147d79eb647f528 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 00:43:17 +0200
Subject: [PATCH 17/39] Implement pagination without a total count

This is necessary, because once we filter the collection, the
`countUsers` is not valid anymore.
---
 webapp/pages/admin/users.vue | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 3ecb5edf9..de910dd34 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -1,6 +1,9 @@
 <template>
   <ds-card :header="$t('admin.users.name')">
     <ds-table v-if="User && User.length" :data="User" :fields="fields" condensed>
+      <template slot="index" slot-scope="scope">
+        {{ scope.row.index }}.
+      </template>
       <template slot="name" slot-scope="scope">
         <nuxt-link
           :to="{
@@ -34,18 +37,16 @@ export default {
       pageSize,
       first: pageSize,
       User: [],
+      hasNext: false,
     }
   },
   computed: {
-    hasNext() {
-      const { countUsers } = this.statistics
-      return this.offset < countUsers - this.pageSize
-    },
     hasPrevious() {
       return this.offset > 0
     },
     fields() {
       return {
+        index: '#',
         name: this.$t('admin.users.table.columns.name'),
         slug: this.$t('admin.users.table.columns.slug'),
         role: this.$t('admin.users.table.columns.role'),
@@ -53,11 +54,6 @@ export default {
     },
   },
   apollo: {
-    statistics: {
-      query() {
-        return gql('query { statistics { countUsers } }')
-      },
-    },
     User: {
       query() {
         return gql(`
@@ -75,17 +71,19 @@ export default {
         const { offset, first } = this
         return { first, offset }
       },
+      update({ User }) {
+        this.hasNext = User && User.length >= this.pageSize
+        if (User.length <= 0) return this.User // edge case, avoid a blank page
+        return User.map((u, i) => Object.assign({}, u, { index: this.offset + i }))
+      },
     },
   },
   methods: {
     back() {
-      this.offset -= this.pageSize
-      this.offset = Math.max(this.offset, 0)
+      this.offset = Math.max(this.offset - this.pageSize, 0)
     },
     next() {
       this.offset += this.pageSize
-      const { countUsers } = this.statistics
-      this.offset = Math.min(this.offset, countUsers - this.pageSize)
     },
   },
 }

From 08a5a70fd035cb885af44b8e71949f51969b5836 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 01:24:09 +0200
Subject: [PATCH 18/39] Fine tuning of admin users page

---
 webapp/locales/de.json       |  2 +-
 webapp/locales/en.json       |  2 +-
 webapp/pages/admin/users.vue | 39 +++++++++++++++++++++++++++++++-----
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 2f38e2be3..d0cbf13ac 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -192,7 +192,7 @@
       "table": {
         "columns": {
           "name": "Name",
-          "slug": "Username",
+          "slug": "Slug",
           "role": "Rolle"
         }
       }
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 14872b3d4..c7262795d 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -193,7 +193,7 @@
       "table": {
         "columns": {
           "name": "Name",
-          "slug": "Username",
+          "slug": "Slug",
           "role": "Role"
         }
       }
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index de910dd34..8fa0dfe24 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -11,16 +11,26 @@
             params: { id: scope.row.id, slug: scope.row.slug },
           }"
         >
-          <b>{{ scope.row.name | truncate(50) }}</b>
+          <b>{{ scope.row.name | truncate(20) }}</b>
+        </nuxt-link>
+      </template>
+      <template slot="slug" slot-scope="scope">
+        <nuxt-link
+          :to="{
+            name: 'profile-id-slug',
+            params: { id: scope.row.id, slug: scope.row.slug },
+          }"
+        >
+          <b>{{ scope.row.slug | truncate(20) }}</b>
         </nuxt-link>
       </template>
     </ds-table>
     <ds-flex direction="row-reverse">
       <ds-flex-item width="50px">
-        <ds-button @click="next" :disabled="!hasNext" icon="arrow-right" primary />
+        <ds-button @click="next" :loading="$apollo.loading" :disabled="!hasNext" icon="arrow-right" primary />
       </ds-flex-item>
       <ds-flex-item width="50px">
-        <ds-button @click="back" :disabled="!hasPrevious" icon="arrow-left" primary />
+        <ds-button @click="back" :loading="$apollo.loading" :disabled="!hasPrevious" icon="arrow-left" primary />
       </ds-flex-item>
     </ds-flex>
   </ds-card>
@@ -49,7 +59,22 @@ export default {
         index: '#',
         name: this.$t('admin.users.table.columns.name'),
         slug: this.$t('admin.users.table.columns.slug'),
-        role: this.$t('admin.users.table.columns.role'),
+        contributionsCount: {
+          label: '🖉',
+          align: 'right'
+        },
+        commentedCount: {
+          label: '🗨',
+          align: 'right'
+        },
+        shoutedCount: {
+          label: '❤',
+          align: 'right'
+        },
+        role: {
+          label: this.$t('admin.users.table.columns.role'),
+          align: 'right'
+        }
       }
     },
   },
@@ -63,6 +88,9 @@ export default {
             name
             slug
             role
+            contributionsCount
+            commentedCount
+            shoutedCount
           }
         }
       `)
@@ -72,7 +100,8 @@ export default {
         return { first, offset }
       },
       update({ User }) {
-        this.hasNext = User && User.length >= this.pageSize
+        if (!User) return []
+        this.hasNext = User.length >= this.pageSize
         if (User.length <= 0) return this.User // edge case, avoid a blank page
         return User.map((u, i) => Object.assign({}, u, { index: this.offset + i }))
       },

From ed8605875ed8b97c87299ad73cb4e4e8974c6a89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 02:24:03 +0200
Subject: [PATCH 19/39] Adding input field

Note: Apparently there is a nasty side-effect when you combine `loading`
and `disabled`. The `disabled` flag gets overridden, if `loading` is
false.
---
 webapp/pages/admin/users.vue | 87 +++++++++++++++++++-----------------
 1 file changed, 47 insertions(+), 40 deletions(-)

diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 8fa0dfe24..7fea65224 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -1,39 +1,46 @@
 <template>
-  <ds-card :header="$t('admin.users.name')">
-    <ds-table v-if="User && User.length" :data="User" :fields="fields" condensed>
-      <template slot="index" slot-scope="scope">
-        {{ scope.row.index }}.
-      </template>
-      <template slot="name" slot-scope="scope">
-        <nuxt-link
-          :to="{
-            name: 'profile-id-slug',
-            params: { id: scope.row.id, slug: scope.row.slug },
-          }"
-        >
-          <b>{{ scope.row.name | truncate(20) }}</b>
-        </nuxt-link>
-      </template>
-      <template slot="slug" slot-scope="scope">
-        <nuxt-link
-          :to="{
-            name: 'profile-id-slug',
-            params: { id: scope.row.id, slug: scope.row.slug },
-          }"
-        >
-          <b>{{ scope.row.slug | truncate(20) }}</b>
-        </nuxt-link>
-      </template>
-    </ds-table>
-    <ds-flex direction="row-reverse">
-      <ds-flex-item width="50px">
-        <ds-button @click="next" :loading="$apollo.loading" :disabled="!hasNext" icon="arrow-right" primary />
-      </ds-flex-item>
-      <ds-flex-item width="50px">
-        <ds-button @click="back" :loading="$apollo.loading" :disabled="!hasPrevious" icon="arrow-left" primary />
-      </ds-flex-item>
-    </ds-flex>
-  </ds-card>
+  <div>
+    <ds-space>
+      <ds-card :header="$t('admin.users.name')">
+        <ds-input placeholder="..." icon="search" />
+      </ds-card>
+    </ds-space>
+    <ds-card>
+      <ds-table v-if="User && User.length" :data="User" :fields="fields" condensed>
+        <template slot="index" slot-scope="scope">
+          {{ scope.row.index }}.
+        </template>
+        <template slot="name" slot-scope="scope">
+          <nuxt-link
+            :to="{
+              name: 'profile-id-slug',
+              params: { id: scope.row.id, slug: scope.row.slug },
+            }"
+          >
+            <b>{{ scope.row.name | truncate(20) }}</b>
+          </nuxt-link>
+        </template>
+        <template slot="slug" slot-scope="scope">
+          <nuxt-link
+            :to="{
+              name: 'profile-id-slug',
+              params: { id: scope.row.id, slug: scope.row.slug },
+            }"
+          >
+            <b>{{ scope.row.slug | truncate(20) }}</b>
+          </nuxt-link>
+        </template>
+      </ds-table>
+      <ds-flex direction="row-reverse">
+        <ds-flex-item width="50px">
+          <ds-button @click="next" :disabled="!hasNext" icon="arrow-right" primary />
+        </ds-flex-item>
+        <ds-flex-item width="50px">
+          <ds-button @click="back" :disabled="!hasPrevious" icon="arrow-left" primary />
+        </ds-flex-item>
+      </ds-flex>
+    </ds-card>
+  </div>
 </template>
 
 <script>
@@ -61,20 +68,20 @@ export default {
         slug: this.$t('admin.users.table.columns.slug'),
         contributionsCount: {
           label: '🖉',
-          align: 'right'
+          align: 'right',
         },
         commentedCount: {
           label: '🗨',
-          align: 'right'
+          align: 'right',
         },
         shoutedCount: {
           label: '❤',
-          align: 'right'
+          align: 'right',
         },
         role: {
           label: this.$t('admin.users.table.columns.role'),
-          align: 'right'
-        }
+          align: 'right',
+        },
       }
     },
   },

From e83aa5c921f33d582e8af5b82447df5c85d5b6bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 12:45:32 +0200
Subject: [PATCH 20/39] Typo: .main-container was missing bottoM padding

FYI: @ogerly
---
 webapp/layouts/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 008323b65..f6d3f1201 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -228,7 +228,7 @@ export default {
 
 .main-container {
   padding-top: 6rem;
-  padding-botton: 5rem;
+  padding-bottom: 6rem;
 }
 
 .main-navigation {

From 3f0afa08341139094ebce14f90ea5f64ec602752 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 13:12:24 +0200
Subject: [PATCH 21/39] Localise placeholder

---
 webapp/locales/de.json       | 3 +++
 webapp/locales/en.json       | 3 +++
 webapp/pages/admin/users.vue | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index d0cbf13ac..ecc067566 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -189,6 +189,9 @@
     },
     "users": {
       "name": "Benutzer",
+      "form": {
+        "placeholder": "E-Mail, Name oder Beschreibung"
+      },
       "table": {
         "columns": {
           "name": "Name",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index c7262795d..0a7b87db6 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -190,6 +190,9 @@
     },
     "users": {
       "name": "Users",
+      "form": {
+        "placeholder": "E-Mail, name or description"
+      },
       "table": {
         "columns": {
           "name": "Name",
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 7fea65224..049da9458 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -2,7 +2,7 @@
   <div>
     <ds-space>
       <ds-card :header="$t('admin.users.name')">
-        <ds-input placeholder="..." icon="search" />
+        <ds-input :placeholder="$t('admin.users.form.placeholder')" icon="search" />
       </ds-card>
     </ds-space>
     <ds-card>

From 4d10b7aece897fe75f98166a9f9563add111b053 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 15:37:13 +0200
Subject: [PATCH 22/39] Basic email filtering on admin/users page

---
 webapp/pages/admin/users.spec.js | 37 +++++++++++++++++++++++++++++++
 webapp/pages/admin/users.vue     | 38 +++++++++++++++++++++++++++-----
 2 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 webapp/pages/admin/users.spec.js

diff --git a/webapp/pages/admin/users.spec.js b/webapp/pages/admin/users.spec.js
new file mode 100644
index 000000000..3e63c380e
--- /dev/null
+++ b/webapp/pages/admin/users.spec.js
@@ -0,0 +1,37 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Users from './users.vue'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+describe('Users', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+      $apollo: {
+        loading: false,
+        mutate: jest.fn().mockResolvedValue(),
+      },
+    }
+  })
+
+  describe('mount', () => {
+    Wrapper = () => {
+      return mount(Users, {
+        mocks,
+        localVue,
+      })
+    }
+
+    it('renders', () => {
+      wrapper = Wrapper()
+      expect(wrapper.is('div')).toBe(true)
+    })
+  })
+})
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 049da9458..a5d02220b 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -2,7 +2,20 @@
   <div>
     <ds-space>
       <ds-card :header="$t('admin.users.name')">
-        <ds-input :placeholder="$t('admin.users.form.placeholder')" icon="search" />
+        <ds-form v-model="form" @submit="submit">
+          <ds-flex gutter="small">
+            <ds-flex-item width="90%">
+              <ds-input
+                model="query"
+                :placeholder="$t('admin.users.form.placeholder')"
+                icon="search"
+              />
+            </ds-flex-item>
+            <ds-flex-item width="30px">
+              <ds-button primary type="submit" icon="search" :loading="$apollo.loading" />
+            </ds-flex-item>
+          </ds-flex>
+        </ds-form>
       </ds-card>
     </ds-space>
     <ds-card>
@@ -55,6 +68,12 @@ export default {
       first: pageSize,
       User: [],
       hasNext: false,
+      email: null,
+      form: {
+        formData: {
+          query: '',
+        },
+      },
     }
   },
   computed: {
@@ -89,8 +108,8 @@ export default {
     User: {
       query() {
         return gql(`
-        query($filter: _UserFilter, $first: Int, $offset: Int) {
-          User(filter: $filter, first: $first, offset: $offset, orderBy: createdAt_desc) {
+        query($filter: _UserFilter, $first: Int, $offset: Int, $email: String) {
+          User(email: $email, filter: $filter, first: $first, offset: $offset, orderBy: createdAt_desc) {
             id
             name
             slug
@@ -103,13 +122,15 @@ export default {
       `)
       },
       variables() {
-        const { offset, first } = this
-        return { first, offset }
+        const { offset, first, email } = this
+        const variables = { first, offset }
+        if (email) variables.email = email
+        return variables
       },
       update({ User }) {
         if (!User) return []
         this.hasNext = User.length >= this.pageSize
-        if (User.length <= 0) return this.User // edge case, avoid a blank page
+        if (User.length <= 0 && this.offset > 0) return this.User // edge case, avoid a blank page
         return User.map((u, i) => Object.assign({}, u, { index: this.offset + i }))
       },
     },
@@ -121,6 +142,11 @@ export default {
     next() {
       this.offset += this.pageSize
     },
+    submit(formData) {
+      this.offset = 0
+      const { query } = formData
+      this.email = query
+    },
   },
 }
 </script>

From c7094d82b867be4c18ce76f559f2066765a1dd3e Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 12 Jul 2019 10:37:27 -0300
Subject: [PATCH 23/39] Fix styling, follow @Tirokk suggestions

---
 webapp/components/FilterPosts/FilterPosts.vue |  8 ---
 .../FilterPosts/FilterPostsMenuItems.vue      | 57 +++++++++++++------
 2 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 95ed3b8f5..2e957cd56 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -59,11 +59,3 @@ export default {
   },
 }
 </script>
-<style lang="scss">
-#filter-posts-header {
-  display: block;
-}
-.categories-list {
-  text-align: center;
-}
-</style>
diff --git a/webapp/components/FilterPosts/FilterPostsMenuItems.vue b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
index c8d0d37cf..601d3dcca 100644
--- a/webapp/components/FilterPosts/FilterPostsMenuItems.vue
+++ b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
@@ -1,14 +1,17 @@
 <template>
   <ds-container>
     <ds-space />
+    <ds-flex id="filter-posts-header">
+      <ds-heading tag="h4">{{ $t('filter-posts.header') }}</ds-heading>
+      <ds-space margin-bottom="large" />
+    </ds-flex>
     <ds-flex>
       <ds-flex-item
-        :width="{ base: '100%', sm: '100%', md: '100%', lg: '13%' }"
-        class="categories-list"
+        :width="{ base: '100%', sm: '100%', md: '100%', lg: '5%' }"
+        class="categories-menu-item"
       >
         <ds-space margin-bottom="x-small" />
-        <ds-flex id="filter-posts-header">
-          <ds-heading tag="h4">{{ $t('filter-posts.header') }}</ds-heading>
+        <ds-flex>
           <ds-flex-item width="10%" />
           <ds-flex-item width="100%">
             <ds-button
@@ -17,7 +20,7 @@
               :primary="allCategories"
             />
             <ds-flex-item>
-              <label>{{ $t('filter-posts.all') }}</label>
+              <label class="category-labels">{{ $t('filter-posts.all') }}</label>
             </ds-flex-item>
             <ds-space />
           </ds-flex-item>
@@ -25,13 +28,13 @@
       </ds-flex-item>
       <ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '7%' }" />
       <ds-flex-item
-        :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }"
+        :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-list">
-          <ds-flex>
-            <ds-flex-item width="100%">
+        <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="isActive(category.id)"
@@ -40,8 +43,8 @@
               <ds-space margin-bottom="small" />
             </ds-flex-item>
             <ds-flex>
-              <ds-flex-item>
-                <label>{{ category.name }}</label>
+              <ds-flex-item class="categories-menu-item">
+                <label class="category-labels">{{ category.name }}</label>
               </ds-flex-item>
               <ds-space margin-bottom="xx-large" />
             </ds-flex>
@@ -71,16 +74,36 @@ export default {
       return false
     },
     toggleCategory(id) {
-      const index = this.selectedCategoryIds.indexOf(id)
-      if (index > -1) {
-        this.selectedCategoryIds.splice(index, 1)
+      if (!id) {
+        this.selectedCategoryIds = []
+        this.allCategories = true
       } else {
-        this.selectedCategoryIds.push(id)
+        const index = this.selectedCategoryIds.indexOf(id)
+        if (index > -1) {
+          this.selectedCategoryIds.splice(index, 1)
+        } else {
+          this.selectedCategoryIds.push(id)
+        }
+        this.allCategories = false
       }
-      if (!id) this.selectedCategoryIds = []
-      this.selectedCategoryIds.length ? (this.allCategories = false) : (this.allCategories = true)
       this.$emit('filterPosts', this.selectedCategoryIds)
     },
   },
 }
 </script>
+<style lang="scss">
+#filter-posts-header {
+  display: block;
+  text-align: center;
+}
+.categories-menu-item {
+  text-align: center;
+}
+.categories-menu {
+  justify-content: center;
+}
+
+.category-labels {
+  font-size: $font-size-small;
+}
+</style>

From 88ef6c00f2537e9627df697ba702c8089789cd19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 15:47:22 +0200
Subject: [PATCH 24/39] Display "no users found" for empty user list

---
 webapp/locales/de.json       | 3 ++-
 webapp/locales/en.json       | 3 ++-
 webapp/pages/admin/users.vue | 9 +++++++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index ecc067566..dd6ec2185 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -198,7 +198,8 @@
           "slug": "Slug",
           "role": "Rolle"
         }
-      }
+      },
+      "empty": "Keine Benutzer gefunden"
     },
     "pages": {
       "name": "Seiten"
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 0a7b87db6..53825d83e 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -199,7 +199,8 @@
           "slug": "Slug",
           "role": "Role"
         }
-      }
+      },
+      "empty": "No users found"
     },
     "pages": {
       "name": "Pages"
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index a5d02220b..c94abd529 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -18,8 +18,8 @@
         </ds-form>
       </ds-card>
     </ds-space>
-    <ds-card>
-      <ds-table v-if="User && User.length" :data="User" :fields="fields" condensed>
+    <ds-card v-if="User && User.length">
+      <ds-table :data="User" :fields="fields" condensed>
         <template slot="index" slot-scope="scope">
           {{ scope.row.index }}.
         </template>
@@ -53,6 +53,11 @@
         </ds-flex-item>
       </ds-flex>
     </ds-card>
+    <ds-card v-else>
+      <ds-placeholder>
+        {{ $t('admin.users.empty') }}
+      </ds-placeholder>
+    </ds-card>
   </div>
 </template>
 

From f9969b964c8555bca18952b0ff2cb6abb824dc81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Sat, 13 Jul 2019 14:00:03 +0200
Subject: [PATCH 25/39] Implement conditional filtering

---
 backend/src/schema/types/type/User.gql |  3 +++
 webapp/package.json                    |  3 ++-
 webapp/pages/admin/users.spec.js       | 35 +++++++++++++++++++++++++-
 webapp/pages/admin/users.vue           | 15 +++++++++--
 webapp/yarn.lock                       | 17 +++++++++----
 5 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/backend/src/schema/types/type/User.gql b/backend/src/schema/types/type/User.gql
index b984f2d79..a735e90e5 100644
--- a/backend/src/schema/types/type/User.gql
+++ b/backend/src/schema/types/type/User.gql
@@ -79,6 +79,9 @@ type User {
 input _UserFilter {
   AND: [_UserFilter!]
   OR: [_UserFilter!]
+  name_contains: String
+  about_contains: String
+  slug_contains: String
   id: ID
   id_not: ID
   id_in: [ID!]
diff --git a/webapp/package.json b/webapp/package.json
index edad9509d..8385f37ec 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -63,6 +63,7 @@
     "date-fns": "2.0.0-beta.2",
     "express": "~4.17.1",
     "graphql": "~14.4.2",
+    "isemail": "^3.2.0",
     "jsonwebtoken": "~8.5.1",
     "linkify-it": "~2.1.0",
     "nuxt": "~2.8.1",
@@ -111,4 +112,4 @@
     "vue-jest": "~3.0.4",
     "vue-svg-loader": "~0.12.0"
   }
-}
\ No newline at end of file
+}
diff --git a/webapp/pages/admin/users.spec.js b/webapp/pages/admin/users.spec.js
index 3e63c380e..e6b84cad9 100644
--- a/webapp/pages/admin/users.spec.js
+++ b/webapp/pages/admin/users.spec.js
@@ -16,7 +16,6 @@ describe('Users', () => {
       $t: jest.fn(),
       $apollo: {
         loading: false,
-        mutate: jest.fn().mockResolvedValue(),
       },
     }
   })
@@ -33,5 +32,39 @@ describe('Users', () => {
       wrapper = Wrapper()
       expect(wrapper.is('div')).toBe(true)
     })
+
+    describe('search', () => {
+      let searchAction
+      beforeEach(() => {
+        searchAction = (wrapper, { query }) => {
+          wrapper.find('input').setValue(query)
+          wrapper.find('form').trigger('submit')
+          return wrapper
+        }
+      })
+
+      describe('query looks like an email address', () => {
+        it('searches users for exact email address', async () => {
+          const wrapper = await searchAction(Wrapper(), { query: 'email@example.org' })
+          expect(wrapper.vm.email).toEqual('email@example.org')
+          expect(wrapper.vm.filter).toBe(null)
+        })
+      })
+
+      describe('query is just text', () => {
+        it('tries to find matching users by `name`, `slug` or `about`', async () => {
+          const wrapper = await searchAction(await Wrapper(), { query: 'Find me' })
+          const expected = {
+            OR: [
+              { name_contains: 'Find me' },
+              { slug_contains: 'Find me' },
+              { about_contains: 'Find me' },
+            ],
+          }
+          expect(wrapper.vm.email).toBe(null)
+          expect(wrapper.vm.filter).toEqual(expected)
+        })
+      })
+    })
   })
 })
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index c94abd529..4f9a0849b 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -63,6 +63,7 @@
 
 <script>
 import gql from 'graphql-tag'
+import isemail from 'isemail'
 
 export default {
   data() {
@@ -74,6 +75,7 @@ export default {
       User: [],
       hasNext: false,
       email: null,
+      filter: null,
       form: {
         formData: {
           query: '',
@@ -127,9 +129,10 @@ export default {
       `)
       },
       variables() {
-        const { offset, first, email } = this
+        const { offset, first, email, filter } = this
         const variables = { first, offset }
         if (email) variables.email = email
+        if (filter) variables.filter = filter
         return variables
       },
       update({ User }) {
@@ -150,7 +153,15 @@ export default {
     submit(formData) {
       this.offset = 0
       const { query } = formData
-      this.email = query
+      if (isemail.validate(query)) {
+        this.email = query
+        this.filter = null
+      } else {
+        this.email = null
+        this.filter = {
+          OR: [{ name_contains: query }, { slug_contains: query }, { about_contains: query }],
+        }
+      }
     },
   },
 }
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 1456371d2..0e6b7218a 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -6047,6 +6047,13 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
+isemail@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/isemail/-/isemail-3.2.0.tgz#59310a021931a9fb06bbb51e155ce0b3f236832c"
+  integrity sha512-zKqkK+O+dGqevc93KNsbZ/TqTUFd46MwWjYOoMrjIMZ51eU7DtQG3Wmd9SQQT7i7RVnuTPEiYEWHU3MSbxC1Tg==
+  dependencies:
+    punycode "2.x.x"
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -9173,16 +9180,16 @@ punycode@1.3.2:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
   integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
 
+punycode@2.x.x, punycode@^2.1.0, punycode@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
 punycode@^1.2.4, punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
   integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
 
-punycode@^2.1.0, punycode@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
-  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
-
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"

From 5da5b8658e36271f3398d250ab92c78d2a2b47dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Sat, 13 Jul 2019 14:14:21 +0200
Subject: [PATCH 26/39] Display creation date in user view

---
 webapp/locales/de.json       | 3 ++-
 webapp/locales/en.json       | 3 ++-
 webapp/pages/admin/users.vue | 5 +++++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index dd6ec2185..30e77891a 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -196,7 +196,8 @@
         "columns": {
           "name": "Name",
           "slug": "Slug",
-          "role": "Rolle"
+          "role": "Rolle",
+          "createdAt": "Erstellt am"
         }
       },
       "empty": "Keine Benutzer gefunden"
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 53825d83e..69e80e5bb 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -197,7 +197,8 @@
         "columns": {
           "name": "Name",
           "slug": "Slug",
-          "role": "Role"
+          "role": "Role",
+          "createdAt": "Created at"
         }
       },
       "empty": "No users found"
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 4f9a0849b..0d737cfc0 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -43,6 +43,9 @@
             <b>{{ scope.row.slug | truncate(20) }}</b>
           </nuxt-link>
         </template>
+        <template slot="createdAt" slot-scope="scope">
+          {{ scope.row.createdAt | dateTime }}
+        </template>
       </ds-table>
       <ds-flex direction="row-reverse">
         <ds-flex-item width="50px">
@@ -92,6 +95,7 @@ export default {
         index: '#',
         name: this.$t('admin.users.table.columns.name'),
         slug: this.$t('admin.users.table.columns.slug'),
+        createdAt: this.$t('admin.users.table.columns.createdAt'),
         contributionsCount: {
           label: '🖉',
           align: 'right',
@@ -121,6 +125,7 @@ export default {
             name
             slug
             role
+            createdAt
             contributionsCount
             commentedCount
             shoutedCount

From f64a21bd010e3925341aed7443e2142c63bfd85a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Sat, 13 Jul 2019 17:00:55 +0200
Subject: [PATCH 27/39] Remove graphql-yoga

---
 backend/package.json                          |   4 +-
 backend/src/index.js                          |  14 +-
 .../handleContentData.spec.js                 |  13 +-
 backend/src/middleware/index.js               |   5 +-
 backend/src/schema/resolvers/comments.spec.js |   9 +-
 backend/src/schema/resolvers/rewards.spec.js  |   9 +-
 .../src/schema/resolvers/socialMedia.spec.js  |   5 +-
 backend/src/schema/resolvers/users.spec.js    |   3 +-
 backend/src/server.js                         |  22 +-
 backend/yarn.lock                             | 327 +-----------------
 10 files changed, 51 insertions(+), 360 deletions(-)

diff --git a/backend/package.json b/backend/package.json
index 25b3c8cb0..2d591a6dd 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -49,6 +49,7 @@
     "apollo-link-context": "~1.0.18",
     "apollo-link-http": "~1.5.15",
     "apollo-server": "~2.6.9",
+    "apollo-server-express": "^2.6.9",
     "bcryptjs": "~2.4.3",
     "cheerio": "~1.0.0-rc.3",
     "cors": "~2.8.5",
@@ -56,7 +57,7 @@
     "date-fns": "2.0.0-beta.1",
     "debug": "~4.1.1",
     "dotenv": "~8.0.0",
-    "express": "~4.17.1",
+    "express": "^4.17.1",
     "faker": "Marak/faker.js#master",
     "graphql": "~14.4.2",
     "graphql-custom-directives": "~0.2.14",
@@ -64,7 +65,6 @@
     "graphql-middleware": "~3.0.2",
     "graphql-shield": "~6.0.3",
     "graphql-tag": "~2.10.1",
-    "graphql-yoga": "~1.18.0",
     "helmet": "~3.18.0",
     "jsonwebtoken": "~8.5.1",
     "linkifyjs": "~2.1.8",
diff --git a/backend/src/index.js b/backend/src/index.js
index f28e58947..0e7fc233c 100644
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -1,18 +1,8 @@
 import createServer from './server'
-import ActivityPub from './activitypub/ActivityPub'
 import CONFIG from './config'
 
-const serverConfig = {
-  port: CONFIG.GRAPHQL_PORT,
-  // cors: {
-  //   credentials: true,
-  //   origin: [CONFIG.CLIENT_URI] // your frontend url.
-  // }
-}
-
-const server = createServer()
-server.start(serverConfig, options => {
+const { app } = createServer()
+app.listen({ port: CONFIG.GRAPHQL_PORT }, () => {
   /* eslint-disable-next-line no-console */
   console.log(`GraphQLServer ready at ${CONFIG.GRAPHQL_URI} 🚀`)
-  ActivityPub.init(server)
 })
diff --git a/backend/src/middleware/handleHtmlContent/handleContentData.spec.js b/backend/src/middleware/handleHtmlContent/handleContentData.spec.js
index aa281e6d7..e4292bb8f 100644
--- a/backend/src/middleware/handleHtmlContent/handleContentData.spec.js
+++ b/backend/src/middleware/handleHtmlContent/handleContentData.spec.js
@@ -1,5 +1,4 @@
 import { GraphQLClient } from 'graphql-request'
-import gql from 'graphql-tag'
 import { host, login } from '../../jest/helpers'
 import Factory from '../../seed/factories'
 
@@ -21,7 +20,7 @@ afterEach(async () => {
 })
 
 describe('currentUser { notifications }', () => {
-  const query = gql`
+  const query = `
     query($read: Boolean) {
       currentUser {
         notifications(read: $read, orderBy: createdAt_desc) {
@@ -68,7 +67,7 @@ describe('currentUser { notifications }', () => {
           'Hey <a class="mention" href="/profile/you/al-capone">@al-capone</a> how do you do?'
 
         beforeEach(async () => {
-          const createPostMutation = gql`
+          const createPostMutation = `
             mutation($title: String!, $content: String!) {
               CreatePost(title: $title, content: $content) {
                 id
@@ -117,7 +116,7 @@ describe('currentUser { notifications }', () => {
             // during development and thought: A feature not a bug! This way we
             // can encode a re-mentioning of users when you edit your post or
             // comment.
-            const updatePostMutation = gql`
+            const updatePostMutation = `
               mutation($id: ID!, $title: String!, $content: String!) {
                 UpdatePost(id: $id, content: $content, title: $title) {
                   title
@@ -173,7 +172,7 @@ describe('Hashtags', () => {
   const postTitle = 'Two Hashtags'
   const postContent =
     '<p>Hey Dude, <a class="hashtag" href="/search/hashtag/Democracy">#Democracy</a> should work equal for everybody!? That seems to be the only way to have equal <a class="hashtag" href="/search/hashtag/Liberty">#Liberty</a> for everyone.</p>'
-  const postWithHastagsQuery = gql`
+  const postWithHastagsQuery = `
     query($id: ID) {
       Post(id: $id) {
         tags {
@@ -186,7 +185,7 @@ describe('Hashtags', () => {
   const postWithHastagsVariables = {
     id: postId,
   }
-  const createPostMutation = gql`
+  const createPostMutation = `
     mutation($postId: ID, $postTitle: String!, $postContent: String!) {
       CreatePost(id: $postId, title: $postTitle, content: $postContent) {
         id
@@ -243,7 +242,7 @@ describe('Hashtags', () => {
         // The already existing Hashtag has no class at this point.
         const updatedPostContent =
           '<p>Hey Dude, <a class="hashtag" href="/search/hashtag/Elections">#Elections</a> should work equal for everybody!? That seems to be the only way to have equal <a href="/search/hashtag/Liberty">#Liberty</a> for everyone.</p>'
-        const updatePostMutation = gql`
+        const updatePostMutation = `
           mutation($postId: ID!, $postTitle: String!, $updatedPostContent: String!) {
             UpdatePost(id: $postId, title: $postTitle, content: $updatedPostContent) {
               id
diff --git a/backend/src/middleware/index.js b/backend/src/middleware/index.js
index fd631256d..19c72c19f 100644
--- a/backend/src/middleware/index.js
+++ b/backend/src/middleware/index.js
@@ -1,4 +1,6 @@
+import { applyMiddleware } from 'graphql-middleware'
 import CONFIG from './../config'
+
 import activityPub from './activityPubMiddleware'
 import softDelete from './softDeleteMiddleware'
 import sluggify from './sluggifyMiddleware'
@@ -56,5 +58,6 @@ export default schema => {
     console.log(`Warning: "${disabledMiddlewares}" middlewares have been disabled.`)
   }
 
-  return order.map(key => middlewares[key])
+  const appliedMiddlewares = order.map(key => middlewares[key])
+  return applyMiddleware(schema, ...appliedMiddlewares)
 }
diff --git a/backend/src/schema/resolvers/comments.spec.js b/backend/src/schema/resolvers/comments.spec.js
index 7f17539dc..5b2da7781 100644
--- a/backend/src/schema/resolvers/comments.spec.js
+++ b/backend/src/schema/resolvers/comments.spec.js
@@ -1,4 +1,3 @@
-import gql from 'graphql-tag'
 import { GraphQLClient } from 'graphql-request'
 import Factory from '../../seed/factories'
 import { host, login } from '../../jest/helpers'
@@ -26,7 +25,7 @@ afterEach(async () => {
 })
 
 describe('CreateComment', () => {
-  const createCommentMutation = gql`
+  const createCommentMutation = `
     mutation($postId: ID!, $content: String!) {
       CreateComment(postId: $postId, content: $content) {
         id
@@ -34,7 +33,7 @@ describe('CreateComment', () => {
       }
     }
   `
-  const createPostMutation = gql`
+  const createPostMutation = `
     mutation($id: ID!, $title: String!, $content: String!) {
       CreatePost(id: $id, title: $title, content: $content) {
         id
@@ -88,7 +87,7 @@ describe('CreateComment', () => {
     it('assigns the authenticated user as author', async () => {
       await client.request(createCommentMutation, createCommentVariables)
 
-      const { User } = await client.request(gql`
+      const { User } = await client.request(`
         {
           User(name: "TestUser") {
             comments {
@@ -189,7 +188,7 @@ describe('CreateComment', () => {
 })
 
 describe('DeleteComment', () => {
-  const deleteCommentMutation = gql`
+  const deleteCommentMutation = `
     mutation($id: ID!) {
       DeleteComment(id: $id) {
         id
diff --git a/backend/src/schema/resolvers/rewards.spec.js b/backend/src/schema/resolvers/rewards.spec.js
index 7dcca6eb8..38f485ef7 100644
--- a/backend/src/schema/resolvers/rewards.spec.js
+++ b/backend/src/schema/resolvers/rewards.spec.js
@@ -1,7 +1,6 @@
 import { GraphQLClient } from 'graphql-request'
 import Factory from '../../seed/factories'
 import { host, login } from '../../jest/helpers'
-import gql from 'graphql-tag'
 
 const factory = Factory()
 let user
@@ -43,7 +42,7 @@ describe('rewards', () => {
   })
 
   describe('reward', () => {
-    const mutation = gql`
+    const mutation = `
       mutation($from: ID!, $to: ID!) {
         reward(badgeKey: $from, userId: $to) {
           id
@@ -141,7 +140,7 @@ describe('rewards', () => {
         await client.request(mutation, variables)
         await client.request(mutation, variables)
 
-        const query = gql`
+        const query = `
           {
             User(id: "u1") {
               badgesCount
@@ -178,7 +177,7 @@ describe('rewards', () => {
     })
     const expected = { unreward: { id: 'u1', badges: [] } }
 
-    const mutation = gql`
+    const mutation = `
       mutation($from: ID!, $to: ID!) {
         unreward(badgeKey: $from, userId: $to) {
           id
@@ -191,7 +190,7 @@ describe('rewards', () => {
 
     describe('check test setup', () => {
       it('user has one badge', async () => {
-        const query = gql`
+        const query = `
           {
             User(id: "u1") {
               badgesCount
diff --git a/backend/src/schema/resolvers/socialMedia.spec.js b/backend/src/schema/resolvers/socialMedia.spec.js
index bacc86fbe..f65552e5c 100644
--- a/backend/src/schema/resolvers/socialMedia.spec.js
+++ b/backend/src/schema/resolvers/socialMedia.spec.js
@@ -1,4 +1,3 @@
-import gql from 'graphql-tag'
 import { GraphQLClient } from 'graphql-request'
 import Factory from '../../seed/factories'
 import { host, login } from '../../jest/helpers'
@@ -8,7 +7,7 @@ const factory = Factory()
 describe('SocialMedia', () => {
   let client
   let headers
-  const mutationC = gql`
+  const mutationC = `
     mutation($url: String!) {
       CreateSocialMedia(url: $url) {
         id
@@ -16,7 +15,7 @@ describe('SocialMedia', () => {
       }
     }
   `
-  const mutationD = gql`
+  const mutationD = `
     mutation($id: ID!) {
       DeleteSocialMedia(id: $id) {
         id
diff --git a/backend/src/schema/resolvers/users.spec.js b/backend/src/schema/resolvers/users.spec.js
index fa83017da..022f836cd 100644
--- a/backend/src/schema/resolvers/users.spec.js
+++ b/backend/src/schema/resolvers/users.spec.js
@@ -1,7 +1,6 @@
 import { GraphQLClient } from 'graphql-request'
 import { login, host } from '../../jest/helpers'
 import Factory from '../../seed/factories'
-import gql from 'graphql-tag'
 
 const factory = Factory()
 let client
@@ -131,7 +130,7 @@ describe('users', () => {
   describe('DeleteUser', () => {
     let deleteUserVariables
     let asAuthor
-    const deleteUserMutation = gql`
+    const deleteUserMutation = `
       mutation($id: ID!, $resource: [Deletable]) {
         DeleteUser(id: $id, resource: $resource) {
           id
diff --git a/backend/src/server.js b/backend/src/server.js
index 7692f0d2c..d58ecd277 100644
--- a/backend/src/server.js
+++ b/backend/src/server.js
@@ -1,6 +1,6 @@
 import express from 'express'
 import helmet from 'helmet'
-import { GraphQLServer } from 'graphql-yoga'
+import { ApolloServer } from 'apollo-server-express'
 import CONFIG, { requiredConfigs } from './config'
 import mocks from './mocks'
 import middleware from './middleware'
@@ -20,28 +20,30 @@ const driver = getDriver()
 
 const createServer = options => {
   const defaults = {
-    context: async ({ request }) => {
-      const user = await decode(driver, request.headers.authorization)
+    context: async ({ req }) => {
+      const user = await decode(driver, req.headers.authorization)
       return {
         driver,
         user,
-        req: request,
+        req,
         cypherParams: {
           currentUserId: user ? user.id : null,
         },
       }
     },
-    schema,
+    schema: middleware(schema),
     debug: CONFIG.DEBUG,
     tracing: CONFIG.DEBUG,
-    middlewares: middleware(schema),
     mocks: CONFIG.MOCKS ? mocks : false,
   }
-  const server = new GraphQLServer(Object.assign({}, defaults, options))
+  const server = new ApolloServer(Object.assign({}, defaults, options))
 
-  server.express.use(helmet())
-  server.express.use(express.static('public'))
-  return server
+  const app = express()
+  app.use(helmet())
+  app.use(express.static('public'))
+  server.applyMiddleware({ app, path: '/' })
+
+  return { server, app }
 }
 
 export default createServer
diff --git a/backend/yarn.lock b/backend/yarn.lock
index 110094f3a..1dea26822 100644
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
@@ -1084,7 +1084,7 @@
     "@types/node" "*"
     "@types/range-parser" "*"
 
-"@types/express@*", "@types/express@4.17.0", "@types/express@^4.11.1":
+"@types/express@*", "@types/express@4.17.0":
   version "4.17.0"
   resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.0.tgz#49eaedb209582a86f12ed9b725160f12d04ef287"
   integrity sha512-CjaMu57cjgjuZbh9DpkloeGxV45CnMGlVd+XpG7Gm9QgVrd7KFq+X4HY0vM+2v0bczS48Wg7bvnMY5TN+Xmcfw==
@@ -1093,16 +1093,6 @@
     "@types/express-serve-static-core" "*"
     "@types/serve-static" "*"
 
-"@types/graphql-deduplicator@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@types/graphql-deduplicator/-/graphql-deduplicator-2.0.0.tgz#9e577b8f3feb3d067b0ca756f4a1fb356d533922"
-  integrity sha512-swUwj5hWF1yFzbUXStLJrUa0ksAt11B8+SwhsAjQAX0LYJ1LLioAyuDcJ9bovWbsNzIXJYXLvljSPQw8nR728w==
-
-"@types/graphql@^14.0.0":
-  version "14.0.3"
-  resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-14.0.3.tgz#389e2e5b83ecdb376d9f98fae2094297bc112c1c"
-  integrity sha512-TcFkpEjcQK7w8OcrQcd7iIBPjU0rdyi3ldj6d0iJ4PPSzbWqPBvXj9KSwO14hTOX2dm9RoiH7VuxksJLNYdXUQ==
-
 "@types/istanbul-lib-coverage@*":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
@@ -1179,11 +1169,6 @@
   resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.26.21.tgz#bfca27a02a0631495bfd25b6c63647a125e6944e"
   integrity sha512-1C45M7hZrVsl8bXxYV01bitRp0r35djt+eX5HWFH3NdH+8ejqta3KM7rmQLRLrupkhF7jRkAtXl2EgDsriIqwA==
 
-"@types/zen-observable@^0.5.3":
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.5.4.tgz#b863a4191e525206819e008097ebf0fb2e3a1cdc"
-  integrity sha512-sW6xN96wUak4tgc89d0tbTg7QDGYhGv5hvQIS6h4mRCd8h2btiZ80loPU8cyLwsBbA4ZeQt0FjvUhJ4rNhdsGg==
-
 "@types/zen-observable@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.8.0.tgz#8b63ab7f1aa5321248aad5ac890a485656dcea4d"
@@ -1351,13 +1336,6 @@ apollo-cache-control@0.7.5:
     apollo-server-env "2.4.0"
     graphql-extensions "0.7.7"
 
-apollo-cache-control@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/apollo-cache-control/-/apollo-cache-control-0.1.1.tgz#173d14ceb3eb9e7cb53de7eb8b61bee6159d4171"
-  integrity sha512-XJQs167e9u+e5ybSi51nGYr70NPBbswdvTEHtbtXbwkZ+n9t0SLPvUcoqceayOSwjK1XYOdU/EKPawNdb3rLQA==
-  dependencies:
-    graphql-extensions "^0.0.x"
-
 apollo-cache-inmemory@~1.6.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.2.tgz#bbf2e4e1eacdf82b2d526f5c2f3b37e5acee3c5e"
@@ -1512,15 +1490,6 @@ apollo-server-core@2.6.9:
     subscriptions-transport-ws "^0.9.11"
     ws "^6.0.0"
 
-apollo-server-core@^1.3.6, apollo-server-core@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/apollo-server-core/-/apollo-server-core-1.4.0.tgz#4faff7f110bfdd6c3f47008302ae24140f94c592"
-  integrity sha512-BP1Vh39krgEjkQxbjTdBURUjLHbFq1zeOChDJgaRsMxGtlhzuLWwwC6lLdPatN8jEPbeHq8Tndp9QZ3iQZOKKA==
-  dependencies:
-    apollo-cache-control "^0.1.0"
-    apollo-tracing "^0.1.0"
-    graphql-extensions "^0.0.x"
-
 apollo-server-env@2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/apollo-server-env/-/apollo-server-env-2.4.0.tgz#6611556c6b627a1636eed31317d4f7ea30705872"
@@ -1534,7 +1503,7 @@ apollo-server-errors@2.3.1:
   resolved "https://registry.yarnpkg.com/apollo-server-errors/-/apollo-server-errors-2.3.1.tgz#033cf331463ebb99a563f8354180b41ac6714eb6"
   integrity sha512-errZvnh0vUQChecT7M4A/h94dnBSRL213dNxpM5ueMypaLYgnp4hiCTWIEaooo9E4yMGd1qA6WaNbLDG2+bjcg==
 
-apollo-server-express@2.6.9:
+apollo-server-express@2.6.9, apollo-server-express@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/apollo-server-express/-/apollo-server-express-2.6.9.tgz#176dab7f2cd5a99655c8eb382ad9b10797422a7b"
   integrity sha512-iTkdIdX7m9EAlmL/ZPkKR+x/xuFk1HYZWuJIJG57hHUhcOxj50u7F1E5+5fDwl5RFIdepQ61azF31hhNZuNi4g==
@@ -1552,27 +1521,6 @@ apollo-server-express@2.6.9:
     graphql-tools "^4.0.0"
     type-is "^1.6.16"
 
-apollo-server-express@^1.3.6:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/apollo-server-express/-/apollo-server-express-1.4.0.tgz#7d7c58d6d6f9892b83fe575669093bb66738b125"
-  integrity sha512-zkH00nxhLnJfO0HgnNPBTfZw8qI5ILaPZ5TecMCI9+Y9Ssr2b0bFr9pBRsXy9eudPhI+/O4yqegSUsnLdF/CPw==
-  dependencies:
-    apollo-server-core "^1.4.0"
-    apollo-server-module-graphiql "^1.4.0"
-
-apollo-server-lambda@1.3.6:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/apollo-server-lambda/-/apollo-server-lambda-1.3.6.tgz#bdaac37f143c6798e40b8ae75580ba673cea260e"
-  integrity sha1-varDfxQ8Z5jkC4rnVYC6ZzzqJg4=
-  dependencies:
-    apollo-server-core "^1.3.6"
-    apollo-server-module-graphiql "^1.3.4"
-
-apollo-server-module-graphiql@^1.3.4, apollo-server-module-graphiql@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/apollo-server-module-graphiql/-/apollo-server-module-graphiql-1.4.0.tgz#c559efa285578820709f1769bb85d3b3eed3d8ec"
-  integrity sha512-GmkOcb5he2x5gat+TuiTvabnBf1m4jzdecal3XbXBh/Jg+kx4hcvO3TTDFQ9CuTprtzdcVyA11iqG7iOMOt7vA==
-
 apollo-server-plugin-base@0.5.8:
   version "0.5.8"
   resolved "https://registry.yarnpkg.com/apollo-server-plugin-base/-/apollo-server-plugin-base-0.5.8.tgz#77b4127aff4e3514a9d49e3cc61256aee4d9422e"
@@ -1604,23 +1552,6 @@ apollo-tracing@0.7.4:
     apollo-server-env "2.4.0"
     graphql-extensions "0.7.7"
 
-apollo-tracing@^0.1.0:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/apollo-tracing/-/apollo-tracing-0.1.4.tgz#5b8ae1b01526b160ee6e552a7f131923a9aedcc7"
-  integrity sha512-Uv+1nh5AsNmC3m130i2u3IqbS+nrxyVV3KYimH5QKsdPjxxIQB3JAT+jJmpeDxBel8gDVstNmCh82QSLxLSIdQ==
-  dependencies:
-    graphql-extensions "~0.0.9"
-
-apollo-upload-server@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/apollo-upload-server/-/apollo-upload-server-7.1.0.tgz#21e07b52252b3749b913468599813e13cfca805f"
-  integrity sha512-cD9ReCeyurYwZyEDqJYb5TOc9dt8yhPzS+MtrY3iJdqw+pqiiyPngAvVXHjN+Ca7Lajvom4/AT/PBrYVDMM3Kw==
-  dependencies:
-    busboy "^0.2.14"
-    fs-capacitor "^1.0.0"
-    http-errors "^1.7.0"
-    object-path "^0.11.4"
-
 apollo-utilities@1.3.2, apollo-utilities@^1.0.1, apollo-utilities@^1.3.0, apollo-utilities@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.3.2.tgz#8cbdcf8b012f664cd6cb5767f6130f5aed9115c9"
@@ -1806,30 +1737,6 @@ atob@^2.1.1:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-aws-lambda@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/aws-lambda/-/aws-lambda-0.1.2.tgz#19b1585075df31679597b976a5f1def61f12ccee"
-  integrity sha1-GbFYUHXfMWeVl7l2pfHe9h8SzO4=
-  dependencies:
-    aws-sdk "^*"
-    commander "^2.5.0"
-    dotenv "^0.4.0"
-
-aws-sdk@^*:
-  version "2.373.0"
-  resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.373.0.tgz#fcc5606634b3b11d80810ad252d1b52b3733d780"
-  integrity sha512-NZYXwXGtFt9jxaKXc+PJsLPnpbD03t0MAZRxh93g36kbFMuRXtY8CDqHYNQ0ZcrgQpXbCQiz1fxT5/wu5Cu70g==
-  dependencies:
-    buffer "4.9.1"
-    events "1.1.1"
-    ieee754 "1.1.8"
-    jmespath "0.15.0"
-    querystring "0.2.0"
-    sax "1.2.1"
-    url "0.10.3"
-    uuid "3.1.0"
-    xml2js "0.4.19"
-
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -1919,11 +1826,6 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
-base64-js@^1.0.2:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
-  integrity sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==
-
 base@^0.11.1:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
@@ -1992,14 +1894,7 @@ bn.js@^2.0.0:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-2.2.0.tgz#12162bc2ae71fc40a5626c33438f3a875cd37625"
   integrity sha1-EhYrwq5x/EClYmwzQ486h1zTdiU=
 
-body-parser-graphql@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/body-parser-graphql/-/body-parser-graphql-1.1.0.tgz#80a80353c7cb623562fd375750dfe018d75f0f7c"
-  integrity sha512-bOBF4n1AnUjcY1SzLeibeIx4XOuYqEkjn/Lm4yKhnN6KedoXMv4hVqgcKHGRnxOMJP64tErqrQU+4cihhpbJXg==
-  dependencies:
-    body-parser "^1.18.2"
-
-body-parser@1.19.0, body-parser@^1.18.2, body-parser@^1.18.3:
+body-parser@1.19.0, body-parser@^1.18.3:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
   integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
@@ -2110,28 +2005,11 @@ buffer-from@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
-buffer@4.9.1:
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
-  integrity sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-    isarray "^1.0.0"
-
 builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
   integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=
 
-busboy@^0.2.14:
-  version "0.2.14"
-  resolved "https://registry.yarnpkg.com/busboy/-/busboy-0.2.14.tgz#6c2a622efcf47c57bbbe1e2a9c37ad36c7925453"
-  integrity sha1-bCpiLvz0fFe7vh4qnDetNseSVFM=
-  dependencies:
-    dicer "0.2.5"
-    readable-stream "1.1.x"
-
 busboy@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/busboy/-/busboy-0.3.1.tgz#170899274c5bf38aae27d5c62b71268cd585fd1b"
@@ -2365,7 +2243,7 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.5.0, commander@^2.8.1, commander@^2.9.0:
+commander@^2.8.1, commander@^2.9.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
@@ -2477,7 +2355,7 @@ core-js-pure@3.1.2:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.1.2.tgz#62fc435f35b7374b9b782013cdcb2f97e9f6dffa"
   integrity sha512-5ckIdBF26B3ldK9PM177y2ZcATP2oweam9RskHSoqfZCrJ2As6wVg8zJ1zTriFsZf6clj/N1ThDFRGaomMsh9w==
 
-core-js@^2.4.0, core-js@^2.5.3, core-js@^2.5.7, core-js@^2.6.5:
+core-js@^2.4.0, core-js@^2.5.7, core-js@^2.6.5:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
   integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==
@@ -2777,14 +2655,6 @@ detect-newline@^2.1.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
 
-dicer@0.2.5:
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/dicer/-/dicer-0.2.5.tgz#5996c086bb33218c812c090bddc09cd12facb70f"
-  integrity sha1-WZbAhrszIYyBLAkL3cCc0S+stw8=
-  dependencies:
-    readable-stream "1.1.x"
-    streamsearch "0.1.2"
-
 dicer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/dicer/-/dicer-0.3.0.tgz#eacd98b3bfbf92e8ab5c2fdb71aaac44bb06b872"
@@ -2877,11 +2747,6 @@ dot-prop@^4.1.0:
   dependencies:
     is-obj "^1.0.0"
 
-dotenv@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-0.4.0.tgz#f6fb351363c2d92207245c737802c9ab5ae1495a"
-  integrity sha1-9vs1E2PC2SIHJFxzeALJq1rhSVo=
-
 dotenv@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
@@ -3279,11 +3144,6 @@ eventemitter3@^3.1.0:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
   integrity sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==
 
-events@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
-  integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=
-
 exec-sh@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.2.tgz#6738de2eb7c8e671d0366aea0b0db8c6f7d7391b"
@@ -3350,7 +3210,7 @@ expect@^24.8.0:
     jest-message-util "^24.8.0"
     jest-regex-util "^24.3.0"
 
-express@^4.0.0, express@^4.16.3, express@~4.17.1:
+express@^4.0.0, express@^4.17.1:
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
   integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
@@ -3605,11 +3465,6 @@ fresh@0.5.2:
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
-fs-capacitor@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/fs-capacitor/-/fs-capacitor-1.0.1.tgz#ff9dbfa14dfaf4472537720f19c3088ed9278df0"
-  integrity sha512-XdZK0Q78WP29Vm3FGgJRhRhrBm51PagovzWtW2kJ3Q6cYJbGtZqWSGTSPwvtEkyjIirFd7b8Yes/dpOYjt4RRQ==
-
 fs-capacitor@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/fs-capacitor/-/fs-capacitor-2.0.4.tgz#5a22e72d40ae5078b4fe64fe4d08c0d3fc88ad3c"
@@ -3786,11 +3641,6 @@ graphql-custom-directives@~0.2.14:
     moment "^2.22.2"
     numeral "^2.0.6"
 
-graphql-deduplicator@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/graphql-deduplicator/-/graphql-deduplicator-2.0.2.tgz#d8608161cf6be97725e178df0c41f6a1f9f778f3"
-  integrity sha512-0CGmTmQh4UvJfsaTPppJAcHwHln8Ayat7yXXxdnuWT+Mb1dBzkbErabCWzjXyKh/RefqlGTTA7EQOZHofMaKJA==
-
 graphql-extensions@0.7.7:
   version "0.7.7"
   resolved "https://registry.yarnpkg.com/graphql-extensions/-/graphql-extensions-0.7.7.tgz#19f4dea35391065de72b25def98f8396887bdf43"
@@ -3799,53 +3649,18 @@ graphql-extensions@0.7.7:
     "@apollographql/apollo-tools" "^0.3.6"
     apollo-server-env "2.4.0"
 
-graphql-extensions@^0.0.x, graphql-extensions@~0.0.9:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/graphql-extensions/-/graphql-extensions-0.0.10.tgz#34bdb2546d43f6a5bc89ab23c295ec0466c6843d"
-  integrity sha512-TnQueqUDCYzOSrpQb3q1ngDSP2otJSF+9yNLrQGPzkMsvnQ+v6e2d5tl+B35D4y+XpmvVnAn4T3ZK28mkILveA==
-  dependencies:
-    core-js "^2.5.3"
-    source-map-support "^0.5.1"
-
-graphql-import@^0.7.0:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/graphql-import/-/graphql-import-0.7.1.tgz#4add8d91a5f752d764b0a4a7a461fcd93136f223"
-  integrity sha512-YpwpaPjRUVlw2SN3OPljpWbVRWAhMAyfSba5U47qGMOSsPLi2gYeJtngGpymjm9nk57RFWEpjqwh4+dpYuFAPw==
-  dependencies:
-    lodash "^4.17.4"
-    resolve-from "^4.0.0"
-
 graphql-iso-date@~3.6.1:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/graphql-iso-date/-/graphql-iso-date-3.6.1.tgz#bd2d0dc886e0f954cbbbc496bbf1d480b57ffa96"
   integrity sha512-AwFGIuYMJQXOEAgRlJlFL4H1ncFM8n8XmoVDTNypNOZyQ8LFDG2ppMFlsS862BSTCDcSUfHp8PD3/uJhv7t59Q==
 
-graphql-middleware@3.0.2, graphql-middleware@~3.0.2:
+graphql-middleware@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/graphql-middleware/-/graphql-middleware-3.0.2.tgz#c8cdb67615eec02aec237b455e679f5fc973ddc4"
   integrity sha512-sRqu1sF+77z42z1OVM1QDHKQWnWY5K3nAgqWiZwx3U4tqNZprrDuXxSChPMliV343IrVkpYdejUYq9w24Ot3FA==
   dependencies:
     graphql-tools "^4.0.4"
 
-graphql-playground-html@1.6.12:
-  version "1.6.12"
-  resolved "https://registry.yarnpkg.com/graphql-playground-html/-/graphql-playground-html-1.6.12.tgz#8b3b34ab6013e2c877f0ceaae478fafc8ca91b85"
-  integrity sha512-yOYFwwSMBL0MwufeL8bkrNDgRE7eF/kTHiwrqn9FiR9KLcNIl1xw9l9a+6yIRZM56JReQOHpbQFXTZn1IuSKRg==
-
-graphql-playground-middleware-express@1.7.11:
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/graphql-playground-middleware-express/-/graphql-playground-middleware-express-1.7.11.tgz#bbffd784a37133bfa7165bdd8f429081dbf4bcf6"
-  integrity sha512-sKItB4s3FxqlwCgXdMfwRAfssSoo31bcFsGAAg/HzaZLicY6CDlofKXP8G5iPDerB6NaoAcAaBLutLzl9sd4fQ==
-  dependencies:
-    graphql-playground-html "1.6.12"
-
-graphql-playground-middleware-lambda@1.7.12:
-  version "1.7.12"
-  resolved "https://registry.yarnpkg.com/graphql-playground-middleware-lambda/-/graphql-playground-middleware-lambda-1.7.12.tgz#1b06440a288dbcd53f935b43e5b9ca2738a06305"
-  integrity sha512-fJ1Y0Ck5ctmfaQFoWv7vNnVP7We19P3miVmOT85YPrjpzbMYv0wPfxm4Zjt8nnqXr0KU9nGW53tz3K7/Lvzxtw==
-  dependencies:
-    graphql-playground-html "1.6.12"
-
 graphql-request@~1.8.2:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/graphql-request/-/graphql-request-1.8.2.tgz#398d10ae15c585676741bde3fc01d5ca948f8fbe"
@@ -3863,13 +3678,6 @@ graphql-shield@~6.0.3:
     object-hash "^1.3.1"
     yup "^0.27.0"
 
-graphql-subscriptions@^0.5.8:
-  version "0.5.8"
-  resolved "https://registry.yarnpkg.com/graphql-subscriptions/-/graphql-subscriptions-0.5.8.tgz#13a6143c546bce390404657dc73ca501def30aa7"
-  integrity sha512-0CaZnXKBw2pwnIbvmVckby5Ge5e2ecmjofhYCdyeACbCly2j3WXDP/pl+s+Dqd2GQFC7y99NB+53jrt55CKxYQ==
-  dependencies:
-    iterall "^1.2.1"
-
 graphql-subscriptions@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/graphql-subscriptions/-/graphql-subscriptions-1.0.0.tgz#475267694b3bd465af6477dbab4263a3f62702b8"
@@ -3893,7 +3701,7 @@ graphql-tools@^4.0.0, graphql-tools@^4.0.4:
     iterall "^1.1.3"
     uuid "^3.1.0"
 
-graphql-upload@^8.0.0, graphql-upload@^8.0.2:
+graphql-upload@^8.0.2:
   version "8.0.7"
   resolved "https://registry.yarnpkg.com/graphql-upload/-/graphql-upload-8.0.7.tgz#8644264e241529552ea4b3797e7ee15809cf01a3"
   integrity sha512-gi2yygbDPXbHPC7H0PNPqP++VKSoNoJO4UrXWq4T0Bi4IhyUd3Ycop/FSxhx2svWIK3jdXR/i0vi91yR1aAF0g==
@@ -3903,35 +3711,7 @@ graphql-upload@^8.0.0, graphql-upload@^8.0.2:
     http-errors "^1.7.2"
     object-path "^0.11.4"
 
-graphql-yoga@~1.18.0:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/graphql-yoga/-/graphql-yoga-1.18.0.tgz#2668278e94a0bd1b2ff8c60f928c4e18d62e381a"
-  integrity sha512-WEibitQA2oFTmD7XBO8/ps8DWeVpkzOzgbB3EvtM2oIpyGhPCzRZYrC7OS9MmijvRwLRXsgHImHWUm82ZrIOWA==
-  dependencies:
-    "@types/cors" "^2.8.4"
-    "@types/express" "^4.11.1"
-    "@types/graphql" "^14.0.0"
-    "@types/graphql-deduplicator" "^2.0.0"
-    "@types/zen-observable" "^0.5.3"
-    apollo-server-express "^1.3.6"
-    apollo-server-lambda "1.3.6"
-    apollo-upload-server "^7.0.0"
-    aws-lambda "^0.1.2"
-    body-parser-graphql "1.1.0"
-    cors "^2.8.4"
-    express "^4.16.3"
-    graphql "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0"
-    graphql-deduplicator "^2.0.1"
-    graphql-import "^0.7.0"
-    graphql-middleware "3.0.2"
-    graphql-playground-middleware-express "1.7.11"
-    graphql-playground-middleware-lambda "1.7.12"
-    graphql-subscriptions "^0.5.8"
-    graphql-tools "^4.0.0"
-    graphql-upload "^8.0.0"
-    subscriptions-transport-ws "^0.9.8"
-
-"graphql@^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0", graphql@^14.2.1, graphql@~14.4.2:
+graphql@^14.2.1, graphql@~14.4.2:
   version "14.4.2"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-14.4.2.tgz#553a7d546d524663eda49ed6df77577be3203ae3"
   integrity sha512-6uQadiRgnpnSS56hdZUSvFrVcQ6OF9y6wkxJfKquFtHlnl7+KSuWwSJsdwiK1vybm1HgcdbpGkCpvhvsVQ0UZQ==
@@ -4138,17 +3918,6 @@ http-errors@1.7.2, http-errors@^1.7.2, http-errors@~1.7.2:
     statuses ">= 1.5.0 < 2"
     toidentifier "1.0.0"
 
-http-errors@^1.7.0:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.1.tgz#6a4ffe5d35188e1c39f872534690585852e1f027"
-  integrity sha512-jWEUgtZWGSMba9I1N3gc1HmvpBUaNC9vDdA46yScAdp+C5rdEuKWUBLWTQpW9FwSWSbYYs++b6SDCxf9UEJzfw==
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.0"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
-
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@@ -4165,16 +3934,6 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-ieee754@1.1.8:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
-  integrity sha1-vjPUCsEO8ZJnAfbwii2G+/0a0+Q=
-
-ieee754@^1.1.4:
-  version "1.1.12"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b"
-  integrity sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA==
-
 ienoopen@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ienoopen/-/ienoopen-1.1.0.tgz#411e5d530c982287dbdc3bb31e7a9c9e32630974"
@@ -4241,7 +4000,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
@@ -4535,11 +4294,6 @@ is-windows@^1.0.0, is-windows@^1.0.2:
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
 
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
-  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
-
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -4976,11 +4730,6 @@ jest@~24.8.0:
     import-local "^2.0.0"
     jest-cli "^24.8.0"
 
-jmespath@0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217"
-  integrity sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=
-
 joi@^13.7.0:
   version "13.7.0"
   resolved "https://registry.yarnpkg.com/joi/-/joi-13.7.0.tgz#cfd85ebfe67e8a1900432400b4d03bbd93fb879f"
@@ -5359,7 +5108,7 @@ lodash@=3.10.1:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
   integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=
 
-lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.14:
+lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.5, lodash@~4.17.14:
   version "4.17.14"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba"
   integrity sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==
@@ -6458,11 +6207,6 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
-punycode@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
-  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
-
 punycode@2.x.x, punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
@@ -6483,11 +6227,6 @@ qs@~6.5.2:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
-querystring@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
-  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
-
 range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
@@ -6572,16 +6311,6 @@ read-pkg@^3.0.0:
     normalize-package-data "^2.3.2"
     path-type "^3.0.0"
 
-readable-stream@1.1.x:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
-  integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
 readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.2.3, readable-stream@^2.3.5:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
@@ -6931,11 +6660,6 @@ sanitize-html@~1.20.1:
     srcset "^1.0.0"
     xtend "^4.0.1"
 
-sax@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
-  integrity sha1-e45lYZCyKOgaZq6nSEgNgozS03o=
-
 sax@>=0.6.0, sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -7035,11 +6759,6 @@ set-value@^2.0.0:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setprototypeof@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
-  integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
-
 setprototypeof@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
@@ -7152,7 +6871,7 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-support@^0.5.1, source-map-support@^0.5.6, source-map-support@^0.5.9:
+source-map-support@^0.5.6, source-map-support@^0.5.9:
   version "0.5.9"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.9.tgz#41bc953b2534267ea2d605bccfa7bfa3111ced5f"
   integrity sha512-gR6Rw4MvUlYy83vP0vxoVNzM6t8MUXqNuRsuBmBHQDu1Fh6X015FrLdgoDKcNdkwGubozq0P4N0Q37UyFVr1EA==
@@ -7358,11 +7077,6 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
-  integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
-
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -7406,7 +7120,7 @@ strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
-subscriptions-transport-ws@^0.9.11, subscriptions-transport-ws@^0.9.8:
+subscriptions-transport-ws@^0.9.11:
   version "0.9.15"
   resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.15.tgz#68a8b7ba0037d8c489fb2f5a102d1494db297d0d"
   integrity sha512-f9eBfWdHsePQV67QIX+VRhf++dn1adyC/PZHP6XI5AfKnZ4n0FW+v5omxwdHVpd4xq2ZijaHEcmlQrhBY79ZWQ==
@@ -7837,14 +7551,6 @@ url-parse-lax@^1.0.0:
   dependencies:
     prepend-http "^1.0.1"
 
-url@0.10.3:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.10.3.tgz#021e4d9c7705f21bbf37d03ceb58767402774c64"
-  integrity sha1-Ah5NnHcF8hu/N9A861h2dAJ3TGQ=
-  dependencies:
-    punycode "1.3.2"
-    querystring "0.2.0"
-
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -7880,11 +7586,6 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
-uuid@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
-  integrity sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g==
-
 uuid@^3.1.0, uuid@^3.3.2, uuid@~3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
@@ -8156,7 +7857,7 @@ xml-name-validator@^3.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
-xml2js@0.4.19, xml2js@^0.4.17:
+xml2js@^0.4.17:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
   integrity sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==

From 268ec332b486503a6e104657d858297a70b4f42a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Sat, 13 Jul 2019 19:21:59 +0200
Subject: [PATCH 28/39] Add a first test with `apollo-server-testing`

---
 backend/src/server.spec.js | 43 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 backend/src/server.spec.js

diff --git a/backend/src/server.spec.js b/backend/src/server.spec.js
new file mode 100644
index 000000000..6d4ef546d
--- /dev/null
+++ b/backend/src/server.spec.js
@@ -0,0 +1,43 @@
+import { createTestClient } from 'apollo-server-testing'
+import createServer from './server'
+
+/**
+ * This file is for demonstration purposes. It does not really test the
+ * `isLoggedIn` query but demonstrates how we can use `apollo-server-testing`.
+ * All we need to do is to get an instance of `ApolloServer` and maybe we want
+ * stub out `context` as shown below.
+ *
+ */
+
+let user
+let action
+describe('isLoggedIn', () => {
+  beforeEach(() => {
+    action = async () => {
+      const { server } = createServer({
+        context: () => {
+          return {
+            user,
+          }
+        },
+      })
+      const { query } = createTestClient(server)
+
+      const isLoggedIn = `{ isLoggedIn }`
+      return query({ query: isLoggedIn })
+    }
+  })
+
+  it('returns false', async () => {
+    const expected = expect.objectContaining({ data: { isLoggedIn: false } })
+    await expect(action()).resolves.toEqual(expected)
+  })
+
+  describe('when authenticated', () => {
+    it('returns true', async () => {
+      user = { id: '123' }
+      const expected = expect.objectContaining({ data: { isLoggedIn: true } })
+      await expect(action()).resolves.toEqual(expected)
+    })
+  })
+})

From 585e798dc0cbabfff5da2c9da0251366c969a028 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Sat, 13 Jul 2019 23:00:41 +0200
Subject: [PATCH 29/39] Fix #822 by updating the counts of the user

The load more button depends on the total of the posts available.
Removing posts changes the total counts, so we have to manually update
it.
---
 webapp/pages/profile/_id/_slug.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index ce9ba422b..9026116cb 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -202,11 +202,11 @@
 
           <template v-if="activePosts.length">
             <hc-post-card
-              v-for="(post, index) in activePosts"
+              v-for="post in activePosts"
               :key="post.id"
               :post="post"
               :width="{ base: '100%', md: '100%', xl: '50%' }"
-              @removePostFromList="activePosts.splice(index, 1)"
+              @removePostFromList="removePostFromList"
             />
           </template>
           <template v-else-if="$apollo.loading">
@@ -331,6 +331,10 @@ export default {
     },
   },
   methods: {
+    removePostFromList(index) {
+      this.activePosts.splice(index, 1)
+      this.$apollo.queries.User.refetch()
+    },
     handleTab(tab) {
       this.tabActive = tab
       this.Post = null

From 8f17045cdb24811887156a63f10169cbfb6e5cba Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 15 Jul 2019 07:33:22 -0300
Subject: [PATCH 30/39] Update tests to make more reliable

- hope you are ok with this @roschaefer, it was failing locally and I guess it passed the build because half the time the array is returned in the order expected while half the time not.
---
 backend/src/schema/resolvers/rewards.spec.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/backend/src/schema/resolvers/rewards.spec.js b/backend/src/schema/resolvers/rewards.spec.js
index 38f485ef7..7ea8d7e7b 100644
--- a/backend/src/schema/resolvers/rewards.spec.js
+++ b/backend/src/schema/resolvers/rewards.spec.js
@@ -106,10 +106,11 @@ describe('rewards', () => {
           id: 'indiegogo_en_racoon',
           icon: '/img/badges/indiegogo_en_racoon.svg',
         })
+        const badges = [{ id: 'indiegogo_en_racoon' }, { id: 'indiegogo_en_rhino' }]
         const expected = {
           reward: {
             id: 'u1',
-            badges: [{ id: 'indiegogo_en_racoon' }, { id: 'indiegogo_en_rhino' }],
+            badges: expect.arrayContaining(badges),
           },
         }
         await client.request(mutation, variables)

From d42083a32ef4c6d4cdce04e2f4e907f23a8b6c1f Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 15 Jul 2019 09:55:09 -0300
Subject: [PATCH 31/39] Move header to left, add border left
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 .../FilterPosts/FilterPostsMenuItems.vue        | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/webapp/components/FilterPosts/FilterPostsMenuItems.vue b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
index 601d3dcca..4927a1060 100644
--- a/webapp/components/FilterPosts/FilterPostsMenuItems.vue
+++ b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
@@ -10,7 +10,6 @@
         :width="{ base: '100%', sm: '100%', md: '100%', lg: '5%' }"
         class="categories-menu-item"
       >
-        <ds-space margin-bottom="x-small" />
         <ds-flex>
           <ds-flex-item width="10%" />
           <ds-flex-item width="100%">
@@ -26,7 +25,11 @@
           </ds-flex-item>
         </ds-flex>
       </ds-flex-item>
-      <ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '7%' }" />
+      <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"
@@ -94,11 +97,12 @@ export default {
 <style lang="scss">
 #filter-posts-header {
   display: block;
-  text-align: center;
 }
+
 .categories-menu-item {
   text-align: center;
 }
+
 .categories-menu {
   justify-content: center;
 }
@@ -106,4 +110,11 @@ export default {
 .category-labels {
   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 b0f999ac059a9e896d50b2779a07b6f7b702cf25 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 15 Jul 2019 11:06:56 -0300
Subject: [PATCH 32/39] Fix styling of navbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Follow @Tirokk suggestions

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/components/FilterPosts/FilterPosts.vue   |  4 ++--
 .../FilterPosts/FilterPostsMenuItems.vue        |  6 ++++++
 webapp/layouts/default.vue                      | 17 +++++++++++------
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 2e957cd56..56c95a21a 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -1,8 +1,8 @@
 <template>
   <dropdown ref="menu" :placement="placement" :offset="offset">
     <a slot="default" slot-scope="{ toggleMenu }" href="#" @click.prevent="toggleMenu()">
-      <ds-icon style="margin: 5px 0px 0px 10px;" name="filter" size="large" />
-      <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
+      <ds-icon style="margin: 12px 0px 0px 10px;" name="filter" size="large" />
+      <ds-icon style="margin: 7px 0px 0px 2px" size="xx-small" name="angle-down" />
     </a>
     <template slot="popover">
       <filter-posts-menu-items :chunk="chunk" @filterPosts="filterPosts" />
diff --git a/webapp/components/FilterPosts/FilterPostsMenuItems.vue b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
index 4927a1060..593781cdb 100644
--- a/webapp/components/FilterPosts/FilterPostsMenuItems.vue
+++ b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
@@ -117,4 +117,10 @@ export default {
     margin: 9px 0px 40px 0px;
   }
 }
+
+@media only screen and (max-width: 960px) {
+  #filter-posts-header {
+    text-align: center;
+  }
+}
 </style>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index a52f2c1d6..33c5c25a1 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -4,7 +4,7 @@
       <ds-container class="main-navigation-container" style="padding: 10px 10px;">
         <div>
           <ds-flex class="main-navigation-flex">
-            <ds-flex-item :width="{ lg: '5%' }" />
+            <ds-flex-item :width="{ lg: '3.5%' }" />
             <ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
               <a @click="redirectToRoot">
                 <ds-logo />
@@ -17,7 +17,7 @@
               <ds-button icon="bars" @click="toggleMobileMenuView" right />
             </ds-flex-item>
             <ds-flex-item
-              :width="{ base: '100%', sm: '100%', md: '50%', lg: '45%' }"
+              :width="{ base: '100%', sm: '100%', md: '50%', lg: '50%' }"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             >
               <div id="nav-search-box" v-on:click="unfolded" @blur.capture="foldedup">
@@ -37,11 +37,12 @@
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             >
               <no-ssr>
-                <filter-posts placement="bottom-end" offset="23" :categories="categories" />
+                <filter-posts placement="top-start" offset="8" :categories="categories" />
               </no-ssr>
             </ds-flex-item>
+            <ds-flex-item :width="{ base: '100%', sm: '100%', md: '10%', lg: '2%' }" />
             <ds-flex-item
-              :width="{ base: '100%', sm: '100%', md: '100%', lg: '20%' }"
+              :width="{ base: '100%', sm: '100%', md: '100%', lg: '13%' }"
               style="background-color:white"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             >
@@ -53,14 +54,14 @@
                 }"
               >
                 <no-ssr>
-                  <locale-switch class="topbar-locale-switch" placement="bottom" offset="23" />
+                  <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
                 </no-ssr>
                 <template v-if="isLoggedIn">
                   <no-ssr>
                     <notification-menu />
                   </no-ssr>
                   <no-ssr>
-                    <dropdown class="avatar-menu">
+                    <dropdown class="avatar-menu" offset="8">
                       <template slot="default" slot-scope="{ toggleMenu }">
                         <a
                           class="avatar-menu-trigger"
@@ -300,6 +301,10 @@ export default {
   float: right;
 }
 
+.avatar-menu {
+  margin: 2px 0px 0px 5px;
+}
+
 .avatar-menu-trigger {
   user-select: none;
   display: flex;

From bb4532827a9f2335f4a166d154fb077851cf0b9a Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 15 Jul 2019 11:20:28 -0300
Subject: [PATCH 33/39] Refactor search input, navbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- fix search input width on desktop
- removed adding removing classes on focus/blur search input
- fix notifications dropdown on mobile

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/components/FilterPosts/FilterPosts.vue |  4 ++--
 .../notifications/NotificationMenu/index.vue  |  5 +++-
 webapp/layouts/default.vue                    | 24 ++++---------------
 3 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 56c95a21a..01388ad6c 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -22,8 +22,8 @@ export default {
     FilterPostsMenuItems,
   },
   props: {
-    placement: { type: String, default: 'bottom-start' },
-    offset: { type: [String, Number], default: '16' },
+    placement: { type: String },
+    offset: { type: [String, Number] },
     categories: { type: Array, default: () => [] },
   },
   data() {
diff --git a/webapp/components/notifications/NotificationMenu/index.vue b/webapp/components/notifications/NotificationMenu/index.vue
index 20a9a7074..a7c0cc4b7 100644
--- a/webapp/components/notifications/NotificationMenu/index.vue
+++ b/webapp/components/notifications/NotificationMenu/index.vue
@@ -2,7 +2,7 @@
   <ds-button v-if="totalNotifications <= 0" class="notifications-menu" disabled icon="bell">
     {{ totalNotifications }}
   </ds-button>
-  <dropdown v-else class="notifications-menu">
+  <dropdown v-else class="notifications-menu" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
       <ds-button primary icon="bell" @click.prevent="toggleMenu">
         {{ totalNotifications }}
@@ -48,6 +48,9 @@ export default {
     NotificationList,
     Dropdown,
   },
+  props: {
+    placement: { type: String },
+  },
   computed: {
     totalNotifications() {
       return (this.notifications || []).length
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 33c5c25a1..7c7669496 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -17,10 +17,10 @@
               <ds-button icon="bars" @click="toggleMobileMenuView" right />
             </ds-flex-item>
             <ds-flex-item
-              :width="{ base: '100%', sm: '100%', md: '50%', lg: '50%' }"
+              :width="{ base: '85%', sm: '85%', md: '50%', lg: '50%' }"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             >
-              <div id="nav-search-box" v-on:click="unfolded" @blur.capture="foldedup">
+              <div id="nav-search-box">
                 <search-input
                   id="nav-search"
                   :delay="300"
@@ -33,7 +33,7 @@
               </div>
             </ds-flex-item>
             <ds-flex-item
-              :width="{ base: '100%', sm: '100%', md: '10%', lg: '10%' }"
+              :width="{ base: '15%', sm: '15%', md: '10%', lg: '10%' }"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             >
               <no-ssr>
@@ -58,7 +58,7 @@
                 </no-ssr>
                 <template v-if="isLoggedIn">
                   <no-ssr>
-                    <notification-menu />
+                    <notification-menu placement="top" />
                   </no-ssr>
                   <no-ssr>
                     <dropdown class="avatar-menu" offset="8">
@@ -240,12 +240,6 @@ export default {
       }
       return this.$route.path.indexOf(url) === 0
     },
-    unfolded: function() {
-      document.getElementById('nav-search-box').classList.add('unfolded')
-    },
-    foldedup: function() {
-      document.getElementById('nav-search-box').classList.remove('unfolded')
-    },
     toggleMobileMenuView() {
       this.toggleMobileMenu = !this.toggleMobileMenu
     },
@@ -264,14 +258,6 @@ export default {
   },
 }
 </script>
-<style>
-.unfolded {
-  position: absolute;
-  right: 0px;
-  left: 0px;
-  z-index: 1;
-}
-</style>
 
 <style lang="scss">
 .topbar-locale-switch {
@@ -283,7 +269,7 @@ export default {
 
 .main-container {
   padding-top: 6rem;
-  padding-botton: 5rem;
+  padding-bottom: 5rem;
 }
 
 .main-navigation {

From d59c94c9f3f1239f659adbc8144b1cff28f8d363 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 15 Jul 2019 18:07:01 +0200
Subject: [PATCH 34/39] Keep gql syntax highglighting

... with custom fake template string
---
 backend/src/jest/helpers.js                        |  6 ++++++
 .../handleHtmlContent/handleContentData.spec.js    | 14 +++++++-------
 backend/src/schema/resolvers/comments.spec.js      | 10 +++++-----
 backend/src/schema/resolvers/rewards.spec.js       | 10 +++++-----
 backend/src/schema/resolvers/socialMedia.spec.js   |  6 +++---
 backend/src/schema/resolvers/users.spec.js         |  4 ++--
 6 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/backend/src/jest/helpers.js b/backend/src/jest/helpers.js
index e50f30c64..380aedd16 100644
--- a/backend/src/jest/helpers.js
+++ b/backend/src/jest/helpers.js
@@ -15,3 +15,9 @@ export async function login(variables) {
     authorization: `Bearer ${response.login}`,
   }
 }
+
+//* This is a fake ES2015 template string, just to benefit of syntax
+// highlighting of `gql` template strings in certain editors.
+export function gql(strings) {
+  return strings.join('')
+}
diff --git a/backend/src/middleware/handleHtmlContent/handleContentData.spec.js b/backend/src/middleware/handleHtmlContent/handleContentData.spec.js
index e4292bb8f..f2e3c2303 100644
--- a/backend/src/middleware/handleHtmlContent/handleContentData.spec.js
+++ b/backend/src/middleware/handleHtmlContent/handleContentData.spec.js
@@ -1,5 +1,5 @@
 import { GraphQLClient } from 'graphql-request'
-import { host, login } from '../../jest/helpers'
+import { host, login, gql } from '../../jest/helpers'
 import Factory from '../../seed/factories'
 
 const factory = Factory()
@@ -20,7 +20,7 @@ afterEach(async () => {
 })
 
 describe('currentUser { notifications }', () => {
-  const query = `
+  const query = gql`
     query($read: Boolean) {
       currentUser {
         notifications(read: $read, orderBy: createdAt_desc) {
@@ -67,7 +67,7 @@ describe('currentUser { notifications }', () => {
           'Hey <a class="mention" href="/profile/you/al-capone">@al-capone</a> how do you do?'
 
         beforeEach(async () => {
-          const createPostMutation = `
+          const createPostMutation = gql`
             mutation($title: String!, $content: String!) {
               CreatePost(title: $title, content: $content) {
                 id
@@ -116,7 +116,7 @@ describe('currentUser { notifications }', () => {
             // during development and thought: A feature not a bug! This way we
             // can encode a re-mentioning of users when you edit your post or
             // comment.
-            const updatePostMutation = `
+            const updatePostMutation = gql`
               mutation($id: ID!, $title: String!, $content: String!) {
                 UpdatePost(id: $id, content: $content, title: $title) {
                   title
@@ -172,7 +172,7 @@ describe('Hashtags', () => {
   const postTitle = 'Two Hashtags'
   const postContent =
     '<p>Hey Dude, <a class="hashtag" href="/search/hashtag/Democracy">#Democracy</a> should work equal for everybody!? That seems to be the only way to have equal <a class="hashtag" href="/search/hashtag/Liberty">#Liberty</a> for everyone.</p>'
-  const postWithHastagsQuery = `
+  const postWithHastagsQuery = gql`
     query($id: ID) {
       Post(id: $id) {
         tags {
@@ -185,7 +185,7 @@ describe('Hashtags', () => {
   const postWithHastagsVariables = {
     id: postId,
   }
-  const createPostMutation = `
+  const createPostMutation = gql`
     mutation($postId: ID, $postTitle: String!, $postContent: String!) {
       CreatePost(id: $postId, title: $postTitle, content: $postContent) {
         id
@@ -242,7 +242,7 @@ describe('Hashtags', () => {
         // The already existing Hashtag has no class at this point.
         const updatedPostContent =
           '<p>Hey Dude, <a class="hashtag" href="/search/hashtag/Elections">#Elections</a> should work equal for everybody!? That seems to be the only way to have equal <a href="/search/hashtag/Liberty">#Liberty</a> for everyone.</p>'
-        const updatePostMutation = `
+        const updatePostMutation = gql`
           mutation($postId: ID!, $postTitle: String!, $updatedPostContent: String!) {
             UpdatePost(id: $postId, title: $postTitle, content: $updatedPostContent) {
               id
diff --git a/backend/src/schema/resolvers/comments.spec.js b/backend/src/schema/resolvers/comments.spec.js
index 5b2da7781..a12e2dfcc 100644
--- a/backend/src/schema/resolvers/comments.spec.js
+++ b/backend/src/schema/resolvers/comments.spec.js
@@ -1,6 +1,6 @@
 import { GraphQLClient } from 'graphql-request'
 import Factory from '../../seed/factories'
-import { host, login } from '../../jest/helpers'
+import { host, login, gql } from '../../jest/helpers'
 
 const factory = Factory()
 let client
@@ -25,7 +25,7 @@ afterEach(async () => {
 })
 
 describe('CreateComment', () => {
-  const createCommentMutation = `
+  const createCommentMutation = gql`
     mutation($postId: ID!, $content: String!) {
       CreateComment(postId: $postId, content: $content) {
         id
@@ -33,7 +33,7 @@ describe('CreateComment', () => {
       }
     }
   `
-  const createPostMutation = `
+  const createPostMutation = gql`
     mutation($id: ID!, $title: String!, $content: String!) {
       CreatePost(id: $id, title: $title, content: $content) {
         id
@@ -87,7 +87,7 @@ describe('CreateComment', () => {
     it('assigns the authenticated user as author', async () => {
       await client.request(createCommentMutation, createCommentVariables)
 
-      const { User } = await client.request(`
+      const { User } = await client.request(gql`
         {
           User(name: "TestUser") {
             comments {
@@ -188,7 +188,7 @@ describe('CreateComment', () => {
 })
 
 describe('DeleteComment', () => {
-  const deleteCommentMutation = `
+  const deleteCommentMutation = gql`
     mutation($id: ID!) {
       DeleteComment(id: $id) {
         id
diff --git a/backend/src/schema/resolvers/rewards.spec.js b/backend/src/schema/resolvers/rewards.spec.js
index 7ea8d7e7b..3b94e93aa 100644
--- a/backend/src/schema/resolvers/rewards.spec.js
+++ b/backend/src/schema/resolvers/rewards.spec.js
@@ -1,6 +1,6 @@
 import { GraphQLClient } from 'graphql-request'
 import Factory from '../../seed/factories'
-import { host, login } from '../../jest/helpers'
+import { host, login, gql } from '../../jest/helpers'
 
 const factory = Factory()
 let user
@@ -42,7 +42,7 @@ describe('rewards', () => {
   })
 
   describe('reward', () => {
-    const mutation = `
+    const mutation = gql`
       mutation($from: ID!, $to: ID!) {
         reward(badgeKey: $from, userId: $to) {
           id
@@ -141,7 +141,7 @@ describe('rewards', () => {
         await client.request(mutation, variables)
         await client.request(mutation, variables)
 
-        const query = `
+        const query = gql`
           {
             User(id: "u1") {
               badgesCount
@@ -178,7 +178,7 @@ describe('rewards', () => {
     })
     const expected = { unreward: { id: 'u1', badges: [] } }
 
-    const mutation = `
+    const mutation = gql`
       mutation($from: ID!, $to: ID!) {
         unreward(badgeKey: $from, userId: $to) {
           id
@@ -191,7 +191,7 @@ describe('rewards', () => {
 
     describe('check test setup', () => {
       it('user has one badge', async () => {
-        const query = `
+        const query = gql`
           {
             User(id: "u1") {
               badgesCount
diff --git a/backend/src/schema/resolvers/socialMedia.spec.js b/backend/src/schema/resolvers/socialMedia.spec.js
index f65552e5c..7ec35a08f 100644
--- a/backend/src/schema/resolvers/socialMedia.spec.js
+++ b/backend/src/schema/resolvers/socialMedia.spec.js
@@ -1,13 +1,13 @@
 import { GraphQLClient } from 'graphql-request'
 import Factory from '../../seed/factories'
-import { host, login } from '../../jest/helpers'
+import { host, login, gql } from '../../jest/helpers'
 
 const factory = Factory()
 
 describe('SocialMedia', () => {
   let client
   let headers
-  const mutationC = `
+  const mutationC = gql`
     mutation($url: String!) {
       CreateSocialMedia(url: $url) {
         id
@@ -15,7 +15,7 @@ describe('SocialMedia', () => {
       }
     }
   `
-  const mutationD = `
+  const mutationD = gql`
     mutation($id: ID!) {
       DeleteSocialMedia(id: $id) {
         id
diff --git a/backend/src/schema/resolvers/users.spec.js b/backend/src/schema/resolvers/users.spec.js
index 022f836cd..fff6acadb 100644
--- a/backend/src/schema/resolvers/users.spec.js
+++ b/backend/src/schema/resolvers/users.spec.js
@@ -1,6 +1,6 @@
 import { GraphQLClient } from 'graphql-request'
-import { login, host } from '../../jest/helpers'
 import Factory from '../../seed/factories'
+import { host, login, gql } from '../../jest/helpers'
 
 const factory = Factory()
 let client
@@ -130,7 +130,7 @@ describe('users', () => {
   describe('DeleteUser', () => {
     let deleteUserVariables
     let asAuthor
-    const deleteUserMutation = `
+    const deleteUserMutation = gql`
       mutation($id: ID!, $resource: [Deletable]) {
         DeleteUser(id: $id, resource: $resource) {
           id

From 2736738c361d454b61670bda7951f79fdb2eb711 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 15 Jul 2019 18:26:23 +0200
Subject: [PATCH 35/39] Fix @Tirokk's suggestions

Wow @Tirokk that was a good catch! I thought that the emitting side
knows the `index`, but no, it only emits `removePostFromList` and that's
it. In order to delete the right post, we have to pass in the `index`
ourselves. So, the caller of the function is the page component itself.

I didn't see the error myself, because in Javascript if you parse
`undefined` or `null` as Integer, you get 0 and it does not raise an
error.
---
 webapp/pages/profile/_id/_slug.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 9026116cb..6c8be8661 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -202,11 +202,11 @@
 
           <template v-if="activePosts.length">
             <hc-post-card
-              v-for="post in activePosts"
+              v-for="(post, index) in activePosts"
               :key="post.id"
               :post="post"
               :width="{ base: '100%', md: '100%', xl: '50%' }"
-              @removePostFromList="removePostFromList"
+              @removePostFromList="removePostFromList(index)"
             />
           </template>
           <template v-else-if="$apollo.loading">

From 2dca04523d1b9bb59577d04f5ee6602520e7a174 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 15 Jul 2019 15:04:19 -0300
Subject: [PATCH 36/39] Remove key request in badge queries

- clean up from `PR` which uses id, not key
---
 webapp/graphql/PostQuery.js | 1 -
 webapp/store/posts.js       | 1 -
 2 files changed, 2 deletions(-)

diff --git a/webapp/graphql/PostQuery.js b/webapp/graphql/PostQuery.js
index bb86826cc..cac80d9b1 100644
--- a/webapp/graphql/PostQuery.js
+++ b/webapp/graphql/PostQuery.js
@@ -106,7 +106,6 @@ export const filterPosts = i18n => {
         }
         badges {
           id
-          key
           icon
         }
       }
diff --git a/webapp/store/posts.js b/webapp/store/posts.js
index 7112a8add..025a620f2 100644
--- a/webapp/store/posts.js
+++ b/webapp/store/posts.js
@@ -52,7 +52,6 @@ export const actions = {
               }
               badges {
                 id
-                key
                 icon
               }
             }

From db84afa20b039edd0382b6fb4f494fa8ab5302cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 15 Jul 2019 23:10:11 +0200
Subject: [PATCH 37/39] Move secrets into secrets kubernetes template

---
 .../human-connection/templates/configmap.template.yaml       | 4 ----
 deployment/human-connection/templates/secrets.template.yaml  | 5 ++---
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/deployment/human-connection/templates/configmap.template.yaml b/deployment/human-connection/templates/configmap.template.yaml
index 2b7ffeeb8..1e8b37b06 100644
--- a/deployment/human-connection/templates/configmap.template.yaml
+++ b/deployment/human-connection/templates/configmap.template.yaml
@@ -4,14 +4,10 @@
   data:
     SMTP_HOST: "mailserver.human-connection"
     SMTP_PORT: "25"
-    SMTP_USERNAME: ""
-    SMTP_PASSWORD: ""
     GRAPHQL_PORT: "4000"
     GRAPHQL_URI: "http://nitro-backend.human-connection:4000"
     MOCKS: "false"
     NEO4J_URI: "bolt://nitro-neo4j.human-connection:7687"
-    NEO4J_USERNAME: "neo4j"
-    NEO4J_PASSWORD: "neo4j"
     NEO4J_AUTH: "none"
     CLIENT_URI: "https://nitro-staging.human-connection.org"
   metadata:
diff --git a/deployment/human-connection/templates/secrets.template.yaml b/deployment/human-connection/templates/secrets.template.yaml
index 9f59b948a..6a6206189 100644
--- a/deployment/human-connection/templates/secrets.template.yaml
+++ b/deployment/human-connection/templates/secrets.template.yaml
@@ -5,11 +5,10 @@ data:
   MONGODB_PASSWORD: "TU9OR09EQl9QQVNTV09SRA=="
   PRIVATE_KEY_PASSPHRASE: "YTdkc2Y3OHNhZGc4N2FkODdzZmFnc2FkZzc4"
   MAPBOX_TOKEN: "cGsuZXlKMUlqb2lhSFZ0WVc0dFkyOXVibVZqZEdsdmJpSXNJbUVpT2lKamFqbDBjbkJ1Ykdvd2VUVmxNM1Z3WjJsek5UTnVkM1p0SW4wLktaOEtLOWw3MG9talhiRWtrYkhHc1EK"
-  SMTP_HOST:
-  SMTP_PORT: 587
   SMTP_USERNAME:
   SMTP_PASSWORD:
-  SMTP_IGNORE_TLS:
+  NEO4J_USERNAME:
+  NEO4J_PASSWORD:
 metadata:
   name: human-connection
   namespace: human-connection

From 033ff572eeb8b2e5b4e7bd03c3e38e193e272844 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Tue, 16 Jul 2019 04:23:35 +0000
Subject: [PATCH 38/39] Bump eslint-plugin-jest from 22.7.2 to 22.8.0 in
 /webapp

Bumps [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest) from 22.7.2 to 22.8.0.
- [Release notes](https://github.com/jest-community/eslint-plugin-jest/releases)
- [Changelog](https://github.com/jest-community/eslint-plugin-jest/blob/master/CHANGELOG.md)
- [Commits](https://github.com/jest-community/eslint-plugin-jest/compare/v22.7.2...v22.8.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
---
 webapp/package.json | 2 +-
 webapp/yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/webapp/package.json b/webapp/package.json
index 1f9119724..48e47c55a 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -94,7 +94,7 @@
     "eslint-config-standard": "~12.0.0",
     "eslint-loader": "~2.2.1",
     "eslint-plugin-import": "~2.18.0",
-    "eslint-plugin-jest": "~22.7.2",
+    "eslint-plugin-jest": "~22.8.0",
     "eslint-plugin-node": "~9.1.0",
     "eslint-plugin-prettier": "~3.1.0",
     "eslint-plugin-promise": "~4.2.1",
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 27f6dc033..fbe551d1c 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -4320,10 +4320,10 @@ eslint-plugin-import@~2.18.0:
     read-pkg-up "^2.0.0"
     resolve "^1.11.0"
 
-eslint-plugin-jest@~22.7.2:
-  version "22.7.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.7.2.tgz#7ab118a66a34e46ae5e16a128b5d24fd28b43dca"
-  integrity sha512-Aecqe3ulBVI7amgOycVI8ZPL8o0SnGHOf3zn2/Ciu8TXyXDHcjtwD3hOs3ss/Qh/VAwlW/DMcuiXg5btgF+XMA==
+eslint-plugin-jest@~22.8.0:
+  version "22.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.8.0.tgz#242ef5459e8da25d2c41438e95eb546e03d7fae1"
+  integrity sha512-2VftZMfILmlhL3VMq5ptHRIuyyXb3ShDEDb1J1UjvWNzm4l+UK/YmwNuTuJcM0gv8pJuOfiR/8ZptJ8Ou68pFw==
 
 eslint-plugin-node@~9.1.0:
   version "9.1.0"

From 9c26bb8f90f7dd6d7d454d031af5de8242eee9b2 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Tue, 16 Jul 2019 04:24:11 +0000
Subject: [PATCH 39/39] Bump eslint-plugin-jest from 22.7.2 to 22.8.0 in
 /backend

Bumps [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest) from 22.7.2 to 22.8.0.
- [Release notes](https://github.com/jest-community/eslint-plugin-jest/releases)
- [Changelog](https://github.com/jest-community/eslint-plugin-jest/blob/master/CHANGELOG.md)
- [Commits](https://github.com/jest-community/eslint-plugin-jest/compare/v22.7.2...v22.8.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
---
 backend/package.json | 2 +-
 backend/yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/backend/package.json b/backend/package.json
index 48fc5e787..b8b0c1de8 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -99,7 +99,7 @@
     "eslint-config-prettier": "~6.0.0",
     "eslint-config-standard": "~12.0.0",
     "eslint-plugin-import": "~2.18.0",
-    "eslint-plugin-jest": "~22.7.2",
+    "eslint-plugin-jest": "~22.8.0",
     "eslint-plugin-node": "~9.1.0",
     "eslint-plugin-prettier": "~3.1.0",
     "eslint-plugin-promise": "~4.2.1",
diff --git a/backend/yarn.lock b/backend/yarn.lock
index 1df53a7bb..268256625 100644
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
@@ -3124,10 +3124,10 @@ eslint-plugin-import@~2.18.0:
     read-pkg-up "^2.0.0"
     resolve "^1.11.0"
 
-eslint-plugin-jest@~22.7.2:
-  version "22.7.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.7.2.tgz#7ab118a66a34e46ae5e16a128b5d24fd28b43dca"
-  integrity sha512-Aecqe3ulBVI7amgOycVI8ZPL8o0SnGHOf3zn2/Ciu8TXyXDHcjtwD3hOs3ss/Qh/VAwlW/DMcuiXg5btgF+XMA==
+eslint-plugin-jest@~22.8.0:
+  version "22.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.8.0.tgz#242ef5459e8da25d2c41438e95eb546e03d7fae1"
+  integrity sha512-2VftZMfILmlhL3VMq5ptHRIuyyXb3ShDEDb1J1UjvWNzm4l+UK/YmwNuTuJcM0gv8pJuOfiR/8ZptJ8Ou68pFw==
 
 eslint-plugin-node@~9.1.0:
   version "9.1.0"