Merge pull request #556 from canopas/fix-blogs-paginate

Fix blogs paginate

nuxt-frontend/components/Blog.vue

@@ -47,37 +47,41 @@ const { $mixpanel } = useNuxtApp();
 const posts = ref([]);
 const store = useBlogListStore();
 const resources = computed(() => store.items);
+const featurePosts = computed(() => store.featuredItems);
 const count = computed(() => store.totalPosts);
 const status = computed(() => store.status);
 let postLimit = config.POST_PAGINATION_LIMIT;
-let featurePosts = [];
 
 await useAsyncData("blogs", () =>
   store.loadResources(config.SHOW_DRAFT_POSTS, isResource.value, 0, postLimit),
 );
 
 if (status.value === config.SUCCESS) {
   posts.value.push(...resources.value);
-  featurePosts = resources.value?.filter((post) => post.is_featured);
 }
 
 const handleScroll = () => {
   if (
     window.innerHeight + document.documentElement.scrollTop >=
     document.documentElement.offsetHeight - 100
   ) {
-    if (posts.value.length < count.value) {
-      useAsyncData("blogs", () =>
-        store.loadResources(
-          config.SHOW_DRAFT_POSTS,
-          false,
-          posts.value.length,
-          5,
-        ),
-      ).then(() => {
-        posts.value.push(...resources.value);
-      });
+    if (posts.value.length >= count.value) {
+      return;
     }
+
+    useAsyncData("paginate", () =>
+      store.loadPaginateResources(
+        config.SHOW_DRAFT_POSTS,
+        isResource.value,
+        posts.value.length,
+        postLimit,
+      ),
+    ).then(() => {
+      posts.value.push(...resources.value);
+      posts.value = Array.from(new Set(posts.value.map(JSON.stringify))).map(
+        JSON.parse,
+      );
+    });
   }
 };
 

nuxt-frontend/pages/blog.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Blog isResource="false" />
+    <Blog :isResource="false" />
   </div>
 </template>
 

nuxt-frontend/pages/resources.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Blog isResource="true" />
+    <Blog :isResource="true" />
   </div>
 </template>
 

nuxt-frontend/stores/resources/index.js

@@ -8,6 +8,7 @@ export const useBlogListStore = defineStore("blog-list", {
     return {
       totalPosts: 0,
       items: null,
+      featuredItems: null,
       status: 0,
       error: null,
       isLoading: false,
@@ -44,10 +45,15 @@ export const useBlogListStore = defineStore("blog-list", {
               .then((response) => {
                 const resp = response.data.data.attributes;
                 let posts = [];
+                let featuredPosts = [];
                 resp.posts.forEach((post) => {
                   posts.push(setPostFields(post));
                 });
+                resp.featuredPosts.forEach((post) => {
+                  featuredPosts.push(setPostFields(post));
+                });
                 this.items = posts;
+                this.featuredItems = featuredPosts;
                 this.totalPosts = resp.count;
                 this.isLoading = false;
                 this.status = response.status;
@@ -66,6 +72,57 @@ export const useBlogListStore = defineStore("blog-list", {
           });
       });
     },
+
+    async loadPaginateResources(showDrafts, resources, start, limit) {
+      return new Promise((resolve, reject) => {
+        this.isLoading = true;
+        this.error = null;
+
+        let published = showDrafts
+          ? "&publicationState=preview"
+          : "&publicationState=live";
+
+        const limitQuery = limit
+          ? "&pagination[start]=" + start + "&pagination[limit]=" + limit
+          : "";
+
+        let url =
+          config.STRAPI_URL +
+          "/v1/paginate?populate=deep" +
+          published +
+          "&filters[is_resource]=" +
+          resources +
+          "&fields[0]=title&fields[1]=slug&fields[2]=published_on&fields[3]=summary&fields[4]=reading_time" +
+          limitQuery;
+
+        axios
+          .get(config.STRAPI_URL + "/favicon.ico")
+          .then(() => {
+            axios
+              .get(url)
+              .then((response) => {
+                let posts = [];
+                response.data.data.forEach((post) => {
+                  posts.push(setPostFields(post));
+                });
+                this.items = posts;
+                this.isLoading = false;
+                this.status = response.status;
+                resolve();
+              })
+              .catch((error) => {
+                this.error = error;
+                this.isLoading = false;
+                this.status = config.NOT_FOUND;
+                reject(error);
+              });
+          })
+          .catch((error) => {
+            this.status = config.NOT_FOUND;
+            reject(error);
+          });
+      });
+    },
   },
 });