From abe656bf63522182da54fa403b693e74e379715e Mon Sep 17 00:00:00 2001
From: Clemence Kyara <clemence@codeforafrica.org>
Date: Mon, 30 Sep 2024 16:56:10 +0300
Subject: [PATCH] Update Props definition + handle 404

---
 apps/techlabblog/app/[slug]/page.tsx                   | 10 +++++++---
 apps/techlabblog/components/PostHeader/PostSxProps.tsx |  4 ++--
 apps/techlabblog/mdx-components.tsx                    |  2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/techlabblog/app/[slug]/page.tsx b/apps/techlabblog/app/[slug]/page.tsx
index 1ae70c70b..d4ded021f 100644
--- a/apps/techlabblog/app/[slug]/page.tsx
+++ b/apps/techlabblog/app/[slug]/page.tsx
@@ -4,8 +4,12 @@ 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={{
@@ -13,7 +17,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
         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
index 17de1522c..0750143fb 100644
--- 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
index f5e02f101..e338c9a96 100644
--- 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"),