feat: ability to update blog

frontend/src/App.tsx

@@ -16,6 +16,7 @@ import { useForm } from "react-hook-form";
 import { BlogViewer } from "./utils/BlogViewer";
 import { RequireAdmin } from "./utils/RouteGuard";
 import { AdminPage } from "./utils/AdminPage";
+import { EditBlog } from "./utils/EditBlog";
 import Unauthorized from "./utils/UnauthorizedPage";
 import {
   FaGithub,
@@ -141,7 +142,6 @@ function CreateBlog() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    // Stubbed API call
     try {
       const body = {
         title: title,
@@ -277,6 +277,7 @@ function App() {
               <Route path="/" element={<LandingPage />} />
               <Route path="/blog" element={<BlogPage />} />
               <Route path="/blog/:slug" element={<BlogViewer />} />
+              <Route path="/blog/:slug/edit" element={<EditBlog />} />
               <Route path="/about" element={<About />} />
               <Route path="/contact" element={<Contact />} />
               <Route

frontend/src/utils/BlogViewer.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { API_URL } from "./constants";
 import type { Blog } from "./types";
 import Markdown from "react-markdown";
@@ -11,6 +11,8 @@ 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;
@@ -20,12 +22,20 @@ export function BlogViewer() {
       .catch((err) => console.error(err));
   }, [slug]);
 
-  if (!blog) {
-    return <p>Loading...</p>;
-  }
+  if (!blog) return <p>Loading…</p>;
+
+  const isAuthor = me === String(blog.author_id);
 
   return (
     <div className="max-w-2xl mx-auto py-10 space-y-6">
+      {isAuthor && (
+        <button
+          onClick={() => navigate(`/blog/${slug}/edit`)}
+          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+        >
+          Edit this post
+        </button>
+      )}
       <h1 className="text-3xl font-bold">{blog.title.toUpperCase()}</h1>
       <p className="text-sm text-gray-500">By User {blog.author_id}</p>
       <p className="italic text-gray-600 dark:text-gray-400">

frontend/src/utils/EditBlog.tsx

@@ -0,0 +1,95 @@
+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 | undefined>(undefined);
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [body, setBody] = useState("");
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!slug) return;
+    fetch(`${API_URL}/blogs/${slug}`)
+      .then((res) => res.json())
+      .then((data: Blog) => {
+        setBlog(data);
+        setTitle(data.title);
+        setDescription(data.description);
+        setBody(data.body);
+      })
+      .catch(console.error);
+  }, [slug]);
+
+  if (!blog) return <p>Loading…</p>;
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+
+    const updatedBlog = {
+      title,
+      description,
+      body,
+      updated_at: new Date().toISOString(),
+      word_count: countWords(body),
+      version: blog ? blog.version : 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(`/blog/${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">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>
+  );
+}

frontend/src/utils/types.ts

@@ -1,7 +1,8 @@
 export interface Blog {
   id: number;
   title: string;
-  author_id: number;
+  author_id: string;
   description: string;
   body: string;
+  version: number;
 }