From 6d77b11ffc5cfb45a525b51bc909227a0c133cd3 Mon Sep 17 00:00:00 2001
From: yoshinorin <yoshinorin.net@outlook.com>
Date: Tue, 2 Jan 2024 15:04:16 +0900
Subject: [PATCH] update

---
 src/api/content.ts                      |  3 +-
 src/app/articles/[...slug].tsx          | 96 -------------------------
 src/app/articles/[...slug]/page.tsx     | 53 ++++++++++++++
 src/app/articles/[...slug]/renderer.tsx | 56 +++++++++++++++
 4 files changed, 111 insertions(+), 97 deletions(-)
 delete mode 100644 src/app/articles/[...slug].tsx
 create mode 100644 src/app/articles/[...slug]/page.tsx
 create mode 100644 src/app/articles/[...slug]/renderer.tsx

diff --git a/src/api/content.ts b/src/api/content.ts
index 51647c2..ddb3a21 100644
--- a/src/api/content.ts
+++ b/src/api/content.ts
@@ -4,8 +4,9 @@ import { isIgnoreRequest } from '../utils/filterRequests';
 import { getRequestContext } from '../utils/requestContext';
 import { generateRequestHeaderObject } from './utils/header';
 
+// TODO:
 // export async function findByPath(req: NextApiRequest, path: string): Promise<Response> {
-  export async function findByPath(path: string): Promise<Response> {
+export async function findByPath(path: string): Promise<Response> {
 
   if (!path || (path && isIgnoreRequest(path))) {
     return new Response(null, { "status" : 404 });
diff --git a/src/app/articles/[...slug].tsx b/src/app/articles/[...slug].tsx
deleted file mode 100644
index 015fe10..0000000
--- a/src/app/articles/[...slug].tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import ContentComponent from '../../components/content';
-import CoverWithNavigationComponent from '../../components/cover/withNavigation';
-import HeadMetaComponent from '../../components/headmeta';
-import MainBottomCodesComponent from '../../components/mainBottomCodes';
-import { ContentResponse, Content } from '../../models/content';
-import { Insight } from '../../models/insight';
-import { ScriptCode } from '../../models/script';
-import { isIgnoreRequest } from '../../utils/filterRequests';
-import { findByPath } from '../../api/content';
-import { getScriptCodes } from '../../utils/scriptTags';
-import { externalResources as externalResourcesConfig } from '../../../config';
-import { asInsight } from '../../utils/converters';
-import PlanePage from '../../components/planePage';
-
-const Article: React.FunctionComponent<{ statusCode: number, content: Content, insight: Insight }> = ({ statusCode, content, insight }) => {
-  if (statusCode !== 200) {
-    return <PlanePage
-      title={statusCode.toString()}
-      content="Something went to wrong..."
-    />
-  }
-
-  let externalResourceCodes: Array<ScriptCode> = [];
-  const hasExternalResources = (content.externalResources && externalResourcesConfig);
-  if (hasExternalResources) {
-    externalResourceCodes = getScriptCodes(content.externalResources, externalResourcesConfig)
-  }
-  return (
-    <>
-      <HeadMetaComponent
-        robotsMeta={content.robotsAttributes}
-        externalResources={content.externalResources}
-        content={content}
-      />
-      <CoverWithNavigationComponent
-        contentCover={{
-          title: content.title,
-          tags: content.tags,
-          publishedAt: content.publishedAt,
-        }}
-      />
-      <main>
-        <ContentComponent
-          content={content}
-          insight={insight}
-        />
-        <MainBottomCodesComponent
-          scriptCodes={externalResourceCodes}
-        />
-      </main>
-    </>
-  )
-}
-
-export async function getServerSideProps(ctx: any) {
-  const path = "/articles/" + ctx.params.slug.join("/");
-
-  // avoid send request of images
-  if (isIgnoreRequest(path)) {
-    return {
-      props: {
-        statusCode: 404
-      }
-    }
-  }
-
-  const response: Response = await findByPath(ctx.req, path);
-  ctx.res.statusCode = response.status;
-
-  let content: Content = null;
-  if (response.status === 200) {
-    const contentResponse: ContentResponse = await response.json() as ContentResponse;
-    content = {
-      id: contentResponse.id,
-      title: contentResponse.title,
-      robotsAttributes: contentResponse.robotsAttributes,
-      externalResources: contentResponse.externalResources,
-      tags: contentResponse.tags,
-      description: contentResponse.description,
-      content: contentResponse.content,
-      length: contentResponse.length,
-      authorName: contentResponse.authorName,
-      publishedAt: contentResponse.publishedAt,
-      updatedAt: contentResponse.updatedAt
-    } as Content
-  }
-  return {
-    props: {
-      statusCode: response.status,
-      content: content,
-      insight: asInsight(response)
-    }
-  }
-}
-
-export default Article;
diff --git a/src/app/articles/[...slug]/page.tsx b/src/app/articles/[...slug]/page.tsx
new file mode 100644
index 0000000..aa3c2ac
--- /dev/null
+++ b/src/app/articles/[...slug]/page.tsx
@@ -0,0 +1,53 @@
+import { ContentResponse, Content } from '../../../models/content';
+import { isIgnoreRequest } from '../../../utils/filterRequests';
+import { findByPath } from '../../../api/content';
+import { asInsight } from '../../../utils/converters';
+import Renderer from './renderer';
+
+export default async function Page(req: any) {
+  const { props } = await get(req);
+  return <Renderer {...props} />;
+}
+
+export async function get(req: any) {
+  const path = "/articles/" + req.params.slug.join("/");
+
+  // avoid send request of images
+  // TODO
+  if (isIgnoreRequest(path)) {
+    return {
+      props: {
+        statusCode: 404
+      }
+    }
+  }
+
+  // const response: Response = await findByPath(ctx.req, path);
+  const response: Response = await findByPath(path);
+  // ctx.res.statusCode = response.status;
+
+  let content: Content = null;
+  if (response.status === 200) {
+    const contentResponse: ContentResponse = await response.json() as ContentResponse;
+    content = {
+      id: contentResponse.id,
+      title: contentResponse.title,
+      robotsAttributes: contentResponse.robotsAttributes,
+      externalResources: contentResponse.externalResources,
+      tags: contentResponse.tags,
+      description: contentResponse.description,
+      content: contentResponse.content,
+      length: contentResponse.length,
+      authorName: contentResponse.authorName,
+      publishedAt: contentResponse.publishedAt,
+      updatedAt: contentResponse.updatedAt
+    } as Content
+  }
+  return {
+    props: {
+      statusCode: response.status,
+      content: content,
+      insight: asInsight(response)
+    }
+  }
+}
diff --git a/src/app/articles/[...slug]/renderer.tsx b/src/app/articles/[...slug]/renderer.tsx
new file mode 100644
index 0000000..72274ae
--- /dev/null
+++ b/src/app/articles/[...slug]/renderer.tsx
@@ -0,0 +1,56 @@
+import ContentComponent from '../../../components/content';
+import CoverWithNavigationComponent from '../../../components/cover/withNavigation';
+import HeadMetaComponent from '../../../components/headmeta';
+import MainBottomCodesComponent from '../../../components/mainBottomCodes';
+import { Content } from '../../../models/content';
+import { Insight } from '../../../models/insight';
+import { ScriptCode } from '../../../models/script';
+import { getScriptCodes } from '../../../utils/scriptTags';
+import { externalResources as externalResourcesConfig } from '../../../../config';
+import PlanePage from '../../../components/planePage';
+
+const Renderer: React.FunctionComponent<{
+  statusCode: number,
+  content: Content,
+  insight: Insight
+}> = ({ statusCode, content, insight }) => {
+  if (statusCode !== 200) {
+    return <PlanePage
+      title={statusCode.toString()}
+      content="Something went to wrong..."
+    />
+  }
+
+  let externalResourceCodes: Array<ScriptCode> = [];
+  const hasExternalResources = (content.externalResources && externalResourcesConfig);
+  if (hasExternalResources) {
+    externalResourceCodes = getScriptCodes(content.externalResources, externalResourcesConfig)
+  }
+  return (
+    <>
+      <HeadMetaComponent
+        robotsMeta={content.robotsAttributes}
+        externalResources={content.externalResources}
+        content={content}
+      />
+      <CoverWithNavigationComponent
+        contentCover={{
+          title: content.title,
+          tags: content.tags,
+          publishedAt: content.publishedAt,
+        }}
+      />
+      <main>
+        <ContentComponent
+          content={content}
+          insight={insight}
+        />
+        <MainBottomCodesComponent
+          scriptCodes={externalResourceCodes}
+        />
+      </main>
+    </>
+  )
+}
+
+export default Renderer;