81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { API_URL } from "./constants";
|
|
import type { Blog } from "./types";
|
|
import Markdown from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
import remarkRehype from "remark-rehype";
|
|
import rehypeRaw from "rehype-raw";
|
|
import "../styles/markdown.css";
|
|
|
|
export function BlogViewer() {
|
|
const { slug } = useParams<{ slug: string }>();
|
|
const [blog, setBlog] = useState<Blog | null>(null);
|
|
const navigate = useNavigate();
|
|
const me = localStorage.getItem("user_id");
|
|
|
|
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))
|
|
.catch((err) => console.error(err));
|
|
}, [slug]);
|
|
|
|
if (!blog) return <p>Loading…</p>;
|
|
|
|
const isAuthor = me === String(blog.author_id);
|
|
|
|
const handleDelete = async () => {
|
|
if (!window.confirm(`Are you sure you want to delete ${blog.title}`))
|
|
return;
|
|
|
|
try {
|
|
const res = await fetch(`${API_URL}/blogs/${slug}`, {
|
|
method: "DELETE",
|
|
headers: { Accept: "application/json" },
|
|
});
|
|
if (!res.ok) throw new Error(await res.text());
|
|
navigate("/");
|
|
} catch (err) {
|
|
console.error("Delete failed:", err);
|
|
alert("Could not delete post. See console for details.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-2xl mx-auto py-10 space-y-6">
|
|
{isAuthor && (
|
|
<div className="flex space-x-4">
|
|
<button
|
|
onClick={() => navigate(`/blog/${slug}/edit`)}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
onClick={handleDelete}
|
|
className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
)}
|
|
<h1 className="text-3xl font-bold">{blog.title.toUpperCase()}</h1>
|
|
<p className="text-sm text-gray-500">By {blog.author_name}</p>
|
|
<div className="markdown-body mx-auto p-4">
|
|
<Markdown
|
|
remarkPlugins={[remarkGfm, remarkRehype]}
|
|
rehypePlugins={[rehypeRaw]}
|
|
children={blog.body}
|
|
></Markdown>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|