Update + Delete articles
This commit is contained in:
cdricms
97
frontend/components/article/delete-button.tsx
Normal file
97
frontend/components/article/delete-button.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogTrigger,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Loader2, Trash2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import hasPermissions from "@/lib/hasPermissions";
|
||||
import IUser from "@/interfaces/IUser";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useRouter } from "next/navigation";
|
||||
import request from "@/lib/request";
|
||||
import { ApiResponse } from "@/types/types";
|
||||
|
||||
interface DeleteArticleButtonProps {
|
||||
id: string;
|
||||
user?: IUser;
|
||||
}
|
||||
|
||||
const DeleteArticleButton: React.FC<DeleteArticleButtonProps> = ({
|
||||
id,
|
||||
user,
|
||||
}) => {
|
||||
if (!user || !hasPermissions(user.roles, { blogs: ["update"] })) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleDelete = async (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
await request(`/blogs/${id}/delete`, {
|
||||
requiresAuth: true,
|
||||
method: "DELETE",
|
||||
});
|
||||
// if (res.status === "Success") {
|
||||
// toast({
|
||||
// title: "Article supprimé",
|
||||
// description: "L'article a été supprimé avec succès.",
|
||||
// });
|
||||
// setOpen(false); // Only close on success
|
||||
// router.replace("/blogs");
|
||||
// } else {
|
||||
// toast({
|
||||
// title: "Erreur",
|
||||
// description: res?.message || "Une erreur est survenue.",
|
||||
// variant: "destructive",
|
||||
// });
|
||||
// // Don't setOpen(false) here - keep dialog open on error
|
||||
// }
|
||||
// } catch (e: unknown) {
|
||||
// toast({
|
||||
// title: "Erreur",
|
||||
// description:
|
||||
// (e as Error)?.message || "Une erreur est survenue.",
|
||||
// variant: "destructive",
|
||||
// });
|
||||
// // Don't setOpen(false) here - keep dialog open on exception
|
||||
// } finally {
|
||||
// setIsDeleting(false); // Just reset the loading state
|
||||
// }
|
||||
};
|
||||
|
||||
return (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="destructive">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
Êtes-vous sûr de vouloir supprimer cet article ?
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Cette action supprimera définitivement cet article.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Annuler</AlertDialogCancel>
|
||||
<Button variant="destructive" onClick={handleDelete}>
|
||||
Supprimer
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeleteArticleButton;
|
||||
261
frontend/components/article/edit.tsx
Normal file
261
frontend/components/article/edit.tsx
Normal file
@@ -0,0 +1,261 @@
|
||||
"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, { useApi } from "@/hooks/use-api";
|
||||
import sluggify from "@/lib/sluggify";
|
||||
import { Blog, Category, 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";
|
||||
import ComboBox from "@/components/ui/combobox";
|
||||
|
||||
export type BlogState = Partial<Blog> & {
|
||||
[K in keyof Required<Blog>]?: Blog[K] | null; // Allows null for resetting or un-setting fields
|
||||
};
|
||||
|
||||
export default function BlogEditor({ blog }: { blog?: Blog }) {
|
||||
const { toast } = useToast();
|
||||
|
||||
const setItem = (b: BlogState) =>
|
||||
blog
|
||||
? localStorage.setItem(`draft_${blog.blogID}`, JSON.stringify(b))
|
||||
: localStorage.setItem("draft", JSON.stringify(b));
|
||||
|
||||
const [draft, setDraft] = useState<BlogState>(() => {
|
||||
if (blog) {
|
||||
setItem(blog);
|
||||
return blog;
|
||||
}
|
||||
|
||||
const d = {
|
||||
slug: "",
|
||||
content: "",
|
||||
title: "",
|
||||
category: "",
|
||||
image: "/placeholder.svg",
|
||||
};
|
||||
|
||||
try {
|
||||
const _draft = localStorage.getItem("draft");
|
||||
if (_draft) {
|
||||
const draft: BlogState = JSON.parse(_draft);
|
||||
return draft;
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
return d;
|
||||
});
|
||||
|
||||
const handleChange =
|
||||
(field: keyof BlogState) =>
|
||||
(e: React.ChangeEvent<HTMLInputElement> | string) => {
|
||||
const value = typeof e === "string" ? e : e.target.value;
|
||||
setDraft((prev) => {
|
||||
const n: typeof prev = {
|
||||
...prev,
|
||||
[field]: value,
|
||||
};
|
||||
setItem(n);
|
||||
return n;
|
||||
});
|
||||
};
|
||||
|
||||
const { data } = useApi<Category[]>(
|
||||
"/blogs/categories",
|
||||
undefined,
|
||||
false,
|
||||
false,
|
||||
);
|
||||
|
||||
const [categories, setCategories] = useState<string[]>(
|
||||
draft.category ? [draft.category] : [],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) setCategories(data.map((c) => c.category) ?? []);
|
||||
}, [data]);
|
||||
|
||||
const slug = useMemo(() => {
|
||||
const slug = draft.title ? sluggify(draft.title) : "";
|
||||
handleChange("slug")(slug);
|
||||
return slug;
|
||||
}, [draft.title]);
|
||||
|
||||
const newBlog = useApiMutation<undefined, NewBlog>(
|
||||
"/blogs/new",
|
||||
{},
|
||||
"POST",
|
||||
true,
|
||||
false,
|
||||
);
|
||||
|
||||
const updateBlog = useApiMutation(
|
||||
`/blogs/${blog?.blogID}/update`,
|
||||
{},
|
||||
"PATCH",
|
||||
true,
|
||||
false,
|
||||
);
|
||||
|
||||
const handleNewBlog = async () => {
|
||||
try {
|
||||
if (!draft.content) return;
|
||||
if (!draft.title || draft.title.length < 1) return;
|
||||
const res = await newBlog.trigger({
|
||||
title: draft.title,
|
||||
summary: draft.summary,
|
||||
image: draft.image,
|
||||
slug,
|
||||
content: draft.content,
|
||||
category: draft.category,
|
||||
});
|
||||
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.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateBlog = async () => {
|
||||
try {
|
||||
if (!draft.content) return;
|
||||
if (!draft.title || draft.title.length < 1) return;
|
||||
const res = await updateBlog.trigger({
|
||||
title: draft.title,
|
||||
summary: draft.summary,
|
||||
image: draft.image,
|
||||
slug,
|
||||
content: draft.content,
|
||||
category: draft.category,
|
||||
});
|
||||
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.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="m-10 flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<EditableText onChange={handleChange("title")}>
|
||||
<h1>
|
||||
{draft.title && draft.title.length > 0
|
||||
? draft.title
|
||||
: "Un titre doit-être fourni"}
|
||||
</h1>
|
||||
</EditableText>
|
||||
<p className="italic">{slug}</p>
|
||||
<Dialog>
|
||||
<DialogTrigger>
|
||||
<img
|
||||
src={draft.image}
|
||||
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={draft.image}
|
||||
onChange={handleChange("image")}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<div className="flex gap-4">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Enter a summary"
|
||||
value={draft.summary}
|
||||
onChange={handleChange("summary")}
|
||||
/>
|
||||
<ComboBox
|
||||
value={draft.category ?? ""}
|
||||
onValueChange={handleChange("category")}
|
||||
key={categories.join(",")}
|
||||
elements={categories}
|
||||
trigger={(value) => (
|
||||
<Button>
|
||||
{value ?? "Selectionner une catégorie"}
|
||||
</Button>
|
||||
)}
|
||||
onSubmit={(value) => {
|
||||
setCategories((prev) => {
|
||||
if (prev.includes(value)) return prev;
|
||||
return [...prev, value];
|
||||
});
|
||||
handleChange("category")(value);
|
||||
}}
|
||||
>
|
||||
{(Item, element) => (
|
||||
<Item value={element} key={element} label={element}>
|
||||
{element}
|
||||
</Item>
|
||||
)}
|
||||
</ComboBox>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="flex-1">
|
||||
<LocalEditor
|
||||
onChange={handleChange("content")}
|
||||
content={draft.content ?? ""}
|
||||
onTitleChange={handleChange("title")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ActionButton
|
||||
isLoading={newBlog.isMutating || updateBlog.isMutating}
|
||||
isSuccess={newBlog.isSuccess || updateBlog.isSuccess}
|
||||
error={newBlog.error || updateBlog.error}
|
||||
onClick={blog ? handleUpdateBlog : handleNewBlog}
|
||||
>
|
||||
<ActionButtonDefault>
|
||||
{blog ? "Modifier" : "Publier"}
|
||||
</ActionButtonDefault>
|
||||
<ActionButtonSuccess />
|
||||
<ActionButtonError />
|
||||
<ActionButtonLoading />
|
||||
</ActionButton>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user