Update Props definition + handle 404

CodeForAfrica · Sep 30, 2024 · abe656b · abe656b
1 parent fab40fd
commit abe656b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/apps/techlabblog/app/[slug]/page.tsx b/apps/techlabblog/app/[slug]/page.tsx
@@ -4,16 +4,20 @@ import { getPost } from "@/techlabblog/lib/data";
 import PostHeader from "@/techlabblog/components/PostHeader";
 
 export default async function Page({ params }: { params: { slug: string } }) {
-  const { default: PostContent, frontmatter } = await getPost(params.slug);
-
+  const postModule = await getPost(params.slug);
+  if (!postModule) {
+    // TODO(kilemensi): 404
+    return null;
+  }
+  const { default: PostContent, frontmatter } = postModule;
   return (
     <Section
       sx={{
         px: { xs: 2.5, sm: 0 },
         py: { xs: 2.5, sm: 5 },
       }}
     >
-      <PostHeader {...frontmatter} />
+      {frontmatter ? <PostHeader {...frontmatter} /> : null}
       <PostContent />
     </Section>
   );

diff --git a/apps/techlabblog/components/PostHeader/PostSxProps.tsx b/apps/techlabblog/components/PostHeader/PostSxProps.tsx
@@ -1,8 +1,8 @@
 import type { SxProps, Theme } from "@mui/material/styles";
 
-import { PostFrontMatterProps } from "@/techlabblog/lib/data";
+import { Post } from "@/techlabblog/lib/data";
 
-interface PostSxProps extends PostFrontMatterProps {
+interface PostSxProps extends Post {
   sx?: SxProps<Theme>;
 }
 

diff --git a/apps/techlabblog/mdx-components.tsx b/apps/techlabblog/mdx-components.tsx
@@ -33,7 +33,7 @@ function createHeading(variant: Variant): HTMLHeadingElement {
   );
 }
 
-export function useMDXComponents(components: MDXComponents): MDXComponents {
+export function useMDXComponents(components?: MDXComponents): MDXComponents {
   return {
     h1: createHeading("h1"),
     h2: createHeading("h2"),