74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
"use client";
|
|
import EditableText from "@/components/editable-text";
|
|
import { LocalEditor } from "@/components/editor";
|
|
import { Button } from "@/components/ui/button";
|
|
import useApiMutation from "@/hooks/use-api";
|
|
import sluggify from "@/lib/sluggify";
|
|
import { NewBlog } from "@/types/types";
|
|
import { useMemo, useState } from "react";
|
|
|
|
export default function BlogEditor() {
|
|
const [title, setTitle] = useState("");
|
|
const slug = useMemo(() => sluggify(title), [title]);
|
|
const {
|
|
trigger: newBlog,
|
|
isMutating: loading,
|
|
isSuccess,
|
|
} = useApiMutation<undefined, NewBlog>(
|
|
"/blog/new",
|
|
undefined,
|
|
"POST",
|
|
true,
|
|
false,
|
|
);
|
|
|
|
const content = localStorage.getItem("blog_draft") ?? "";
|
|
|
|
return (
|
|
<section className="m-10">
|
|
{/* This div should have a proper layout, ONLY PART TO BE MODIFIED*/}
|
|
<div>
|
|
{/*Should have an image or a placeholder that opens a dialog when clicked on to set the url of an image.*/}
|
|
<EditableText onChange={setTitle}>
|
|
<h1>{title}</h1>
|
|
</EditableText>
|
|
<p className="text-muted">{slug}</p>
|
|
{/*Should have a summary input box or textarea*/}
|
|
</div>
|
|
<div className="flex">
|
|
<div className="flex-1">
|
|
<LocalEditor content={content} setTitle={setTitle} />
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
className="text-black bg-white"
|
|
onClick={async () => {
|
|
try {
|
|
const blogContent = localStorage.getItem("blog_draft");
|
|
if (!blogContent) return;
|
|
if (title.length < 1) return;
|
|
const res = await newBlog({
|
|
title,
|
|
summary: "A summary",
|
|
image: "none",
|
|
slug,
|
|
content: blogContent,
|
|
});
|
|
if (!res)
|
|
throw new Error("The server hasn't responded.");
|
|
if (res.status === "Error")
|
|
throw new Error(res.message);
|
|
if (res.data) console.log(res.data);
|
|
return res;
|
|
} catch (error: any) {
|
|
throw new Error(error.message);
|
|
}
|
|
}}
|
|
>
|
|
Sauvegarder
|
|
</Button>
|
|
</section>
|
|
);
|
|
}
|