Skip to content

Commit

Permalink
Add loader while loading data and pagination for posts by author page
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-dharti-r
cp-dharti-r committed May 6, 2024
1 parent 19ffdd3 commit 324984b
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 16 deletions.
17 changes: 12 additions & 5 deletions nuxt-frontend/components/Blog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
:count="count"
:status="status"
/>
<div v-if="showLoader" class="py-10">
<img :src="loaderImage" class="h-20 w-full" />
</div>
<div
:class="
count == 0 || status == config.NOT_FOUND
Expand All @@ -33,15 +36,16 @@
</template>

<script setup>
import loaderImage from "@/assets/images/theme/loader.svg";
import Header from "@/components/partials/NewHeader.vue";
import config from "@/config";
import { useBlogListStore } from "@/stores/resources";
import { toRefs } from "vue";
const props = defineProps({
isResource: Boolean,
});
const showLoader = ref(false);
const { isResource } = toRefs(props);
const { $mixpanel } = useNuxtApp();
const posts = ref([]);
Expand All @@ -53,7 +57,7 @@ const status = computed(() => store.status);
let postLimit = config.POST_PAGINATION_LIMIT;
await useAsyncData("blogs", () =>
store.loadResources(config.SHOW_DRAFT_POSTS, isResource.value, 0, postLimit),
store.loadResources(config.SHOW_DRAFT_POSTS, isResource.value, 0, postLimit)
);
if (status.value === config.SUCCESS) {
Expand All @@ -69,17 +73,20 @@ const handleScroll = () => {
return;
}
showLoader.value = true;
useAsyncData("paginate", () =>
store.loadPaginateResources(
config.SHOW_DRAFT_POSTS,
isResource.value,
posts.value.length,
postLimit,
),
postLimit
)
).then(() => {
showLoader.value = false;
posts.value.push(...resources.value);
posts.value = Array.from(new Set(posts.value.map(JSON.stringify))).map(
JSON.parse,
JSON.parse
);
});
}
Expand Down
31 changes: 27 additions & 4 deletions nuxt-frontend/pages/author/[slug].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@
<div class="mb-6 md:mb-10">
<AuthorPosts :posts="posts" :mixpanel="mixpanel" />
</div>
<div v-if="showLoader" class="py-10">
<img :src="loaderImage" class="h-20 w-full" />
</div>
</div>
</section>
<BlogFooter
Expand All @@ -45,22 +48,25 @@
</template>

<script setup>
import loaderImage from "@/assets/images/theme/loader.svg";
import Header from "@/components/partials/NewHeader.vue";
import { useRoute } from "vue-router";
import config from "@/config";
import { useAuthorListStore } from "@/stores/author";
const showLoader = ref(false);
const { $mixpanel } = useNuxtApp();
const route = useRoute();
const slug = ref(route.params.slug);
const posts = ref([]);
const store = useAuthorListStore();
const resources = computed(() => store.items);
const count = computed(() => store.totalPosts);
const status = computed(() => store.status);
let postLimit = 10;
await useAsyncData("authors", () =>
store.loadAuthorBlogs(config.SHOW_DRAFT_POSTS, slug.value),
store.loadAuthorBlogs(config.SHOW_DRAFT_POSTS, slug.value)
);
if (status.value === config.SUCCESS) {
Expand All @@ -72,9 +78,26 @@ const handleScroll = () => {
window.innerHeight + document.documentElement.scrollTop >=
document.documentElement.offsetHeight - 100
) {
const oldCount = postLimit;
postLimit += 2;
posts.value.push(...resources.value.slice(oldCount, postLimit));
if (posts.value.length >= count.value) {
return;
}
showLoader.value = true;
useAsyncData("paginate", () =>
store.loadPaginateAuthorBlogs(
config.SHOW_DRAFT_POSTS,
slug.value,
posts.value.length,
postLimit
)
).then(() => {
showLoader.value = false;
posts.value.push(...resources.value);
posts.value = Array.from(new Set(posts.value.map(JSON.stringify))).map(
JSON.parse
);
});
}
};
Expand Down
42 changes: 41 additions & 1 deletion nuxt-frontend/stores/author/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { setPostFields } from "~/utils";
export const useAuthorListStore = defineStore("authors", {
state: () => {
return {
totalPosts: 0,
items: null,
status: 0,
error: null,
Expand Down Expand Up @@ -34,10 +35,11 @@ export const useAuthorListStore = defineStore("authors", {
.get(url)
.then((response) => {
let posts = [];
response.data.forEach((post) => {
response.data.posts.forEach((post) => {
posts.push(setPostFields(post));
});
this.items = posts;
this.totalPosts = response.data.count;
this.isLoading = false;
this.status = posts.length > 0 ? response.status : config.NOT_FOUND;
resolve();
Expand All @@ -50,5 +52,43 @@ export const useAuthorListStore = defineStore("authors", {
});
});
},

async loadPaginateAuthorBlogs(showDrafts, slug, start, limit) {
return new Promise((resolve, reject) => {
this.isLoading = true;
this.error = null;

let published = showDrafts ? "is_published=false" : "is_published=true";

const limitQuery = limit ? "&skip=" + start + "&limit=" + limit : "";

let url =
config.API_BASE +
"/api/posts/author/" +
slug +
"?" +
published +
limitQuery;

axios
.get(url)
.then((response) => {
let posts = [];
response.data.posts.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);
});
});
},
},
});
21 changes: 18 additions & 3 deletions post/author.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,12 @@ func (repository *Repository) GetPostsByAuthor(c *gin.Context) {
return
}

new_posts := []Post{}
var PostData struct {
Posts []Post `json:"posts"`
Count int `json:"count"`
}

new_posts := PostData
for _, post := range posts {

var tags []Tag
Expand All @@ -72,10 +77,20 @@ func (repository *Repository) GetPostsByAuthor(c *gin.Context) {
post.Tag = ""
post.Tags = tags

new_posts = append(new_posts, post)
new_posts.Posts = append(new_posts.Posts, post)
}

new_posts.Posts = repository.PreparePosts(new_posts.Posts)

publishQuery := ""
if isPublished {
publishQuery = "WHERE p.is_published = true"
}

new_posts = repository.PreparePosts(new_posts)
err = repository.Db.Get(&new_posts.Count, `SELECT COUNT(p.id)
FROM posts p
JOIN posts_author_links pa ON p.id = pa.post_id
JOIN authors a ON a.id = pa.author_id AND a.username = $1 `+publishQuery, username)

c.JSON(http.StatusOK, new_posts)
}
Expand Down
6 changes: 5 additions & 1 deletion post/index.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ func (repository *Repository) Get(c *gin.Context) {
}
}

resourceQuery := ""
resourceQuery := "is_resource = false AND"
if isResource {
resourceQuery = "is_resource = true AND"
}
Expand Down Expand Up @@ -184,6 +184,10 @@ func (repository *Repository) Show(c *gin.Context) {

func (repository *Repository) PreparePosts(posts []Post) []Post {

if len(posts) == 0 {
return posts
}

new_posts := repository.SetPostImageInPosts(posts)
new_posts = repository.SetAuthorWithImageInPosts(posts)

Expand Down
4 changes: 2 additions & 2 deletions post/models.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ type Post struct {
CreatedAt string `json:"created_at,omitempty"`
UpdatedAt string `json:"updated_at,omitempty"`
PublishedAt null.String `json:"published_at"`
Summary string `json:"summary,omitempty"`
Summary null.String `json:"summary,omitempty"`
BlogContent string `json:"blog_content,omitempty"`
MetaDescription string `json:"meta_description,omitempty"`
Toc null.String `json:"toc,omitempty"`
Expand Down Expand Up @@ -118,7 +118,7 @@ type RecommendedPost struct {
CreatedAt string `json:"created_at"`
UpdatedAt string `json:"updated_at"`
PublishedAt null.String `json:"published_at"`
Summary string `json:"summary"`
Summary null.String `json:"summary"`
BlogContent string `json:"blog_content"`
MetaDescription string `json:"meta_description"`
Toc null.String `json:"toc"`
Expand Down

0 comments on commit 324984b

Please sign in to comment.