feat : Pagination Implement.

src/vite-frontend/src/api/index.ts

@@ -77,9 +77,9 @@ const createArticle = async (article: object | undefined): Promise<AxiosResponse
 const listArticles = async (): Promise<AxiosResponse> => {
     let currentToken = localStorage.getItem("token");
     if(currentToken == null){
-        return await axiosService.get('/api/articles');
+        return await axiosService.get('/api/articles?limit=1000&offset=0');
     }else{
-        return await axiosService.get('/api/articles',{
+        return await axiosService.get('/api/articles?limit=1000&offset=0',{
             headers:{
                 Authorization: "TOKEN " + currentToken,
             }
@@ -102,7 +102,7 @@ const listArticlesByUsername = async (author: string): Promise<AxiosResponse> =>
 
 const feedArticle = async (): Promise<AxiosResponse> => {
     let currentToken = localStorage.getItem("token");
-    return await axiosService.get('/api/articles/feed',{
+    return await axiosService.get('/api/articles/feed?limit=1000&offset=0',{
         headers:{
             Authorization: "TOKEN " + currentToken,
         }
@@ -120,9 +120,9 @@ const getArticle = async (slug: string | undefined): Promise<AxiosResponse> => {
             }
         });
     }
-
 }
 
+
 const addCommentToArticle = async (slug: string | undefined, comment: object): Promise<AxiosResponse> => {
     let currentToken = localStorage.getItem("token");
     return await axiosService.post('/api/articles/' + slug + '/comments',{

src/vite-frontend/src/api/usePaginationAPI.ts

@@ -4,7 +4,7 @@ import { listArticles, feedArticle } from "@/api/index";
 import { usePagination } from "@/ts/usePagination";
 
 
-export interface ArticleList {
+export interface Article {
     slug: string,
     title: string,
     description: string,
@@ -21,12 +21,11 @@ export function usePaginationApi(
     currentPage: Ref<number>,
     rowsPerPage?: Ref<number>
 ) {
-    const articleLists: Ref<ArticleList[]> = ref([]);
-
+    const articleLists: Ref<Article[]> = ref([]);
     const listsAreLoading = ref(false);
     const isEmpty = ref(false);
 
-    const { paginatedArray, numberOfPages } = usePagination<ArticleList>({
+    const { paginatedArray, numberOfPages } = usePagination<Article>({
         rowsPerPage,
         arrayToPaginate: articleLists,
         currentPage
@@ -64,6 +63,7 @@ export function usePaginationApi(
         }
     };
 
+
     return {
         articleLists: paginatedArray,
         loadLists,

src/vite-frontend/src/ts/usePagination.ts

@@ -1,4 +1,4 @@
-import { computed, Ref, ref } from "vue";
+import {computed, Ref, ref} from "vue";
 
 interface PaginationConfig<T> {
     rowsPerPage?: Ref<number>;
@@ -11,15 +11,14 @@ export function usePagination<T>(config: PaginationConfig<T>) {
 
     const paginatedArray = computed(() =>
         config.arrayToPaginate.value.slice(
-            (config.currentPage.value - 1) * rowsPerPage.value,
-            config.currentPage.value * rowsPerPage.value
-        )
+                (config.currentPage.value - 1) * rowsPerPage.value,
+                config.currentPage.value * rowsPerPage.value
+            )
     );
-
-    const numberOfPages = computed(() =>
-        Math.ceil((config.arrayToPaginate.value.length || 0) / rowsPerPage.value)
+    const numberOfPages = computed(() => {
+            return Math.ceil((config.arrayToPaginate.value.length || 0) / rowsPerPage.value)
+        }
     );
-
     return {
         paginatedArray,
         numberOfPages

src/vite-frontend/src/views/TheHome.vue

@@ -42,8 +42,6 @@
             <div v-else>
               <article-list-global v-for="(article,index) in articleLists"
                             :key="article.slug"
-                             :index="index"
-                             @update:Favorite="updateFavorite"
                             :article="article">
               </article-list-global>
             </div>
@@ -55,10 +53,8 @@
           </div>
         </div>
       </div>
+      <pagination-component v-model="currentPage" :numberOfPages="numberOfPages"></pagination-component>
     </div>
-    
-    <pagination-component v-model="currentPage" :numberOfPages="rowsPerPage"></pagination-component>
-
   </div>
 </template>
 
@@ -101,9 +97,6 @@ export default {
       globalActive.value=true;
       await loadLists();
     }
-    const updateFavorite = async (index: number) => {
-      console.log("index" , index);
-    }
 
     onMounted(async () => {
       isLogin.value = store.state.token ? true : false;
@@ -116,7 +109,7 @@ export default {
       }
     })
 
-    return { listsAreLoading, isEmpty, isLogin, currentPage, rowsPerPage, numberOfPages, feedActive, globalActive, articleLists, updateFavorite, feedSelect, globalSelect };
+    return { listsAreLoading, isEmpty, isLogin, currentPage, rowsPerPage, numberOfPages, feedActive, globalActive, articleLists, feedSelect, globalSelect };
   }
 }
 </script>