feat: add blog page

2026-03-18 14:25:08 +05:30
parent 2584539fb0
commit 1bbf7f9c1c
12 changed files with 638 additions and 25 deletions
@@ -0,0 +1,208 @@
+import {useEffect, useRef, useState} from "react";
+import {useNavigate, useParams} from "react-router-dom";
+
+import EditorJS, {OutputData} from "@editorjs/editorjs";
+import Header from "@editorjs/header";
+import List from "@editorjs/list";
+import ImageTool from "@editorjs/image";
+import Quote from "@editorjs/quote";
+import Table from "@editorjs/table";
+import CodeTool from "@editorjs/code";
+import Embed from "@editorjs/embed";
+import Delimiter from "@editorjs/delimiter";
+
+import {
+	createBlogApi,
+	updateBlogApi,
+	getBlogByIdApi,
+	uploadImageApi,
+} from "@/api/blog";
+
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
+import {Input} from "@/components/ui/input";
+import {Button} from "@/components/ui/button";
+
+export default function BlogEditorPage() {
+	const {id} = useParams();
+	const navigate = useNavigate();
+
+	const editorRef = useRef<EditorJS | null>(null);
+	const hasInitialized = useRef(false);
+	const hasRenderedContent = useRef(false);
+
+	const [title, setTitle] = useState("");
+	const [writer, setWriter] = useState("");
+	const [coverImage, setCoverImage] = useState("");
+	const [loading, setLoading] = useState(false);
+
+	const isEdit = Boolean(id);
+
+	useEffect(() => {
+		if (hasInitialized.current) return;
+		hasInitialized.current = true;
+
+		let editor: EditorJS;
+
+		const initEditor = async () => {
+			editor = new EditorJS({
+				holder: "editorjs",
+
+				placeholder: "Write blog content...",
+
+				tools: {
+					header: {
+						class: Header,
+						inlineToolbar: true,
+						config: {
+							placeholder: "Enter heading",
+							levels: [1, 2, 3, 4],
+							defaultLevel: 2,
+						},
+					},
+
+					list: {
+						class: List,
+						inlineToolbar: true,
+						config: {
+							defaultStyle: "unordered",
+						},
+					},
+
+					quote: Quote,
+					table: Table,
+					code: CodeTool,
+					embed: Embed,
+					delimiter: Delimiter,
+
+					image: {
+						class: ImageTool,
+						config: {
+							uploader: {
+								uploadByFile: async (file: File) => {
+									const res = await uploadImageApi(file);
+
+									return {
+										success: 1,
+										file: {url: res.file.url},
+									};
+								},
+							},
+						},
+					},
+				},
+			});
+
+			await editor.isReady;
+			editorRef.current = editor;
+
+			if (isEdit && id && !hasRenderedContent.current) {
+				try {
+					const res = await getBlogByIdApi(Number(id));
+
+					setTitle(res.title);
+					setWriter(res.writer);
+					setCoverImage(res.image || "");
+
+					if (res.content) {
+						await editor.blocks.clear();
+						await editor.render(res.content);
+						hasRenderedContent.current = true;
+					}
+				} catch (err) {
+					console.error(err);
+				}
+			}
+		};
+
+		initEditor();
+	}, [id, isEdit]);
+
+	const handleCoverUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+		const file = e.target.files?.[0];
+		if (!file) return;
+
+		try {
+			const res = await uploadImageApi(file);
+			setCoverImage(res.file.url);
+		} catch (err) {
+			console.error(err);
+		}
+	};
+
+	const handleSave = async () => {
+		if (!editorRef.current) return;
+
+		setLoading(true);
+
+		try {
+			const content: OutputData = await editorRef.current.save();
+
+			const payload = {
+				title,
+				writer,
+				image: coverImage,
+				content,
+				isActive: true,
+			};
+
+			if (isEdit) {
+				await updateBlogApi(Number(id), payload);
+			} else {
+				await createBlogApi(payload);
+			}
+
+			navigate("/blog");
+		} catch (err) {
+			console.error(err);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<div className="p-6 max-w-5xl mx-auto space-y-6">
+			<Card>
+				<CardHeader>
+					<CardTitle>{isEdit ? "Edit Blog" : "Create Blog"}</CardTitle>
+				</CardHeader>
+
+				<CardContent className="space-y-4">
+					<Input
+						placeholder="Blog Title"
+						value={title}
+						onChange={(e) => setTitle(e.target.value)}
+					/>
+
+					<Input
+						placeholder="Writer Name"
+						value={writer}
+						onChange={(e) => setWriter(e.target.value)}
+					/>
+
+					<div className="space-y-2">
+						<label className="text-sm font-medium">Cover Image</label>
+
+						<Input type="file" onChange={handleCoverUpload} />
+
+						{coverImage && (
+							<img
+								src={coverImage}
+								alt="cover"
+								className="w-full max-h-[250px] object-cover rounded-md"
+							/>
+						)}
+					</div>
+
+					<div
+						id="editorjs"
+						className="border rounded-md p-4 bg-white min-h-[300px]"
+					/>
+
+					<Button onClick={handleSave} disabled={loading}>
+						{loading ? "Saving..." : "Save Blog"}
+					</Button>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}