Blogs listing + Categories

frontend/app/(auth)/dashboard/blogs/new/new.tsx

@@ -4,9 +4,9 @@ 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 useApiMutation, { useApi } from "@/hooks/use-api";
 import sluggify from "@/lib/sluggify";
-import { NewBlog } from "@/types/types";
+import { Category, NewBlog } from "@/types/types";
 import { useEffect, useMemo, useState } from "react";
 import { DialogTitle } from "@radix-ui/react-dialog";
 import { useToast } from "@/hooks/use-toast";
@@ -17,12 +17,28 @@ import {
 	ActionButtonLoading,
 	ActionButtonSuccess,
 } from "@/components/action-button";
+import ComboBox from "@/components/ui/combobox";
 
 export default function BlogEditor() {
 	const { toast } = useToast();
 	const [title, setTitle] = useState("");
 	const [imageUrl, setImageUrl] = useState<string>("/placeholder.svg");
 
+	const [category, setCategory] = useState("");
+
+	const { data } = useApi<Category[]>(
+		"/blogs/categories",
+		undefined,
+		false,
+		false,
+	);
+
+	const [categories, setCategories] = useState<string[]>([]);
+
+	useEffect(() => {
+		if (data) setCategories(data.map((c) => c.category) ?? []);
+	}, [data]);
+
 	const content = localStorage.getItem("blog_draft") ?? "";
 
 	useEffect(() => {
@@ -82,12 +98,38 @@ export default function BlogEditor() {
 						/>
 					</DialogContent>
 				</Dialog>
-				<Input
-					type="text"
-					placeholder="Enter a summary"
-					value={summary}
-					onChange={(e) => setSummary(e.target.value)}
-				/>
+				<div className="flex gap-4">
+					<Input
+						type="text"
+						placeholder="Enter a summary"
+						value={summary}
+						onChange={(e) => setSummary(e.target.value)}
+					/>
+					<ComboBox
+						value={category}
+						setValue={setCategory}
+						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];
+							});
+							setCategory(value);
+						}}
+					>
+						{(Item, element) => (
+							<Item value={element} key={element} label={element}>
+								{element}
+							</Item>
+						)}
+					</ComboBox>
+				</div>
 			</div>
 			<div className="flex">
 				<div className="flex-1">
@@ -110,6 +152,7 @@ export default function BlogEditor() {
 							image: imageUrl,
 							slug,
 							content: blogContent,
+							category,
 						});
 						if (!res) {
 							toast({ title: "Aucune réponse du serveur." });