refactor: structure code consistently

apps/next-app/pages/blog/[postId].page.tsx

@@ -1,110 +1,25 @@
 import * as fs from "node:fs/promises";
-import { useEffect } from "react";
-import { default as AirplaneTicketIcon } from "@mui/icons-material/AirplaneTicket";
-import { default as ChevronRightIcon } from "@mui/icons-material/ChevronRight";
-import { default as FlightTakeoffIcon } from "@mui/icons-material/FlightTakeoff";
-import { default as KeyboardArrowLeftIcon } from "@mui/icons-material/KeyboardArrowLeft";
-import { default as StyleIcon } from "@mui/icons-material/Style";
-import { Box, Link, Divider, Typography, Stack } from "@mui/joy";
-import { getRequiredParam } from "libs/react/containers/src/wraper";
-import { DateTime } from "luxon";
-import {
-  AppHead,
-  BackgroundFadedImage,
-  BlogPostChip,
-  Markdown,
-  MarkdownClientDemo,
-  ModuleSelectionButton,
-} from "@chair-flight/react/components";
-import {
-  AnnexSearch,
-  LayoutPublic,
-  QuestionOverview,
-  QuestionSearch,
-} from "@chair-flight/react/containers";
-import { useUserVoyage } from "@chair-flight/react/containers";
+import { BackgroundFadedImage } from "@chair-flight/react/components";
+import { BlogPost, LayoutPublic } from "@chair-flight/react/containers";
 import { staticHandler, staticPathsHandler } from "@chair-flight/trpc/server";
-import type { AppRouterOutput } from "@chair-flight/trpc/server";
 import type { NextPage } from "next";
 
-type PageProps = AppRouterOutput["blog"]["getBlogPost"]["post"];
 type PageParams = { postId: string };
+type PageProps = PageParams;
 
 export const Page: NextPage<PageProps> = (props) => {
-  useEffect(() => useUserVoyage.markBlogAsVisited, []);
-
   return (
     <LayoutPublic background={<BackgroundFadedImage img="article" />}>
-      <AppHead
-        title={props.title}
-        linkTitle={props.title}
-        linkDescription={props.description}
-      />
-      <Link
-        sx={{ flex: 0, mr: "auto", pb: 2 }}
-        color="primary"
-        underline="none"
-        href="/articles/blog"
-        startDecorator={<KeyboardArrowLeftIcon />}
-        children="Back"
-      />
-      <Typography
-        level="body-sm"
-        children={DateTime.fromISO(props.date).toFormat("dd LLL yyyy")}
-      />
-      <Typography
-        level="h2"
-        component="h1"
-        sx={{ fontWeight: "bold" }}
-        children={props.title}
-      />
-      <Divider sx={{ width: "100%", mb: 1 }} />
-      <Box sx={{ mb: 4 }}>
-        <BlogPostChip
-          tag={props.tag}
-          variant="soft"
-          slotProps={{
-            action: {
-              component: Link,
-              href: props.tagHref,
-            },
-          }}
-        />
-      </Box>
-
-      <Markdown
-        document={props.mdxContent}
-        components={{
-          Stack,
-          Link,
-          AnnexSearch,
-          ModuleSelectionButton,
-          QuestionOverview,
-          MarkdownClientDemo,
-          AirplaneTicketIcon,
-          ChevronRightIcon,
-          FlightTakeoffIcon,
-          StyleIcon,
-          QuestionSearch,
-        }}
-      />
-
-      <Typography
-        level="h3"
-        component="span"
-        sx={{ fontWeight: "bold", my: 4, textAlign: "center" }}
-        children={"See you in the Skies!"}
-      />
+      <BlogPost {...props} />
     </LayoutPublic>
   );
 };
 
 export const getStaticProps = staticHandler<PageProps, PageParams>(
   async ({ params, helper }) => {
-    const postId = getRequiredParam(params, "postId");
-    const { post } = await helper.blog.getBlogPost.fetch({ postId });
+    await BlogPost.getData({ helper, params });
     await LayoutPublic.getData({ helper, params });
-    return { props: post };
+    return { props: params };
   },
   fs,
 );

apps/next-app/pages/blog/index.page.tsx

@@ -1,5 +1,5 @@
 import * as fs from "node:fs/promises";
-import { useEffect, type FunctionComponent } from "react";
+import { type FunctionComponent } from "react";
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import {
   Card,
@@ -17,14 +17,13 @@ import {
   BackgroundFadedImage,
   BlogPostChip,
 } from "@chair-flight/react/components";
-import { LayoutPublic, useUserVoyage } from "@chair-flight/react/containers";
+import { LayoutPublic } from "@chair-flight/react/containers";
 import { staticHandler } from "@chair-flight/trpc/server";
 import type { AppRouterOutput } from "@chair-flight/trpc/server";
 
 export type PageProps = AppRouterOutput["blog"]["getBlogPostsMeta"];
 
 const Page: FunctionComponent<PageProps> = ({ meta }) => {
-  useEffect(() => useUserVoyage.markBlogAsVisited, []);
   return (
     <LayoutPublic background={<BackgroundFadedImage img="article" />}>
       <AppHead linkDescription={dedent``} />

libs/react/containers/src/blog/blog-post/blog-post.tsx

@@ -0,0 +1,114 @@
+import { useEffect } from "react";
+import { default as AirplaneTicketIcon } from "@mui/icons-material/AirplaneTicket";
+import { default as ChevronRightIcon } from "@mui/icons-material/ChevronRight";
+import { default as FlightTakeoffIcon } from "@mui/icons-material/FlightTakeoff";
+import { default as KeyboardArrowLeftIcon } from "@mui/icons-material/KeyboardArrowLeft";
+import { default as StyleIcon } from "@mui/icons-material/Style";
+import { Box, Divider, Link, Stack, Typography } from "@mui/joy";
+import { DateTime } from "luxon";
+import {
+  AppHead,
+  BlogPostChip,
+  Markdown,
+  MarkdownClientDemo,
+  ModuleSelectionButton,
+} from "@chair-flight/react/components";
+import { trpc } from "@chair-flight/trpc/client";
+import { AnnexSearch } from "../../annexes/annex-search";
+import { QuestionOverview } from "../../questions/question-overview";
+import { QuestionSearch } from "../../questions/question-search";
+import { useUserVoyage } from "../../user/hooks/use-user-voyage";
+import { container, getRequiredParam } from "../../wraper";
+import type { Container } from "../../wraper/container";
+import type { AppRouterOutput } from "@chair-flight/trpc/client";
+
+type Props = { postId: string };
+type Params = Props;
+type Data = AppRouterOutput["blog"]["getBlogPost"];
+
+export const BlogPost: Container<Props, Params, Data> = container<
+  Props,
+  Params,
+  Data
+>((params) => {
+  const { post } = BlogPost.useData(params);
+
+  useEffect(() => useUserVoyage.markBlogAsVisited, []);
+
+  return (
+    <>
+      <AppHead
+        title={post.title}
+        linkTitle={post.title}
+        linkDescription={post.description}
+      />
+      <Link
+        sx={{ flex: 0, mr: "auto", pb: 2 }}
+        color="primary"
+        underline="none"
+        href="/articles/blog"
+        startDecorator={<KeyboardArrowLeftIcon />}
+        children="Back"
+      />
+      <Typography
+        level="body-sm"
+        children={DateTime.fromISO(post.date).toFormat("dd LLL yyyy")}
+      />
+      <Typography
+        level="h2"
+        component="h1"
+        sx={{ fontWeight: "bold" }}
+        children={post.title}
+      />
+      <Divider sx={{ width: "100%", mb: 1 }} />
+      <Box sx={{ mb: 4 }}>
+        <BlogPostChip
+          tag={post.tag}
+          variant="soft"
+          slotProps={{
+            action: {
+              component: Link,
+              href: post.tagHref,
+            },
+          }}
+        />
+      </Box>
+
+      <Markdown
+        document={post.mdxContent}
+        components={{
+          Stack,
+          Link,
+          AnnexSearch,
+          ModuleSelectionButton,
+          QuestionOverview,
+          MarkdownClientDemo,
+          AirplaneTicketIcon,
+          ChevronRightIcon,
+          FlightTakeoffIcon,
+          StyleIcon,
+          QuestionSearch,
+        }}
+      />
+
+      <Typography
+        level="h3"
+        component="span"
+        sx={{ fontWeight: "bold", my: 4, textAlign: "center" }}
+        children={"See you in the Skies!"}
+      />
+    </>
+  );
+});
+
+BlogPost.displayName = "BlogPost";
+
+BlogPost.getData = async ({ helper, params }) => {
+  const postId = getRequiredParam(params, "postId");
+  return await helper.blog.getBlogPost.fetch({ postId });
+};
+
+BlogPost.useData = (params) => {
+  const postId = getRequiredParam(params, "postId");
+  return trpc.blog.getBlogPost.useSuspenseQuery({ postId })[0];
+};

libs/react/containers/src/blog/blog-post/index.ts

@@ -0,0 +1 @@
+export { BlogPost } from "./blog-post";

libs/react/containers/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./annexes/annex-search";
+export * from "./blog/blog-post";
 export * from "./docs/doc-content";
 export * from "./docs/doc-search";
 export * from "./flashcards/flashcard-collection-list";
@@ -22,4 +23,3 @@ export * from "./tests/test-review";
 export * from "./tests/test-search";
 export * from "./tests/test-study";
 export * from "./user/user-settings";
-export * from "./user/hooks/use-user-voyage";