feat: config mdx component for client rendering text markdown

mpsalunggg · mpsalunggg · commit 257e9154b7c6 · 2025-08-29T23:04:38.000+07:00
diff --git a/src/components/common/MDXContent/index.tsx b/src/components/common/MDXContent/index.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { FC } from "react";
+import { MDXRemote } from "next-mdx-remote";
+import { Skeleton } from "@/components/ui/Skeleton";
+import { useMDX } from "@/hooks/useMDX";
+import { cn } from "@/lib/utils";
+
+interface MDXContentProps {
+  content?: string;
+  className?: string;
+  fallbackText?: string;
+  showSkeleton?: boolean;
+  skeletonHeight?: string;
+  theme?: string;
+  parseFrontmatter?: boolean;
+}
+
+const MDXContent: FC<MDXContentProps> = ({
+  content,
+  className,
+  fallbackText,
+  showSkeleton = true,
+  skeletonHeight = "h-20",
+  theme = "github-dark",
+  parseFrontmatter = true,
+}) => {
+  const { mdxSource, isLoading } = useMDX(content, {
+    theme,
+    parseFrontmatter,
+  });
+
+  if (isLoading && showSkeleton) {
+    return <Skeleton className={cn(skeletonHeight, "w-full", className)} />;
+  }
+
+  if (!mdxSource) {
+    return (
+      <div className={cn("prose prose-sm dark:prose-invert max-w-none", className)}>
+        <p>{fallbackText || content}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("prose prose-sm dark:prose-invert max-w-none", className)}>
+      <MDXRemote {...mdxSource} />
+    </div>
+  );
+};
+
+export default MDXContent;
diff --git a/src/domains/Events.ts b/src/domains/Events.ts
@@ -4,6 +4,7 @@ export const eventSchema = z.object({
   id: z.number(),
   title: z.string(),
   description: z.string(),
+  // content: z.string().optional(),
   slug: z.string().optional(),
   author: z.string(),
   image: z.string(),
@@ -12,6 +13,7 @@ export const eventSchema = z.object({
   location: z.string(),
   duration: z.string(),
   capacity: z.number(),
+  date_event: z.string(),
   status: z.enum(["open", "soon", "closed"]),
   tags: z
     .array(
diff --git a/src/features/events/components/EventInfo.tsx b/src/features/events/components/EventInfo.tsx
@@ -17,7 +17,7 @@ const EventInfo: FC<{ event: EventType; className?: string }> = ({ event, classN
         <div className="flex h-4 items-center gap-2">
           <CalendarRange className="size-4 text-slate-700 dark:text-slate-300" />
           <p className="text-sm font-semibold text-slate-700 capitalize dark:text-slate-300">
-            {useFormatDate(event?.reservation_start_date)}
+            {useFormatDate(event?.date_event)}
           </p>
         </div>
         <div className="flex h-4 items-center gap-2">
diff --git a/src/features/events/hooks/useEvent.ts b/src/features/events/hooks/useEvent.ts
@@ -1,73 +1,33 @@
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
+import { useQuery } from "@tanstack/react-query";
 import { eventsService } from "@/services/events";
-import { EventType, UserEventType } from "@/domains/Events";
 
 export const useEventById = (eventId: string) => {
-  const [event, setEvent] = useState<EventType>({} as EventType);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-
-  useEffect(() => {
-    const getEvent = async () => {
-      setIsLoading(true);
-      try {
-        const res = await eventsService.getEventById(eventId);
-        setEvent(res.data);
-      } catch (err) {
-        toast.error(err instanceof Error ? err.message : "Something went wrong.");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    getEvent();
-  }, [eventId, toast]);
-
-  return { event, isLoading };
+  return useQuery({
+    queryKey: ["getEventById", eventId],
+    queryFn: async () => {
+      const response = await eventsService.getEventById(eventId);
+      return response.data;
+    },
+    enabled: !!eventId,
+  });
 };
 
 export const useEvents = () => {
-  const [events, setEvents] = useState<EventType[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-
-  useEffect(() => {
-    const getEvents = async () => {
-      setIsLoading(true);
-      try {
-        const res = await eventsService.getEvents();
-        setEvents(res.data);
-      } catch (err) {
-        toast.error(err instanceof Error ? err.message : "Something went wrong.");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    getEvents();
-  }, [toast]);
-
-  return { events, isLoading };
+  return useQuery({
+    queryKey: ["events"],
+    queryFn: async () => {
+      const response = await eventsService.getEvents();
+      return response.data;
+    },
+  });
 };
 
 export const useMyEvents = (page: number = 1, limit: number = 10) => {
-  const [myEvents, setMyEvents] = useState<UserEventType[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-
-  useEffect(() => {
-    const getEvents = async () => {
-      setIsLoading(true);
-      try {
-        const res = await eventsService.getMyEvents(page, limit);
-        setMyEvents(res.data);
-      } catch (err) {
-        toast.error(err instanceof Error ? err.message : "Something went wrong.");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    getEvents();
-  }, [toast]);
-
-  return { myEvents, isLoading };
+  return useQuery({
+    queryKey: ["myEvents", page, limit],
+    queryFn: async () => {
+      const response = await eventsService.getMyEvents(page, limit);
+      return response.data;
+    },
+  });
 };
diff --git a/src/features/events/pages/PublicEventDetailPage.tsx b/src/features/events/pages/PublicEventDetailPage.tsx
@@ -11,14 +11,15 @@ import EventBreadcrumbs from "../components/EventBreadcrumb";
 import EventFormRegistration from "../components/EventFormRegistration";
 import { useEventById } from "../hooks/useEvent";
 import { Separator } from "@/components/ui/Separator";
+import MDXContent from "@/components/common/MDXContent";
 
 interface EventDetailPageProp {
   eventId: string;
 }
 
 const EventDetailPage: FC<EventDetailPageProp> = ({ eventId }) => {
   const t = useTranslations("EventsPage");
-  const { event, isLoading } = useEventById(eventId);
+  const { data: event, isLoading } = useEventById(eventId);
 
   return (
     <div className="container mx-auto space-y-6 py-24">
@@ -41,7 +42,7 @@ const EventDetailPage: FC<EventDetailPageProp> = ({ eventId }) => {
           <EventBreadcrumbs />
           <div className="space-y-6">
             <h1 className="text-xl font-bold sm:text-3xl md:mt-8">{event?.title}</h1>
-            {!isLoading ? (
+            {!isLoading && event ? (
               <EventInfo event={event} className="lg:hidden" />
             ) : (
               <Skeleton className="h-10 w-full rounded-lg" />
@@ -50,38 +51,18 @@ const EventDetailPage: FC<EventDetailPageProp> = ({ eventId }) => {
               <TitleContainer>
                 <h2 className="font-semibold sm:text-xl">{t("EventDetail.desc-title")}</h2>
               </TitleContainer>
-              <p className="text-sm text-slate-600 sm:text-base dark:text-slate-400">
-                {event?.description} Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, doloremque?
-                Blanditiis a aspernatur eveniet, similique magni pariatur autem debitis odit suscipit laboriosam
-                repellat consequuntur distinctio consequatur, doloribus ea deserunt? Voluptatibus quaerat, facere ipsa
-                eum temporibus eaque ad commodi? Temporibus esse minima vitae nisi reprehenderit obcaecati doloremque
-                voluptatibus autem accusantium delectus, voluptatem hic ipsam aspernatur voluptatum quod necessitatibus?
-                Ad exercitationem molestiae voluptas dolorem excepturi, earum deserunt ab. Aspernatur molestias impedit
-                repudiandae blanditiis eaque minima, a quasi laudantium cumque quo, neque possimus sunt, inventore
-                minus. Quae eius facere cupiditate libero excepturi incidunt qui temporibus? Molestiae sint fugiat
-                delectus. Alias ea doloremque totam veritatis fuga sequi labore, numquam unde, natus nostrum illum neque
-                facilis laudantium corporis hic fugiat ullam. Voluptatum ut fuga placeat molestiae nobis quasi corrupti
-                in, iure itaque quae tempora doloribus error dolore, totam quo rerum rem quos ex consequatur! Vel
-                laudantium harum, libero inventore eum velit eveniet cumque, illum modi ducimus accusantium quas,
-                mollitia distinctio ratione molestias ipsam impedit repudiandae itaque. Eligendi sed architecto ex
-                explicabo nostrum aspernatur accusantium ratione veritatis delectus laudantium eius magnam voluptatibus
-                autem, quas cum enim consequuntur veniam incidunt quisquam saepe aliquid sequi eveniet officiis atque!
-                Inventore alias odit debitis sunt, animi ea maiores porro dolorem sint ipsa? Saepe, molestiae cumque
-                voluptate, a quaerat ad, quia placeat explicabo animi ullam totam aliquam! Distinctio beatae aliquam eos
-                dicta vero, placeat praesentium voluptas labore nesciunt illum at esse, ducimus recusandae veniam
-                accusamus optio minima earum cumque. Nostrum corrupti fuga provident quibusdam repellendus, molestias ut
-                vel aspernatur eum mollitia in quisquam praesentium minus doloremque esse? Fugiat, distinctio fuga
-                repellendus pariatur illo fugit, quisquam odio neque, dignissimos reprehenderit eveniet. Aspernatur
-                praesentium tempora perspiciatis excepturi, exercitationem, dolores non labore deserunt assumenda ab
-                animi debitis obcaecati nemo est corrupti sint laudantium ipsa quibusdam explicabo nobis, saepe sunt
-                nostrum perferendis optio! Ullam, quisquam!
-              </p>
+              <MDXContent
+                content={event?.description}
+                fallbackText={event?.description}
+                theme="github-dark"
+                skeletonHeight="h-20"
+              />
             </div>
           </div>
         </div>
         <div className="fixed right-0 bottom-0 left-0 flex w-full items-center justify-between gap-4 self-start rounded-lg bg-white lg:sticky lg:top-24 lg:flex-col lg:justify-start lg:bg-transparent lg:px-4 dark:bg-slate-950">
           <div className="hidden w-full space-y-6 rounded-lg border p-4 lg:block">
-            {!isLoading ? <EventInfo event={event} /> : <Skeleton className="h-4 w-full rounded-lg" />}
+            {!isLoading && event ? <EventInfo event={event} /> : <Skeleton className="h-4 w-full rounded-lg" />}
           </div>
           <div className="flex w-full flex-col gap-4 rounded-lg border-t px-6 py-4 sm:border">
             <div className="flex w-full items-center justify-between">
@@ -91,7 +72,7 @@ const EventDetailPage: FC<EventDetailPageProp> = ({ eventId }) => {
               <p className="text-sm font-bold dark:text-slate-200">{useFormatPrice(event?.price)}</p>
             </div>
             <Separator />
-            <EventFormRegistration data={event} />
+            {event && <EventFormRegistration data={event} />}
           </div>
         </div>
       </div>
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -0,0 +1 @@
+export { default as useMDX } from "./useMDX";
diff --git a/src/hooks/useMDX.ts b/src/hooks/useMDX.ts
@@ -0,0 +1,58 @@
+import { useState, useEffect } from "react";
+import { MDXRemoteSerializeResult } from "next-mdx-remote";
+import { serialize } from "next-mdx-remote/serialize";
+import remarkGfm from "remark-gfm";
+import rehypePrettyCode from "rehype-pretty-code";
+
+interface UseMDXOptions {
+  parseFrontmatter?: boolean;
+  theme?: string;
+}
+
+export const useMDX = (content: string | undefined, options: UseMDXOptions = {}) => {
+  const [mdxSource, setMdxSource] = useState<MDXRemoteSerializeResult | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!content) {
+      setMdxSource(null);
+      setError(null);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    serialize(content, {
+      parseFrontmatter: options.parseFrontmatter || true,
+      mdxOptions: {
+        remarkPlugins: [remarkGfm],
+        rehypePlugins: [
+          [
+            rehypePrettyCode,
+            {
+              theme: options.theme || "github-dark",
+              keepBackground: false,
+            },
+          ],
+        ],
+      },
+    })
+      .then(setMdxSource)
+      .catch((err) => {
+        console.error("Error serializing MDX:", err);
+        setError(err.message || "Failed to serialize MDX content");
+        setMdxSource(null);
+      })
+      .finally(() => setIsLoading(false));
+  }, [content, options.parseFrontmatter, options.theme]);
+
+  return {
+    mdxSource,
+    isLoading,
+    error,
+  };
+};
+
+export default useMDX;
diff --git a/src/lib/mdx.ts b/src/lib/mdx.ts
@@ -214,3 +214,33 @@ export async function getBlogsByCategory(category: string): Promise<BlogPost[]>
   const allBlogs = await getAllBlogs();
   return allBlogs.filter((blog) => blog.metadata.category?.toLowerCase() === category.toLowerCase());
 }
+
+export const convertContentToMarkdown = async (text: string): Promise<{ content: React.ReactElement }> => {
+  try {
+    const { content } = await compileMDX({
+      source: text,
+      options: {
+        mdxOptions: {
+          remarkPlugins: [remarkGfm],
+          rehypePlugins: [
+            [
+              rehypePrettyCode,
+              {
+                theme: "github-dark",
+                keepBackground: false,
+              },
+            ],
+          ],
+        },
+        parseFrontmatter: true,
+      },
+    });
+
+    return {
+      content,
+    };
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+};

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as useMDX } from "./useMDX";`