Implement refresh posts, fix duplicate posts bug

- on logo click
- scrollToTop
- remove duplicate records

Co-authored-by: kachulio1 <jngugi88@gmail.com>

webapp/constants/posts.js

@@ -0,0 +1,2 @@
+export const first = 12
+export const offset = 0

webapp/layouts/default.vue

@@ -6,7 +6,11 @@
           <ds-flex class="main-navigation-flex">
             <ds-flex-item :width="{ lg: '3.5%' }" />
             <ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
-              <nuxt-link :to="{ name: 'index' }">
+              <nuxt-link
+                :to="{ name: 'index' }"
+                @click.native="refreshPosts({ i18n: $i18n })"
+                v-scroll-to="'.main-navigation'"
+              >
                 <ds-logo />
               </nuxt-link>
             </ds-flex-item>
@@ -225,6 +229,7 @@ export default {
     ...mapActions({
       quickSearchClear: 'search/quickClear',
       quickSearch: 'search/quickSearch',
+      refreshPosts: 'posts/refreshPosts',
     }),
     goToPost(item) {
       this.$nextTick(() => {

webapp/pages/index.vue

@@ -15,7 +15,7 @@
         </div>
       </ds-grid-item>
       <template v-if="hasResults">
-        <masonry-grid-item v-for="post in posts" :key="post.id">
+        <masonry-grid-item v-for="post in currentPosts" :key="post.id">
           <hc-post-card
             :post="post"
             :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
@@ -94,6 +94,7 @@ export default {
       orderBy: 'posts/orderBy',
       selectedOrder: 'posts/selectedOrder',
       sortingIcon: 'posts/orderIcon',
+      currentPosts: 'posts/currentPosts',
     }),
     selected: {
       get() {
@@ -101,7 +102,7 @@ export default {
       },
       set({ value }) {
         this.offset = 0
-        this.posts = []
+        this.setCurrentPosts([])
         this.selectOrder(value)
       },
     },
@@ -119,12 +120,13 @@ export default {
       return filter
     },
     hasResults() {
-      return this.$apollo.loading || (this.posts && this.posts.length > 0)
+      return this.$apollo.loading || (this.currentPosts && this.currentPosts.length > 0)
     },
   },
   methods: {
     ...mapMutations({
       selectOrder: 'posts/SELECT_ORDER',
+      setCurrentPosts: 'posts/SET_CURRENT_POSTS',
     }),
     clearSearch() {
       this.$router.push({ path: '/' })
@@ -152,21 +154,30 @@ export default {
           if (!fetchMoreResult || fetchMoreResult.Post.length < this.pageSize) {
             this.hasMore = false
           }
-          const result = Object.assign({}, previousResult, {
-            Post: [...previousResult.Post, ...fetchMoreResult.Post],
-          })
-          return result
+          const result = {
+            ...previousResult,
+            Post: [
+              ...previousResult.Post.filter(prevPost => {
+                return (
+                  fetchMoreResult.Post.filter(newPost => newPost.id === prevPost.id).length === 0
+                )
+              }),
+              ...fetchMoreResult.Post,
+            ],
+          }
+          this.setCurrentPosts(result.Post)
         },
       })
     },
     deletePost(deletedPost) {
-      this.posts = this.posts.filter(post => {
+      const posts = this.currentPosts.filter(post => {
         return post.id !== deletedPost.id
       })
+      this.setCurrentPosts(posts)
     },
     resetPostList() {
       this.offset = 0
-      this.posts = []
+      this.setCurrentPosts([])
       this.hasMore = true
     },
     pinPost(post) {
@@ -210,7 +221,7 @@ export default {
         }
       },
       update({ Post }) {
-        this.posts = Post
+        this.setCurrentPosts(Post)
       },
       fetchPolicy: 'cache-and-network',
     },

webapp/pages/profile/_id/_slug.vue

@@ -394,12 +394,18 @@ export default {
           if (!fetchMoreResult || fetchMoreResult.profilePagePosts.length < this.pageSize) {
             this.hasMore = false
           }
-          const result = Object.assign({}, previousResult, {
+          const result = {
+            ...previousResult,
             profilePagePosts: [
-              ...previousResult.profilePagePosts,
+              ...previousResult.profilePagePosts.filter(prevPost => {
+                return (
+                  fetchMoreResult.profilePagePosts.filter(newPost => newPost.id === prevPost.id)
+                    .length === 0
+                )
+              }),
               ...fetchMoreResult.profilePagePosts,
             ],
-          })
+          }
           return result
         },
       })

webapp/store/posts.js

@@ -4,6 +4,8 @@ import xor from 'lodash/xor'
 import isEmpty from 'lodash/isEmpty'
 import isEqual from 'lodash/isEqual'
 import clone from 'lodash/clone'
+import { filterPosts } from '~/graphql/PostQuery'
+import { first, offset } from '~/constants/posts'
 
 const defaultFilter = {}
 
@@ -26,6 +28,7 @@ export const state = () => {
       ...defaultFilter,
     },
     order: orderOptions['createdAt_desc'],
+    currentPosts: [],
   }
 }
 
@@ -74,6 +77,9 @@ export const mutations = {
   SELECT_ORDER(state, value) {
     state.order = orderOptions[value]
   },
+  SET_CURRENT_POSTS(state, posts) {
+    state.currentPosts = posts
+  },
 }
 
 export const getters = {
@@ -114,4 +120,26 @@ export const getters = {
   orderIcon(state) {
     return state.order.icon
   },
+  currentPosts(state) {
+    return state.currentPosts || []
+  },
+}
+
+export const actions = {
+  async refreshPosts({ commit, getters }, { i18n }) {
+    const client = this.app.apolloProvider.defaultClient
+    const {
+      data: { Post },
+    } = await client.query({
+      query: filterPosts(i18n),
+      variables: {
+        filter: getters.filter,
+        first,
+        orderBy: ['pinned_asc', getters.orderBy],
+        offset,
+      },
+    })
+    commit('SET_CURRENT_POSTS', Post)
+    return Post
+  },
 }