CRUD Events and React interaction

frontend/components/shortcode-dialogue.tsx

@@ -9,55 +9,47 @@ import {
 	DialogFooter,
 	DialogHeader,
 	DialogTitle,
-	DialogTrigger,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type IShortcode from "@/interfaces/IShortcode";
 
 interface ShortcodeDialogProps {
-	onSave: (shortcode: Omit<IShortcode, "id">) => void;
+	onSave: (shortcode: IShortcode) => void;
+	open: boolean;
+	setOpen: () => void;
+	shortcode?: IShortcode;
 }
 
-export default function ShortcodeDialog({ onSave }: ShortcodeDialogProps) {
-	const [open, setOpen] = useState(false);
-	const [code, setCode] = useState("");
-	const [type, setType] = useState<"value" | "media">("value");
-	const [value, setValue] = useState("");
-	const [mediaId, setMediaId] = useState("");
+export default function ShortcodeDialog({
+	onSave,
+	open,
+	setOpen,
+	shortcode,
+}: ShortcodeDialogProps) {
+	const [_shortcode, setShortcode] = useState<IShortcode>(
+		shortcode ?? { code: "", type: "", id: 0 },
+	);
 
 	const handleSave = () => {
-		onSave({ code, type, value, media_id: mediaId });
-		setOpen(false);
+		onSave(_shortcode);
+		setOpen();
 		resetForm();
 	};
 
 	const resetForm = () => {
-		setCode("");
-		setType("value");
-		setValue("");
-		setMediaId("");
+		setShortcode({ code: "", type: "", id: 0 });
 	};
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogTrigger asChild>
-				<Button variant="outline">Add New Shortcode</Button>
-			</DialogTrigger>
 			<DialogContent className="sm:max-w-[425px]">
 				<DialogHeader>
-					<DialogTitle>Add New Shortcode</DialogTitle>
+					<DialogTitle>Ajouter un nouveau shortcode</DialogTitle>
 					<DialogDescription>
-						Create a new shortcode here. Click save when you're
-						done.
+						Créer un nouveau shortcode ici. Cliquez enregistrer
+						quand vous avez fini.
 					</DialogDescription>
 				</DialogHeader>
 				<div className="grid gap-4 py-4">
@@ -67,29 +59,41 @@ export default function ShortcodeDialog({ onSave }: ShortcodeDialogProps) {
 						</Label>
 						<Input
 							id="code"
-							value={code}
-							onChange={(e) => setCode(e.target.value)}
+							value={_shortcode.code}
+							onChange={(e) =>
+								setShortcode((p) => ({
+									...p,
+									code: e.target.value,
+								}))
+							}
 							className="col-span-3"
 						/>
 					</div>
 					<Tabs
-						defaultValue={type}
-						onValueChange={(v) => setType(v as "value" | "media")}
+						defaultValue={_shortcode.type}
+						onValueChange={(v) =>
+							setShortcode((p) => ({ ...p, type: v }))
+						}
 						className="w-full"
 					>
 						<TabsList className="grid w-full grid-cols-2">
-							<TabsTrigger value="value">Value</TabsTrigger>
+							<TabsTrigger value="value">Valeur</TabsTrigger>
 							<TabsTrigger value="media">Media</TabsTrigger>
 						</TabsList>
 						<TabsContent value="value">
 							<div className="grid grid-cols-4 items-center gap-4">
 								<Label htmlFor="value" className="text-right">
-									Value
+									Valeur
 								</Label>
 								<Input
 									id="value"
-									value={value}
-									onChange={(e) => setValue(e.target.value)}
+									value={_shortcode.value}
+									onChange={(e) =>
+										setShortcode((p) => ({
+											...p,
+											value: e.target.value,
+										}))
+									}
 									className="col-span-3"
 								/>
 							</div>
@@ -101,8 +105,13 @@ export default function ShortcodeDialog({ onSave }: ShortcodeDialogProps) {
 								</Label>
 								<Input
 									id="mediaId"
-									value={mediaId}
-									onChange={(e) => setMediaId(e.target.value)}
+									value={_shortcode.media_id}
+									onChange={(e) =>
+										setShortcode((p) => ({
+											...p,
+											media_id: e.target.value,
+										}))
+									}
 									className="col-span-3"
 								/>
 							</div>
@@ -111,7 +120,7 @@ export default function ShortcodeDialog({ onSave }: ShortcodeDialogProps) {
 				</div>
 				<DialogFooter>
 					<Button type="submit" onClick={handleSave}>
-						Save shortcode
+						Enregistrer
 					</Button>
 				</DialogFooter>
 			</DialogContent>