feat(blog) pagination

frontend/app/blog/Pagination.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { Pagination as NextUIPagination } from '@nextui-org/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+const Pagination = ({ total }: {
+    total: number,
+}) => {
+    const parsePage = Number(useSearchParams().get('page'));
+    const currPage = parsePage > 0 ? parsePage : 1;
+
+    const router = useRouter();
+
+    const maxMobileWidth: number = 768;
+    const [ isMobile, setIsMobile ] = useState(false);
+    useEffect(() => {
+        const updateMobileWidth = () => {
+            if (window.innerWidth <= maxMobileWidth) {
+                setIsMobile(true);
+            } else {
+                setIsMobile(false);
+            }
+        };
+        updateMobileWidth();
+        window.addEventListener('resize', updateMobileWidth);
+        return () => {
+            window.removeEventListener('resize', updateMobileWidth);
+        };
+
+    }, []);
+
+    return (
+        <div className={ 'w-full p-4 pt-6 flex justify-center' }>
+            <NextUIPagination
+                initialPage={ currPage }
+                total={ total }
+                siblings={ isMobile ? 0 : 1 }
+                size={ isMobile ? 'sm' : 'md' }
+                showControls
+                showShadow
+                color={ 'default' }
+                variant={ 'light' }
+                onChange={ (page) => {
+                    router.push(`?page=${ page }`, { scroll: false });
+                } }
+            />
+        </div>
+
+    );
+};
+export default Pagination;

frontend/app/blog/PostList.tsx

@@ -0,0 +1,42 @@
+'use server';
+
+import React from 'react';
+import { fetchNocturneApi } from '@/app/blog/api';
+import { MotionDiv } from '@/app/public/MotionDiv';
+import BlogPostCard from '@/app/blog/BlogPostCard';
+import { Card, CardBody } from '@nextui-org/card';
+
+const PostList = async ({ page }: { page: number }) => {
+    try {
+        const res = await fetchNocturneApi(`/get_post_list?page=${ page }`);
+        let posts = (await res.json() as any)['posts'];
+        return (
+            // blog list
+            <div className={ 'w-full' }>
+                <ul className={ 'flex flex-col items-center w-full space-y-7' }>
+                    { posts.map((post: JSON, key: number) => (
+                        <li key={ key } className={ 'w-full' }>
+                            <MotionDiv
+                                initial={ { y: 20, opacity: 0 } }
+                                animate={ { y: 0, opacity: 1 } }
+                                transition={ { ease: 'easeInOut', duration: 0.5, delay: key * .2 + .25 } }
+                            >
+                                <BlogPostCard post={ post } />
+                            </MotionDiv>
+                        </li>)
+                    ) }
+                </ul>
+
+            </div>
+        );
+    } catch (e: any) {
+        return (
+            // todo:  use Error.tsx
+            <Card className={ `w-full` }>
+                <CardBody>
+                    Fatal: { e.toString() }
+                </CardBody>
+            </Card>);
+    }
+};
+export default PostList;

frontend/app/blog/api.ts

@@ -13,15 +13,9 @@ const NOCTURNE_ENDPOINT = ((isServerSide = true) => {
     }
 });
 
-export async function fetchNocturneApi(path: string, isServerSideRequest = true): Promise<{ code: number, ret: any }> {
-    let res = await fetch(`${ NOCTURNE_ENDPOINT(isServerSideRequest) }${ path }`, {
+export async function fetchNocturneApi(path: string, isServerSideRequest = true) {
+    return await fetch(`${ NOCTURNE_ENDPOINT(isServerSideRequest) }${ path }`, {
         cache: 'no-cache'
     });
-
-    if (!res.ok) {
-        return { code: res.status, ret: (await res.json()) };
-    }
-
-    return { code: res.status, ret: await res.json() };
 }
 

frontend/app/blog/page.tsx

@@ -1,39 +1,26 @@
-import React from 'react';
-import BlogPostCard from '@/app/blog/BlogPostCard';
-import { Card, CardBody } from '@nextui-org/card';
-import { MotionDiv } from '@/app/public/MotionDiv';
+import PostList from '@/app/blog/PostList';
+import Pagination from '@/app/blog/Pagination';
 import { fetchNocturneApi } from '@/app/blog/api';
 
-async function Blog() {
+async function Blog({ searchParams }: {
+    searchParams?: {
+        page?: number
+    };
+}) {
 
-    const { code, ret } = await fetchNocturneApi('/get_post_list');
-    if (code == 200) {
-        let posts = ret['posts'];
-        return (
-            // blog list
-            <ul className={ 'flex flex-col items-center w-full space-y-7' }>
-                { posts.map((post: JSON, key: number) => (
-                    <li key={ key } className={ 'w-full' }>
-                        <MotionDiv
-                            initial={ { y: 20, opacity: 0 } }
-                            animate={ { y: 0, opacity: 1 } }
-                            transition={ { ease: 'easeInOut', duration: 0.5, delay: key * .2 + .25 } }
-                        >
-                            <BlogPostCard post={ post } />
-                        </MotionDiv>
-                    </li>)
-                ) }
-            </ul>
-        );
-    } else {
-        return (
-            // todo:  use Error.tsx
-            <Card className={ `w-full` }>
-                <CardBody>
-                    Fatal: { ret }
-                </CardBody>
-            </Card>);
-    }
+    const parsePage = Number(searchParams?.page);
+    const currPage = parsePage > 0 ? parsePage : 1;
+    const ret = await fetchNocturneApi(`/get_page_count`);
+    const pageCount = (await ret.json() as any)['res'] as number;
+
+    console.log(currPage);
+
+    return (
+        <div className={ 'w-full min-w-full space-y-4' }>
+            <PostList page={ currPage } />
+            <Pagination total={ pageCount + 10 } />
+        </div>
+    );
 }
 
 export default Blog;

frontend/app/blog/post/[id]/MinifyPostCard.tsx

@@ -23,13 +23,15 @@ const MinifyPostCard = (props: Props) => {
                     <p className={ `text-tiny uppercase font-bold ${ img_url ? 'text-white/60' : 'text-black/60 dark:text-white/60' }` }>{ desc }</p>
                 </CardHeader>
                 { img_url &&
-                    <div>
-                        <Image
-                            className={ 'object-cover object-center ' }
-                            src={ img_url }
-                            alt={ post.title }
-                            fill
-                        />
+                    <div className={ 'h-full' }>
+                        <div className={ 'relative h-[300px] overflow-hidden' }>
+                            <Image
+                                className={ 'object-cover object-center ' }
+                                src={ img_url }
+                                alt={ post.title }
+                                fill
+                            />
+                        </div>
                         <CardFooter
                             className="absolute transition-colors bg-zinc-300/80 dark:bg-gray-600/25 dark:backdrop-brightness-75 bottom-0  justify-between rounded-none">
                             <div>

frontend/app/blog/post/[id]/PostCard.tsx

@@ -17,11 +17,11 @@ type Props = {
 }
 
 async function PostCard(props: Props) {
-   
-    const { code, ret } = await fetchNocturneApi(`/get_post/${ props.id }`);
 
-    if (code == 200) {
 
+    try {
+        const res = await fetchNocturneApi(`/get_post/${ props.id }`);
+        const ret: any = await res.json();
         return (
             <div>
                 <Card className={ `max-w-full relative` }>
@@ -85,11 +85,11 @@ async function PostCard(props: Props) {
                 </Card>
             </div>
         );
-    } else {
+    } catch (e: any) {
         return <div>
             <Card className={ `w-full` }>
                 <CardBody>
-                    Fatal: { ret }
+                    Fatal: { e.toString() }
                 </CardBody>
             </Card>
         </div>;