112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
import { useEffect, useState, type FormEvent } from "react";
|
|
|
|
import { useParams, useNavigate } from "react-router-dom";
|
|
import { API_URL } from "./constants";
|
|
import type { Blog } from "./types";
|
|
import { countWords } from "./countWords";
|
|
|
|
export function EditBlog() {
|
|
const { slug } = useParams<{ slug: string }>();
|
|
const [blog, setBlog] = useState<Blog | null>(null);
|
|
const [title, setTitle] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const [body, setBody] = useState("");
|
|
const [authorName, setAuthorName] = useState("");
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
if (!slug) return;
|
|
fetch(`${API_URL}/blogs/${slug}`, {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.then((res) => res.json())
|
|
.then((data: Blog) => {
|
|
setBlog(data);
|
|
setTitle(data.title);
|
|
setDescription(data.description);
|
|
setBody(data.body);
|
|
setAuthorName(data.author_name);
|
|
})
|
|
.catch(console.error);
|
|
}, [slug]);
|
|
|
|
if (!blog) return <p>Loading…</p>;
|
|
|
|
async function handleSubmit(e: FormEvent) {
|
|
e.preventDefault();
|
|
const updatedBlog = {
|
|
title,
|
|
description,
|
|
body,
|
|
author_name: authorName, // from the form field
|
|
updated_at: new Date().toISOString(),
|
|
word_count: countWords(body),
|
|
version: blog ? blog.version + 1 : 1,
|
|
};
|
|
|
|
const res = await fetch(`${API_URL}/blogs/${slug}`, {
|
|
method: "PUT", // or "PATCH" if your API prefers
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(updatedBlog),
|
|
});
|
|
if (res.ok) {
|
|
navigate(`/blogs/${slug}`); // go back to the viewer
|
|
} else {
|
|
console.error("Update failed:", await res.text());
|
|
alert("Could not update the post. See console for details.");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-2xl mx-auto py-10">
|
|
<h2 className="text-2xl font-bold mb-4">Edit Blog Post</h2>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block font-medium">Title</label>
|
|
<input
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
className="w-full border px-2 py-1 rounded"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block font-medium">Description</label>
|
|
<textarea
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
className="w-full border px-2 py-1 rounded"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block font-medium">Author Name</label>
|
|
<input
|
|
type="text"
|
|
value={authorName}
|
|
onChange={(e) => setAuthorName(e.target.value)}
|
|
className="w-full border px-2 py-1 rounded"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block font-medium">Body (Markdown)</label>
|
|
<textarea
|
|
value={body}
|
|
onChange={(e) => setBody(e.target.value)}
|
|
rows={10}
|
|
className="w-full border px-2 py-1 rounded font-mono"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
|
|
>
|
|
Save Changes
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|