From c980031bfca3a2135f8521f5f5b577c7eefcb9ae Mon Sep 17 00:00:00 2001
From: CodeZhangBorui <zhangborui.2008@foxmail.com>
Date: Sun, 18 Aug 2024 19:54:55 +0800
Subject: [PATCH] feat: Add ViewPassagePage (Inital Version)

---
 pages/news.tsx               | 20 ++++++---
 pages/viewpassage.module.css | 27 ++++++++++++
 pages/viewpassage.tsx        | 82 ++++++++++++++++++++++++++++++++++++
 3 files changed, 123 insertions(+), 6 deletions(-)
 create mode 100644 pages/viewpassage.module.css
 create mode 100644 pages/viewpassage.tsx

diff --git a/pages/news.tsx b/pages/news.tsx
index d183b13..e2785c4 100644
--- a/pages/news.tsx
+++ b/pages/news.tsx
@@ -8,14 +8,17 @@ import { Passage } from "@/components/wppassage";
 
 export default function NewsPage() {
   const [passages, setPassages] = useState([]);
-  const [loading, setLoading] = useState(true);
+  const [loadStat, setLoadStat] = useState("loading");
 
   useEffect(() => {
     fetch("https://mc.hjfunny.site/wp-json/wp/v2/posts?per_page=20")
       .then((response) => response.json())
       .then((data) => {
         setPassages(data);
-        setLoading(false);
+        setLoadStat("loaded");
+      })
+      .catch(() => {
+        setLoadStat("error");
       });
   }, []);
 
@@ -23,8 +26,8 @@ export default function NewsPage() {
     <DefaultLayout title="最近新闻">
       <section className="max-w-6xl mx-auto px-10 py-5 my-8">
         <h1 className="text-lg font-bold">最近新闻</h1>
-        {loading ? (
-          <Card className="mt-5 p-8">
+        {loadStat == "loading" ? (
+          <Card className="mt-5 p-5">
             <Skeleton className="rounded-lg mb-2">
               <h2>Skeleton</h2>
             </Skeleton>
@@ -40,16 +43,21 @@ export default function NewsPage() {
               </h2>
             </Skeleton>
           </Card>
-        ) : (
+        ) : loadStat == "loaded" ? (
           passages.map((passage) => (
             <Passage
               key={passage["id"]}
               description={passage["excerpt"]["rendered"]}
               publishtime={passage["date"]}
               title={passage["title"]["rendered"]}
-              url={`/post/${passage["slug"]}`}
+              // url={`/post/${passage["slug"]}`}
+              url={`/viewpassage?id=${passage["id"]}`}
             />
           ))
+        ) : (
+          <Card className="mt-5 p-8">
+            <h2 className="text-lg font-bold text-center">加载失败</h2>
+          </Card>
         )}
       </section>
     </DefaultLayout>
diff --git a/pages/viewpassage.module.css b/pages/viewpassage.module.css
new file mode 100644
index 0000000..ba1ee9e
--- /dev/null
+++ b/pages/viewpassage.module.css
@@ -0,0 +1,27 @@
+.content h1 {
+    font-size: 1.5rem; /* 24px */
+    line-height: 2rem; /* 32px */
+    margin-top: 0.5rem; /* 8px */
+    margin-bottom: 0.25rem; /* 4px */
+    font-weight: 700;
+}
+
+.content h2 {
+    font-size: 1.25rem; /* 20px */
+    line-height: 1.75rem; /* 28px */
+    margin-top: 0.5rem; /* 8px */
+    margin-bottom: 0.25rem; /* 4px */
+    font-weight: 700;
+}
+
+.content h3 {
+    font-size: 1.125rem; /* 18px */
+    line-height: 1.75rem; /* 28px */
+    margin-top: 0.5rem; /* 8px */
+    margin-bottom: 0.25rem; /* 4px */
+    font-weight: 700;
+}
+
+.content a {
+    color: #338cf1;
+}
\ No newline at end of file
diff --git a/pages/viewpassage.tsx b/pages/viewpassage.tsx
new file mode 100644
index 0000000..7ac1661
--- /dev/null
+++ b/pages/viewpassage.tsx
@@ -0,0 +1,82 @@
+import { Card } from "@nextui-org/card";
+import { Skeleton } from "@nextui-org/skeleton";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+import DefaultLayout from "@/layouts/default";
+import { siteConfig } from "@/config/site";
+
+import styles from "./viewpassage.module.css";
+
+export default function ViewPassagePage() {
+  const router = useRouter();
+  const { id } = router.query;
+
+  const [post, setPost] = useState(null);
+  const [loadStat, setLoadStat] = useState("loading");
+
+  useEffect(() => {
+    if (id) {
+      fetch(`https://mc.hjfunny.site/wp-json/wp/v2/posts/${id}`)
+        .then((response) => response.json())
+        .then((data) => {
+          setPost(data);
+          setLoadStat("loaded");
+          if (post) {
+            document.title = `${post["title"]["rendered"]} - ${siteConfig.name}`;
+          }
+        })
+        .catch(() => {
+          setLoadStat("error");
+        });
+    }
+  }, [id]);
+
+  return (
+    <DefaultLayout
+      title={
+        loadStat == "loaded" && post ? post["title"]["rendered"] : "查看文章"
+      }
+    >
+      <section className="max-w-6xl mx-auto px-10 py-5 my-8">
+        {loadStat == "loading" ? (
+          <>
+            <Skeleton className="rounded-lg mb-2">
+              <h1 className="text-lg font-bold">Skeleton</h1>
+            </Skeleton>
+            <Card className="mt-5 p-5">
+              <Skeleton className="rounded-lg">
+                <h2>
+                  Skeleton
+                  <br />
+                  Skeleton
+                  <br />
+                  Skeleton
+                  <br />
+                  Skeleton
+                </h2>
+              </Skeleton>
+            </Card>
+          </>
+        ) : loadStat == "loaded" && post ? (
+          <>
+            <h1 className="text-lg font-bold mb-2">
+              {post["title"]["rendered"]}
+            </h1>
+            <p>{String(post["date"]).replace("T", " ")}</p>
+            <Card className="mt-5 p-5">
+              <div
+                className={styles.content}
+                dangerouslySetInnerHTML={{
+                  __html: post["content"]["rendered"],
+                }}
+              />
+            </Card>
+          </>
+        ) : (
+          <></>
+        )}
+      </section>
+    </DefaultLayout>
+  );
+}