pagination

src/pages/blog/BlogList.tsx

@@ -10,11 +10,13 @@ import { useGetBlogs, useDeleteBlog } from './hooks/useBlogData'
 import { BlogItemType } from './types/BlogTypes'
 import moment from 'moment-jalaali'
 import TrashWithConfrim from '../../components/TrashWithConfrim'
+import Pagination from '../../components/Pagination'
 const BlogList: FC = () => {
 
     const { t } = useTranslation('global')
+    const [page, setPage] = useState<number>(1)
     const [search, setSearch] = useState<string>('')
-    const getBlogs = useGetBlogs(search);
+    const getBlogs = useGetBlogs(search, page);
     const deleteBlog = useDeleteBlog()
 
     return (
@@ -154,6 +156,12 @@ const BlogList: FC = () => {
                         }
                     </tbody>
                 </table>
+
+                <Pagination
+                    currentPage={page}
+                    onPageChange={setPage}
+                    totalPages={getBlogs.data?.data?.pager?.totalPages}
+                />
             </div>
         </div>
     )

src/pages/blog/hooks/useBlogData.ts

@@ -39,10 +39,10 @@ export const useGetBlogCategoryDetail = (
   });
 };
 
-export const useGetBlogs = (search: string) => {
+export const useGetBlogs = (search: string, page: number) => {
   return useQuery({
-    queryKey: ["blogs", search],
-    queryFn: () => api.getBlogs(search),
+    queryKey: ["blogs", search, page],
+    queryFn: () => api.getBlogs(search, page),
   });
 };
 

src/pages/blog/service/BlogService.ts

@@ -29,8 +29,8 @@ export const getBlogCategoryDetail = async (id: string) => {
   return data;
 };
 
-export const getBlogs = async (search: string) => {
-  const { data } = await axios.get(`/blogs/list?q=${search}`);
+export const getBlogs = async (search: string, page: number) => {
+  const { data } = await axios.get(`/blogs/list?q=${search}&page=${page}`);
   return data;
 };