fix: category is not paginated probably

src/api/index.ts

@@ -7,12 +7,13 @@ import {
   Categories,
   Post,
   PostList,
-  SpecificPostsList,
+  SpecificPostListRaw,
   Tags
 } from '@/models/Post.class'
 import { Article, Page } from '@/models/Article.class'
 import { Statistic } from '@/models/Statistic.class'
 import { SearchIndexes } from '@/models/Search.class'
+import { paginator } from '@/utils'
 
 // GET /api/site.json
 export async function fetchHexoConfig(): Promise<AxiosResponse<any>> {
@@ -35,16 +36,35 @@ export async function fetchArchivesList(
 
 // GET /api/tags/:TagName.json
 export async function fetchPostsListByTag(
-  tagName: string
+  tagName: string,
+  page: number,
+  pageSize: number
 ): Promise<AxiosResponse<any>> {
-  return request.get<SpecificPostsList>(`/tags/${tagName}.json`)
+  const response = await request.get<SpecificPostListRaw>(
+    `/tags/${tagName}.json`
+  )
+
+  response.data.postlist = paginator(response.data.postlist, page, pageSize)
+
+  return response
 }
 
 // GET /api/categories/:slug.json
 export async function fetchPostsListByCategory(
-  categoryName: string
-): Promise<AxiosResponse<any>> {
-  return request.get<SpecificPostsList>(`/categories/${categoryName}.json`)
+  categoryName: string,
+  page: number,
+  pageSize: number
+) {
+  const response = await request.get<SpecificPostListRaw>(
+    `/categories/${categoryName}.json`
+  )
+
+  response.data.pageSize = pageSize
+  response.data.total = response.data.postlist.length
+  response.data.pageCount = Math.ceil(response.data.postlist.length / pageSize)
+  response.data.postlist = paginator(response.data.postlist, page, pageSize)
+
+  return response
 }
 
 // GET /api/articles/:Slug.json

src/models/Post.class.ts

@@ -1,5 +1,16 @@
 import { Social } from './ThemeConfig.class'
 
+export interface PostRaw {
+  [key: string]: Array<any> | string | { [key: string]: any }
+}
+
+export interface SpecificPostListRaw {
+  pageCount: number
+  pageSize: number
+  total: number
+  postlist: PostRaw[]
+}
+
 export class NavPost {
   title = ''
   uid = ''
@@ -77,9 +88,7 @@ export class Post {
   feature = false
   pinned = false
 
-  constructor(raw?: {
-    [key: string]: Array<any> | string | { [key: string]: any }
-  }) {
+  constructor(raw?: PostRaw) {
     if (raw) {
       for (const key of Object.keys(this)) {
         if (Object.prototype.hasOwnProperty.call(raw, key)) {
@@ -152,13 +161,13 @@ export class SpecificPostsList {
   pageSize = 0
   total = 0
 
-  constructor(raw?: { [key: string]: [] }) {
+  constructor(raw?: SpecificPostListRaw) {
     if (raw && raw.postlist) {
       Object.assign(this, {
-        data: raw.postlist.map((one: { [key: string]: [] }) => new Post(one)),
-        pageCount: raw.postlist.length,
-        pageSize: raw.postlist.length,
-        total: raw.postlist.length
+        data: raw.postlist.map(one => new Post(one)),
+        pageCount: raw.pageCount,
+        pageSize: raw.pageSize,
+        total: raw.total
       })
     }
   }

src/pages/index.vue

@@ -75,7 +75,7 @@
           :pageSize="pagination.pageSize"
           :pageTotal="pagination.pageTotal"
           :page="pagination.page"
-          @pageChange="pageChangeHanlder"
+          @pageChange="pageChangeHandler"
         />
       </div>
       <div>
@@ -135,6 +135,7 @@ export default defineComponent({
     const categoryStore = useCategoryStore()
     const { updateTitleByText } = usePageTitle()
     const { t } = useI18n()
+    const DEFAULT_PAGE_SIZE = 12
 
     /** Variables Section */
 
@@ -152,7 +153,7 @@ export default defineComponent({
     const activeTab = ref('')
     const articleOffset = ref(0)
     const pagination = ref({
-      pageSize: 12,
+      pageSize: DEFAULT_PAGE_SIZE,
       pageTotal: 0,
       page: 1
     })
@@ -188,11 +189,7 @@ export default defineComponent({
       activeTab.value = slug
       backToArticleTop()
       if (slug !== '') {
-        posts.value = new PostList()
-        postStore.fetchPostsByCategory(slug).then(postList => {
-          posts.value = postList
-          pagination.value.pageTotal = postList.total
-        })
+        fetchSlugData(slug)
       } else {
         fetchPostData()
       }
@@ -216,14 +213,32 @@ export default defineComponent({
       await postStore.fetchPostsList(pagination.value.page).then(() => {
         posts.value = postStore.posts
         pagination.value.pageTotal = postStore.posts.total
-        pagination.value.pageSize = postStore.posts.pageSize
       })
     }
 
-    const pageChangeHanlder = async (page: number) => {
+    const fetchSlugData = async (slug: string) => {
+      posts.value = new PostList()
+      await postStore
+        .fetchPostsByCategory(
+          slug,
+          pagination.value.page,
+          pagination.value.pageSize
+        )
+        .then(postList => {
+          posts.value = postList
+          pagination.value.pageTotal = postList.total
+        })
+    }
+
+    const pageChangeHandler = async (page: number) => {
       pagination.value.page = page
       backToArticleTop()
-      await fetchPostData()
+
+      if (activeTab.value) {
+        await fetchSlugData(activeTab.value)
+      } else {
+        await fetchPostData()
+      }
     }
 
     return {
@@ -255,7 +270,7 @@ export default defineComponent({
       activeTabStyle,
       activeTab,
       pagination,
-      pageChangeHanlder,
+      pageChangeHandler,
       t
     }
   }

src/stores/post.ts

@@ -68,16 +68,24 @@ export const usePostStore = defineStore({
         }, 200)
       )
     },
-    async fetchPostsByCategory(category: string): Promise<SpecificPostsList> {
-      const { data } = await fetchPostsListByCategory(category)
+    async fetchPostsByCategory(
+      category: string,
+      page: number = 1,
+      pageSize: number = 12
+    ): Promise<SpecificPostsList> {
+      const { data } = await fetchPostsListByCategory(category, page, pageSize)
       return new Promise(resolve =>
         setTimeout(() => {
           resolve(new SpecificPostsList(data))
         }, 200)
       )
     },
-    async fetchPostsByTag(slug: string): Promise<SpecificPostsList> {
-      const { data } = await fetchPostsListByTag(slug)
+    async fetchPostsByTag(
+      slug: string,
+      page: number = 1,
+      pageSize: number = 12
+    ): Promise<SpecificPostsList> {
+      const { data } = await fetchPostsListByTag(slug, page, pageSize)
       return new Promise(resolve => {
         setTimeout(() => {
           resolve(new SpecificPostsList(data))

src/utils/index.ts

@@ -184,3 +184,11 @@ export function throttle(func: () => void, timeFrame: number) {
     }
   }
 }
+
+export function paginator<T>(data: T[], page: number, pageSize: number) {
+  const skip = pageSize * (page - 1)
+  // slice function's endIndex will not be included
+  // therefore the ending index should be pageSize not pageSize - 1
+  const endIndex = skip > data.length - 1 ? undefined : pageSize * page
+  return data.slice(skip, endIndex)
+}