feat: show author name instead of user x

frontend/src/utils/EditBlog.tsx

@@ -7,10 +7,11 @@ import { countWords } from "./countWords";
 
 export function EditBlog() {
   const { slug } = useParams<{ slug: string }>();
-  const [blog, setBlog] = useState<Blog | undefined>(undefined);
+  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(() => {
@@ -22,6 +23,7 @@ export function EditBlog() {
         setTitle(data.title);
         setDescription(data.description);
         setBody(data.body);
+        setAuthorName(data.author_name);
       })
       .catch(console.error);
   }, [slug]);
@@ -30,14 +32,14 @@ export function EditBlog() {
 
   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,
+      version: blog ? blog.version + 1 : 1,
     };
 
     const res = await fetch(`${API_URL}/blogs/${slug}`, {
@@ -45,9 +47,8 @@ export function EditBlog() {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(updatedBlog),
     });
-
     if (res.ok) {
-      navigate(`/blog/${slug}`); // go back to the viewer
+      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.");
@@ -74,6 +75,16 @@ export function EditBlog() {
             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