diff --git a/src/components/hooks/blog/index.ts b/src/components/hooks/blog/index.ts
new file mode 100644
index 000000000..e8359671a
--- /dev/null
+++ b/src/components/hooks/blog/index.ts
@@ -0,0 +1 @@
+export {default as useGetBlogList }from "./useGetBlogList"
\ No newline at end of file
diff --git a/src/components/hooks/blog/useGetBlogList.tsx b/src/components/hooks/blog/useGetBlogList.tsx
new file mode 100644
index 000000000..ebbe6162b
--- /dev/null
+++ b/src/components/hooks/blog/useGetBlogList.tsx
@@ -0,0 +1,24 @@
+import { GetAllBlogsQuery, QueryBlogs,BlogList } from '@framework/schema'
+import { getAllBlogsQuery } from '@framework/utils/queries/get-all-blog-query'
+import gglFetcher from 'src/utils/gglFetcher'
+import useSWR from 'swr'
+
+const useGetBlogList = (options?: QueryBlogs) => {
+ const { data, isValidating, ...rest } = useSWR([getAllBlogsQuery, options], gglFetcher)
+ console.log(isValidating);
+ return {
+ blogs: data?.blogs?.items?.map((val:BlogList)=>({
+ id: val.id,
+ title: val.translations[0]?.title,
+ imageSrc: val.featuredAsset?.preview ?? null,
+ slug: val.translations[0]?.slug,
+ description: val.translations[0]?.description,
+ isHidden: val.isHidden
+ })),
+ totalItems: data?.blogs?.totalItems || null,
+ loading: isValidating,
+ ...rest
+ }
+}
+
+export default useGetBlogList
diff --git a/src/components/modules/blogs/BlogsList/BlogsList.tsx b/src/components/modules/blogs/BlogsList/BlogsList.tsx
index 9b7ddc1e0..4586f5acd 100644
--- a/src/components/modules/blogs/BlogsList/BlogsList.tsx
+++ b/src/components/modules/blogs/BlogsList/BlogsList.tsx
@@ -1,151 +1,89 @@
-import React, { useState } from 'react'
+import { useRouter } from 'next/router'
+import React, { useEffect, useState } from 'react'
import CardBlog, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
+import { DEFAULT_BLOG_PAGE_SIZE, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import s from "./BlogsList.module.scss"
-import { DEFAULT_BLOG_PAGE_SIZE } from 'src/utils/constanst.utils'
+import { QueryBlogs } from '@framework/schema'
+import { useGetBlogList } from 'src/components/hooks/blog'
+import { getPageFromQuery } from 'src/utils/funtion.utils'
+import { ListProductCardSkeleton } from 'src/components/common'
interface BlogsListProps {
- data?: BlogCardProps[],
+ blogList?: BlogCardProps[],
+ total?: number
}
-const BLOGSLIST_DATA = [
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
- title: "1",
- description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
- title: "2",
- description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
- title: "3",
- description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
- title: "4",
- description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
- title: "5",
- description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
- title: "6",
- description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
- title: "7",
- description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
- title: "8",
- description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
- title: "9",
- description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
- title: "10",
- description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
- title: "11",
- description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
- title: "12",
- description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
- title: "13",
- description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
- title: "14",
- description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
- title: "15",
- description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
- title: "16",
- description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
- title: "17",
- description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
- slug: "happy-diet"
- },
- {
- imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
- title: "18",
- description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
- slug: "happy-diet"
- },
-
- ]
-
-const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
- const [currentPage, setCurrentPage] = useState(0)
- const onPageChange = (page:number) => {
- setCurrentPage(page)
+const DEFAULT_BLOGS_ARGS = {
+ options:{
+ skip: 1, take: DEFAULT_BLOG_PAGE_SIZE
}
-
+}
+
+const BlogsList = ({ blogList,total }:BlogsListProps) => {
+ const router = useRouter();
+ const [initialQueryFlag, setInitialQueryFlag] = useState(true)
+
+ const [optionQueryBlog, setOptionQueryBlog] = useState(DEFAULT_BLOGS_ARGS)
+ const { blogs, totalItems, loading } = useGetBlogList(optionQueryBlog);
+
+ // console.log(blogs);
+
+
+ const onPageChange = (page:number) => {
+ router.push({
+ pathname: ROUTE.BLOGS,
+ query: {
+ ...router.query,
+ [QUERY_KEY.PAGE]: page
+ }
+ },
+ undefined, { shallow: true }
+ )
+ }
+
+ // skip
+ useEffect(() => {
+ const query = { ...DEFAULT_BLOGS_ARGS } as QueryBlogs;
+ const page = getPageFromQuery(router.query[QUERY_KEY.PAGE] as string);
+ query.options.skip = page * DEFAULT_BLOG_PAGE_SIZE;
+ setOptionQueryBlog(query);
+ setInitialQueryFlag(false);
+ console.log(query)
+ },[router.query])
+
+
+ let data;
+ if(initialQueryFlag == true){
+ data = blogList;
+ }else{
+ data = blogs
+ }
+
return (