feat: fix blog display

Author: minhtri0795

frontend/src/components/BlogsBlock/index.tsx

@@ -29,7 +29,6 @@ type TBlog = {
   link?: string
 }
 
-const defaultDesc = ""
 
 interface Props extends BlogsBlockFragment { }
 const PAGE_SIZE = 3
@@ -38,13 +37,6 @@ const BlogsBlock = (props: Props) => {
   const [blockListing, setBlockListing] =
     useState<GetPostsThumbQuery["posts"]>()
   const { locale } = useLocaleContext()
-  const [page, setPage] = useState(0)
-
-  const sizes = blockListing ? blockListing.nodes.length : 0
-  const max_page = blockListing
-    ? Math.floor(blockListing?.nodes?.length / PAGE_SIZE)
-    : 0
-
   useEffect(() => {
     ; (async () => {
       const { data } = await getPostThumb(
@@ -54,6 +46,16 @@ const BlogsBlock = (props: Props) => {
     })()
   }, [])
 
+  const [page, setPage] = useState(0)
+  const sizes = blockListing ? blockListing.nodes.length : 0
+  const max_page = blockListing
+    ? Math.floor(blockListing?.nodes?.length / PAGE_SIZE)
+    : 0
+  
+  const totalPosts = blockListing?.nodes?.length || 0
+  const currentlyShowing = Math.min((page + 1) * PAGE_SIZE, totalPosts)
+  const hasMorePosts = currentlyShowing < totalPosts
+
   if (!blockListing && sizes < 1)
     return (
       <div className="container-fluid min-h-[500px] pt-10">
@@ -125,7 +127,7 @@ const BlogsBlock = (props: Props) => {
                 )
               })}
           <div className="mt-10 flex w-full justify-center">
-            {sizes > PAGE_SIZE && (page + 1) * PAGE_SIZE < sizes && (
+            {hasMorePosts  && (
               <Button
                 onClick={() =>
                   setPage((prev) => {

frontend/src/libs/graphql/utils/index.ts

@@ -207,6 +207,11 @@ export async function getPostThumb(lang: LanguageCodeFilterEnum) {
             blogDescription
           }
         }
+        pageInfo {
+          endCursor
+          startCursor
+          hasNextPage
+        }
       }
     }
     `),
@@ -290,7 +295,7 @@ export async function getPost(slug: string) {
     //@ts-ignore
     query: gql(`
       query GetPost($databaseId: ID!) {
-  post(id: $databaseId, idType: SLUG) {
+  post(id: $databaseId, idType: URI) {
     databaseId
     dateGmt
     slug