From 108318a3a9bfd83fb241d8fe70499f213b3114d4 Mon Sep 17 00:00:00 2001
From: yoshinorin <yoshinorin.net@outlook.com>
Date: Tue, 2 Jan 2024 17:00:20 +0900
Subject: [PATCH] update

---
 src/app/tags/[...slug].tsx          | 88 -----------------------------
 src/app/tags/[...slug]/page.tsx     | 54 ++++++++++++++++++
 src/app/tags/[...slug]/renderer.tsx | 46 +++++++++++++++
 3 files changed, 100 insertions(+), 88 deletions(-)
 delete mode 100644 src/app/tags/[...slug].tsx
 create mode 100644 src/app/tags/[...slug]/page.tsx
 create mode 100644 src/app/tags/[...slug]/renderer.tsx

diff --git a/src/app/tags/[...slug].tsx b/src/app/tags/[...slug].tsx
deleted file mode 100644
index 6d2b6e6..0000000
--- a/src/app/tags/[...slug].tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import HeadMetaComponent from '../../components/headmeta';
-import CoverWithNavigationComponent from '../../components/cover/withNavigation';
-import ArticlesComponent from '../../components/articles';
-import PaginationComponent from '../../components/pagination';
-import { getArticlesByTagName } from '../../api/articles';
-import { Article, ArticleResponseWithCount } from '../../models/article';
-import { defaultRobotsMeta } from '../../../config';
-import { getRequestContext } from '../../utils/requestContext';
-import PlanePage from '../../components/planePage';
-
-export default function Page({ statusCode, tagName, currentPage, count, articles }) {
-  if (statusCode !== 200) {
-    return <PlanePage
-      title={statusCode.toString()}
-      content="Something went to wrong..."
-    />
-  }
-
-  return (
-    <>
-      <HeadMetaComponent
-        robotsMeta={defaultRobotsMeta}
-      />
-      <CoverWithNavigationComponent
-        contentCover={{
-          title: "Tags",
-          tags: null,
-          publishedAt: null,
-        }}
-      />
-      <main>
-        <ArticlesComponent
-          articles={articles}
-        />
-        <PaginationComponent
-          basePath={`tags/${tagName}`}
-          current={currentPage}
-          total={count}
-        />
-      </main>
-    </>
-  )
-}
-
-export async function getServerSideProps(ctx: any) {
-  const tagName = ctx.query.slug[0];
-  const currentPage = ctx.query.slug[1] ? ctx.query.slug[1] : 1;
-  const response: Response = await getArticlesByTagName(tagName, currentPage, 10, getRequestContext(ctx.req))
-  ctx.res.statusCode = response.status;
-
-  let articlesResponseWithCount: ArticleResponseWithCount = null;
-  let articles: Array<Article> = [];
-  if (response.status === 200) {
-    articlesResponseWithCount = await response.json() as ArticleResponseWithCount;
-    articles = articlesResponseWithCount.articles.map(article => {
-      return {
-        path: article.path,
-        title: article.title,
-        content: `${article.content} ...`,
-        publishedAt: article.publishedAt,
-        updatedAt: article.updatedAt
-      } as Article
-    });
-  }
-
-  // TODO: maybe can improve...
-  if (articles.length < 1) {
-    return {
-      props: {
-        statusCode: 404,
-        tagName: tagName,
-        currentPage: 1,
-        count: 0,
-        articles: articles
-      }
-    }
-  }
-
-  return {
-    props: {
-      statusCode: response.status,
-      tagName: tagName,
-      currentPage: currentPage,
-      count: articlesResponseWithCount.count,
-      articles: articles
-    }
-  }
-}
diff --git a/src/app/tags/[...slug]/page.tsx b/src/app/tags/[...slug]/page.tsx
new file mode 100644
index 0000000..d8d03a8
--- /dev/null
+++ b/src/app/tags/[...slug]/page.tsx
@@ -0,0 +1,54 @@
+import { getArticlesByTagName } from '../../../api/articles';
+import { Article, ArticleResponseWithCount } from '../../../models/article';
+import { getRequestContext } from '../../../utils/requestContext';
+import { Renderer } from './renderer';
+
+export default async function Page(ctx: any) {
+  const { props } = await get(ctx);
+  return <Renderer {...props} />;
+}
+
+export async function get(ctx: any) {
+  const tagName = decodeURI(ctx.params.slug[0]);
+  const currentPage = ctx.params.slug[1] ? ctx.params.slug[1] : 1;
+  const response: Response = await getArticlesByTagName(tagName, currentPage, 10, getRequestContext(ctx));
+  // ctx.res.statusCode = response.status;
+
+  let articlesResponseWithCount: ArticleResponseWithCount = null;
+  let articles: Array<Article> = [];
+  if (response.status === 200) {
+    articlesResponseWithCount = await response.json() as ArticleResponseWithCount;
+    articles = articlesResponseWithCount.articles.map(article => {
+      return {
+        path: article.path,
+        title: article.title,
+        content: `${article.content} ...`,
+        publishedAt: article.publishedAt,
+        updatedAt: article.updatedAt
+      } as Article
+    });
+  }
+
+  // TODO: maybe can improve...
+  if (articles.length < 1) {
+    return {
+      props: {
+        statusCode: 404,
+        tagName: tagName,
+        currentPage: 1,
+        count: 0,
+        articles: articles
+      }
+    }
+  }
+
+  return {
+    props: {
+      statusCode: response.status,
+      tagName: tagName,
+      currentPage: currentPage,
+      count: articlesResponseWithCount.count,
+      articles: articles
+    }
+  }
+}
diff --git a/src/app/tags/[...slug]/renderer.tsx b/src/app/tags/[...slug]/renderer.tsx
new file mode 100644
index 0000000..fad15b2
--- /dev/null
+++ b/src/app/tags/[...slug]/renderer.tsx
@@ -0,0 +1,46 @@
+import HeadMetaComponent from '../../../components/headmeta';
+import CoverWithNavigationComponent from '../../../components/cover/withNavigation';
+import ArticlesComponent from '../../../components/articles';
+import PaginationComponent from '../../../components/pagination';
+import { defaultRobotsMeta } from '../../../../config';
+import PlanePage from '../../../components/planePage';
+
+export const Renderer: React.FunctionComponent<{
+  statusCode,
+  tagName,
+  currentPage,
+  count,
+  articles
+}> = ({ statusCode, tagName, currentPage, count, articles }) => {
+  if (statusCode !== 200) {
+    return <PlanePage
+      title={statusCode.toString()}
+      content="Something went to wrong..."
+    />
+  }
+
+  return (
+    <>
+      <HeadMetaComponent
+        robotsMeta={defaultRobotsMeta}
+      />
+      <CoverWithNavigationComponent
+        contentCover={{
+          title: "Tags",
+          tags: null,
+          publishedAt: null,
+        }}
+      />
+      <main>
+        <ArticlesComponent
+          articles={articles}
+        />
+        <PaginationComponent
+          basePath={`tags/${tagName}`}
+          current={currentPage}
+          total={count}
+        />
+      </main>
+    </>
+  )
+}