From 1d606fe88f97f87e32a58b1b187a71f40c70169c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 29 Mar 2023 14:29:29 +0700
Subject: blog detail

---
 src/pages/blog/index.jsx | 90 +++++++++++++++++++++---------------------------
 1 file changed, 40 insertions(+), 50 deletions(-)

(limited to 'src/pages/blog/index.jsx')

diff --git a/src/pages/blog/index.jsx b/src/pages/blog/index.jsx
index c755ec82..041fc046 100644
--- a/src/pages/blog/index.jsx
+++ b/src/pages/blog/index.jsx
@@ -1,74 +1,64 @@
 import BasicLayout from '@/core/components/layouts/BasicLayout'
-import { Card, Spinner } from 'flowbite-react'
 import Link from 'next/link'
-import { useCallback, useEffect, useState } from 'react'
 import { createSlug } from '@/core/utils/slug'
-import useDevice from '@/core/hooks/useDevice'
-import Image from 'next/image'
-import odooApi from '@/core/api/odooApi'
+import Image from '@/core/components/elements/Image/Image'
+import useBlogs from '@/lib/blog/hooks/useBlogs'
+import { useRouter } from 'next/router'
+import Pagination from '@/core/components/elements/Pagination/Pagination'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
 
 export default function Blogs() {
-  const [isLoading, setIsLoading] = useState(true)
-  const [blogsValues, setBlogs] = useState([])
-  const { isMobile } = useDevice()
+  const router = useRouter()
+  const limit = 16
 
-  const getBlogs = useCallback(async () => {
-    // setIsLoading(true)
-    const result = await odooApi('GET', '/api/v1/blog')
-    setBlogs(result.blogs)
-    setIsLoading(false)
-  }, [])
+  const { page = 1 } = router.query
+  const { blogs } = useBlogs({ limit, offset: limit * (page - 1) })
 
-  useEffect(() => {
-    getBlogs()
-  }, [getBlogs])
+  const pageCount = Math.ceil(blogs?.data?.blogTotal / limit)
 
-  if (isLoading) {
-    return (
-      <>
-        <BasicLayout>
-          <div className='container mx-auto flex justify-center my-4'>
-            <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12 md:w-20 md:mt-28' />
-          </div>
-        </BasicLayout>
-      </>
-    )
-  }
   return (
     <BasicLayout>
-      <div className='container mx-auto p-4 md:p-0 mt-0 md:mt-10 mb-3'>
-        <div>
-          <h1 className='font-bold text-2xl'>Blog Indoteknik</h1>
-        </div>
-        <div className='grid grid-cols-2 gap-4 mt-4 md:grid-cols-4 !overflow-x-hidden'>
-          {blogsValues?.map((blog, index) => {
+      <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
+        <h1 className='font-bold text-2xl mb-6'>Blog Indoteknik</h1>
+
+        {blogs.isLoading && (
+          <div className='flex justify-center my-6'>
+            <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+          </div>
+        )}
+
+        <div className='grid gap-6 grid-cols-1 md:grid-cols-4'>
+          {blogs.data?.blogs?.map((blog, index) => {
             return (
               <div className='rounded shadow-sm border border-gray_r-4 h-full bg-white' key={index}>
-                <Image
-                  src={blog.thumbnail}
-                  alt={blog.title}
-                  width={512}
-                  height={512}
-                  className='w-full h-[112px] object-cover object-center'
-                />
-                <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5 flex flex-col'>
-                  <Link href='#' className='mb-1 font-normal text-red_r-11'>
-                    {blog.category.name}
-                  </Link>
+                <Link href={createSlug('blog/', blog.title, blog.id)}>
+                  <Image
+                    src={blog.thumbnail}
+                    alt={blog.title}
+                    className='w-full h-[112px] object-cover object-center'
+                  />
+                </Link>
+                <div className='p-3 text-gray_r-12/80'>
+                  <div className='mb-1'>{blog.category.name}</div>
                   <Link
-                    href='#'
-                    className='mb-2 !text-gray_r-12 text-body-1 font-semibold leading-6 line-clamp-2'
+                    href={createSlug('blog/', blog.title, blog.id)}
+                    className='mb-3 !text-gray_r-12/90 text-body-1 font-medium leading-6 line-clamp-2'
                   >
                     {blog.title}
                   </Link>
-                  <p className='font-normal text-gray-700 dark:text-gray-400 mt-auto'>
-                    {blog.postDate}
-                  </p>
+                  <div className='text-caption-1'>{blog.postDate}</div>
                 </div>
               </div>
             )
           })}
         </div>
+
+        <Pagination
+          currentPage={parseInt(page)}
+          pageCount={pageCount}
+          url={`/blog`}
+          className='mt-4 md:mt-10'
+        />
       </div>
     </BasicLayout>
   )
-- 
cgit v1.2.3