Can create new blogs

frontend/app/(auth)/dashboard/blogs/new/page.tsx

@@ -1,73 +1,13 @@
 "use client";
-import EditableText from "@/components/editable-text";
-import { LocalEditor } from "@/components/editor";
-import { Button } from "@/components/ui/button";
-import useApiMutation from "@/hooks/use-api";
-import sluggify from "@/lib/sluggify";
-import { NewBlog } from "@/types/types";
-import { useMemo, useState } from "react";
 
-export default function BlogEditor() {
-	const [title, setTitle] = useState("");
-	const slug = useMemo(() => sluggify(title), [title]);
-	const {
-		trigger: newBlog,
-		isMutating: loading,
-		isSuccess,
-	} = useApiMutation<undefined, NewBlog>(
-		"/blog/new",
-		undefined,
-		"POST",
-		true,
-		false,
-	);
+import { Loader2 } from "lucide-react";
+import dynamic from "next/dynamic";
 
-	const content = localStorage.getItem("blog_draft") ?? "";
+const BlogEditor = dynamic(() => import("./new").then((mod) => mod.default), {
+	ssr: false,
+	loading: () => <Loader2 className="animate-spin" />,
+});
 
-	return (
-		<section className="m-10">
-			{/* This div should have a proper layout, ONLY PART TO BE MODIFIED*/}
-			<div>
-				{/*Should have an image or a placeholder that opens a dialog when clicked on to set the url of an image.*/}
-				<EditableText onChange={setTitle}>
-					<h1>{title}</h1>
-				</EditableText>
-				<p className="text-muted">{slug}</p>
-				{/*Should have a summary input box or textarea*/}
-			</div>
-			<div className="flex">
-				<div className="flex-1">
-					<LocalEditor content={content} setTitle={setTitle} />
-				</div>
-			</div>
-
-			<Button
-				className="text-black bg-white"
-				onClick={async () => {
-					try {
-						const blogContent = localStorage.getItem("blog_draft");
-						if (!blogContent) return;
-						if (title.length < 1) return;
-						const res = await newBlog({
-							title,
-							summary: "A summary",
-							image: "none",
-							slug,
-							content: blogContent,
-						});
-						if (!res)
-							throw new Error("The server hasn't responded.");
-						if (res.status === "Error")
-							throw new Error(res.message);
-						if (res.data) console.log(res.data);
-						return res;
-					} catch (error: any) {
-						throw new Error(error.message);
-					}
-				}}
-			>
-				Sauvegarder
-			</Button>
-		</section>
-	);
+export default function Page() {
+	return <BlogEditor />;
 }