update

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 });

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)
+    }
+  }
+}

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;