Set up posts in store, get working from FilterPosts

- also, set it up to be mobile responsive

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))
     },
   },
 }

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>

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()

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 || []
+  },
+}