From a9ba365bac8abcffc961424d5fa9365853c82737 Mon Sep 17 00:00:00 2001
From: Lumither Tao <lumither@outlook.com>
Date: Sat, 4 May 2024 00:51:32 +0800
Subject: [PATCH] fix(frontend/Blog) fix compatibility with new backend

---
 app/blog/BlogPostCard.tsx    | 33 ++++++++++++++++++--------------
 app/blog/fetch_posts_list.ts | 18 ++++--------------
 app/blog/page.tsx            | 37 ++++++++++++++++++------------------
 3 files changed, 42 insertions(+), 46 deletions(-)

diff --git a/app/blog/BlogPostCard.tsx b/app/blog/BlogPostCard.tsx
index 393a7ea..94c3b9b 100644
--- a/app/blog/BlogPostCard.tsx
+++ b/app/blog/BlogPostCard.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import Link from 'next/link';
 import { Card, CardBody, CardHeader } from '@nextui-org/card';
 import { Divider } from '@nextui-org/react';
 
@@ -8,23 +7,29 @@ type Props = {
 }
 
 function BlogPostCard({ post }: Props) {
-    const name = (post as any)['name'];
-    const { title, desc } = (post as any)['meta'] as { title: string, desc: string };
+    let title = (post as any)['title'];
+    let summary = (post as any)['summary'];
+    let last_update = (post as any)['last_update'];
+
     return (
 
         <div>
             {/*todo: to be update*/ }
-            {/*<Link href={ `/blog/${ name }` }>*/}
-                <Card>
-                    <CardHeader>
-                        <p className={ 'font-bold' }>{ title }</p>
-                    </CardHeader>
-                    <Divider />
-                    <CardBody>
-                        { desc }
-                    </CardBody>
-                </Card>
-            {/*</Link>*/}
+            {/*<Link href={ `/blog/${ name }` }>*/ }
+            <Card>
+                <CardHeader>
+                    <p className={ 'font-bold' }>{ title }</p>
+                </CardHeader>
+                <Divider />
+                <CardBody>
+                    { summary }
+                </CardBody>
+                <Divider />
+                <CardBody>
+                    { last_update }
+                </CardBody>
+            </Card>
+            {/*</Link>*/ }
         </div>
     );
 
diff --git a/app/blog/fetch_posts_list.ts b/app/blog/fetch_posts_list.ts
index 282cf53..0081c63 100644
--- a/app/blog/fetch_posts_list.ts
+++ b/app/blog/fetch_posts_list.ts
@@ -1,19 +1,9 @@
-import { Result } from '@/app/public/type/Result';
-
-export default async function fetch_posts_list(): Promise<Result<JSON[], Error>> {
-    const response = await fetch(`${ process.env.BLOG_ENDPOINT }/posts/idx.json`);
+export default async function fetch_posts_list(): Promise<any> {
+    const response = await fetch(`http://localhost:${ process.env.BACKEND_PORT }/api/get/post_list`);
     if (!response.ok) {
-        return {
-            ok: false,
-            error: new Error(response.statusText)
-        };
+        throw new Error(response.statusText);
     }
-    const res = await response.json();
-    const posts = res['idx'].filter((posts: { type: string }) => posts.type === 'md');
-    return {
-        ok: true,
-        value: posts
-    };
+    return await response.json();
 }
 
 
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index de6ddb9..b88dd0e 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -4,26 +4,27 @@ import BlogPostCard from '@/app/blog/BlogPostCard';
 
 async function Blog() {
 
-    const res = await fetch_posts_list();
-    if (!res.ok) {
-        console.log(res.error);
-        return;
+    try {
+        const res = await fetch_posts_list();
+        let posts = res['posts'];
+        return (
+            // blog list
+            <ul className={ 'flex flex-col items-center w-full max-w-[1024px]' }>
+                { posts.map((post: JSON, key: React.Key | null | undefined) => (
+                    <li key={ key } className={ 'my-3.5 mx-7 w-[80%]' }>
+                        <BlogPostCard post={ post } />
+                    </li>)
+                ) }
+            </ul>
+        );
+    } catch (e: any) {
+        return (
+            <>
+                { e.toString() }
+            </>
+        );
     }
-    const posts = res.value;
 
-    console.log(posts);
-
-    return (
-
-        // blog list
-        <ul className={ 'flex flex-col items-center w-full max-w-[1024px]' }>
-            { posts.map((post, key) => (
-                <li key={ key } className={ 'my-3.5 mx-7 w-[80%]' }>
-                    <BlogPostCard post={ post } />
-                </li>)
-            ) }
-        </ul>
-    );
 }
 
 export default Blog;