142 lines
3.5 KiB
TypeScript
142 lines
3.5 KiB
TypeScript
"use client";
|
|
import EditableText from "@/components/editable-text";
|
|
import { LocalEditor } from "@/components/editor";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog";
|
|
import useApiMutation from "@/hooks/use-api";
|
|
import sluggify from "@/lib/sluggify";
|
|
import { NewBlog } from "@/types/types";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { DialogTitle } from "@radix-ui/react-dialog";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import {
|
|
ActionButton,
|
|
ActionButtonDefault,
|
|
ActionButtonError,
|
|
ActionButtonLoading,
|
|
ActionButtonSuccess,
|
|
} from "@/components/action-button";
|
|
|
|
export default function BlogEditor() {
|
|
const { toast } = useToast();
|
|
const [title, setTitle] = useState("");
|
|
const [imageUrl, setImageUrl] = useState<string>("/placeholder.svg");
|
|
|
|
const content = localStorage.getItem("blog_draft") ?? "";
|
|
|
|
useEffect(() => {
|
|
const localImage = localStorage.getItem("blog_draft_image");
|
|
setImageUrl(
|
|
localImage && localImage.length > 0
|
|
? localImage
|
|
: "/placeholder.svg",
|
|
);
|
|
}, []);
|
|
|
|
const [summary, setSummary] = useState("");
|
|
const slug = useMemo(() => sluggify(title), [title]);
|
|
const {
|
|
trigger: newBlog,
|
|
isMutating: isSending,
|
|
isSuccess,
|
|
error,
|
|
} = useApiMutation<undefined, NewBlog>(
|
|
"/blogs/new",
|
|
{},
|
|
"POST",
|
|
true,
|
|
false,
|
|
);
|
|
|
|
return (
|
|
<section className="m-10 flex flex-col gap-4">
|
|
<div className="flex flex-col gap-4">
|
|
<EditableText onChange={setTitle}>
|
|
<h1>
|
|
{title.length > 0 ? title : "Un titre doit-être fourni"}
|
|
</h1>
|
|
</EditableText>
|
|
<p className="italic">{slug}</p>
|
|
<Dialog>
|
|
<DialogTrigger>
|
|
<img
|
|
src={imageUrl}
|
|
alt="Blog cover"
|
|
className="w-full h-60 object-cover cursor-pointer rounded-lg"
|
|
/>
|
|
</DialogTrigger>
|
|
<DialogTitle></DialogTitle>
|
|
<DialogContent>
|
|
<Input
|
|
type="text"
|
|
placeholder="Enter image URL"
|
|
value={imageUrl}
|
|
onChange={(e) => {
|
|
setImageUrl(e.target.value);
|
|
localStorage.setItem(
|
|
"blog_draft_image",
|
|
e.currentTarget.value,
|
|
);
|
|
}}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
<Input
|
|
type="text"
|
|
placeholder="Enter a summary"
|
|
value={summary}
|
|
onChange={(e) => setSummary(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex">
|
|
<div className="flex-1">
|
|
<LocalEditor content={content} setTitle={setTitle} />
|
|
</div>
|
|
</div>
|
|
|
|
<ActionButton
|
|
isLoading={isSending}
|
|
isSuccess={isSuccess}
|
|
error={error}
|
|
onClick={async () => {
|
|
try {
|
|
const blogContent = localStorage.getItem("blog_draft");
|
|
if (!blogContent) return;
|
|
if (title.length < 1) return;
|
|
const res = await newBlog({
|
|
title,
|
|
summary,
|
|
image: imageUrl,
|
|
slug,
|
|
content: blogContent,
|
|
});
|
|
if (!res) {
|
|
toast({ title: "Aucune réponse du serveur." });
|
|
return;
|
|
}
|
|
if (res.status === "Error") {
|
|
toast({
|
|
title: "Erreur.",
|
|
content: "Une erreur est survenue.",
|
|
});
|
|
}
|
|
if (res.data) console.log(res.data);
|
|
return res;
|
|
} catch (error: any) {
|
|
toast({
|
|
title: "Erreur.",
|
|
content: "Une erreur est survenue.",
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
<ActionButtonDefault>Publier</ActionButtonDefault>
|
|
<ActionButtonSuccess />
|
|
<ActionButtonError />
|
|
<ActionButtonLoading />
|
|
</ActionButton>
|
|
</section>
|
|
);
|
|
}
|