Merge pull request #8 from weseek/feat/TC2023E-22-add-detail-page

Feat/tc2023e-22 add detail page

apps/mobliz-clone/package.json

@@ -13,9 +13,10 @@
   },
   "dependencies": {
     "axios": "^0.24.0",
+    "html-react-parser": "^4.2.2",
+    "next": "^13.3.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "next": "^13.3.0"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "bootstrap": "^5.3.2"

apps/mobliz-clone/src/pages/[pageId].tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+
+import parse from 'html-react-parser';
+import { NextPage, GetServerSideProps } from 'next';
+import { useRouter } from 'next/router';
+
+import axios from '~/utils/axios';
+
+type Props = {
+  pageId: string
+}
+
+const DetailPage: NextPage<Props> = (props: Props) => {
+  const router = useRouter();
+  const pageId = router.query.pageId ?? props.pageId;
+  const [htmlString, setHTMLString] = useState();
+  const [error, setError] = useState<string>();
+
+  useEffect(() => {
+    axios.get(`http://localhost:3000/_cms/${pageId}.json`)
+      .then((response) => {
+        setHTMLString(response.data.htmlString);
+      })
+      .catch((error) => {
+        setError(`データの取得に失敗しました。\n${JSON.stringify(error)}`);
+      });
+  }, [pageId]);
+
+  return (
+    <div className="border bg-white p-5">
+      {error == null ? (
+        <>
+          {htmlString == null ? (
+            <div className="spinner-border" role="status">
+              <span className="visually-hidden">Loading...</span>
+            </div>
+          ) : (
+            <>{parse(htmlString)}</>
+          )}
+        </>
+      ) : (
+        <p>{error}</p>
+      )}
+    </div>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async(context) => {
+  const pageId = context.query.pageId;
+
+  if (typeof pageId !== 'string') {
+    return {
+      notFound: true,
+    };
+  }
+
+  return { props: { pageId } };
+};
+
+export default DetailPage;