import React, { useEffect, useState } from "react"; import { useForm } from "@inertiajs/react"; import AuthenticatedLayout from "@/layouts/authenticated-layout"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { useToast } from "@/hooks/use-toast"; import { Head } from "@inertiajs/react"; import { Editor } from "@tinymce/tinymce-react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; interface Kategori { KategoriId: number; NamaKategori: string; } interface SubKategori { SubKategoriId: number; KategoriId: number; NamaSubKategori: string; } interface Post { PostId: number; KategoriId: number; SubKategoriId: number; JudulPost: string; ImagePost: string; SlugPost: string; DescPost: string; IsPublish: boolean; } interface EditPostProps { post: Post; kategori: Kategori[]; subkategori: SubKategori[]; } interface PostFormData { KategoriId: string; SubKategoriId: string; JudulPost: string; SlugPost: string; DescPost: string; ImagePost: File | null; IsPublish: boolean; } const slugify = (text: string) => text.toLowerCase().replace(/\s+/g, "-"); export default function EditPost({ post, kategori, subkategori, }: EditPostProps) { const { toast } = useToast(); const [imagePreview, setImagePreview] = useState(null); const { data, setData, put, processing, errors } = useForm({ KategoriId: post.KategoriId.toString(), SubKategoriId: post.SubKategoriId.toString(), JudulPost: post.JudulPost, SlugPost: post.SlugPost, DescPost: post.DescPost, ImagePost: null, IsPublish: post.IsPublish, }); useEffect(() => { if (post.ImagePost) { setImagePreview(`/storage/${post.ImagePost}`); } }, [post.ImagePost]); useEffect(() => { if (data.JudulPost && data.JudulPost.trim() !== "") { setData("SlugPost", slugify(data.JudulPost)); } }, [data.JudulPost]); const handleImageChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files[0]) { const file = e.target.files[0]; setData("ImagePost", file); const reader = new FileReader(); reader.onloadend = () => { setImagePreview(reader.result as string); }; reader.readAsDataURL(file); } }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(); formData.append("KategoriId", data.KategoriId); formData.append("SubKategoriId", data.SubKategoriId); formData.append("JudulPost", data.JudulPost); formData.append("SlugPost", data.SlugPost); formData.append("DescPost", data.DescPost); formData.append("IsPublish", data.IsPublish.toString()); if (data.ImagePost instanceof File) { formData.append("ImagePost", data.ImagePost); } put(`/admin/post/${post.PostId}`, { data: formData, headers: { "Content-Type": "multipart/form-data" }, onSuccess: () => { toast({ title: "Berhasil", description: "Post berhasil diperbarui", variant: "default", }); }, onError: () => { toast({ title: "Gagal", description: "Terjadi kesalahan saat memperbarui Post", variant: "destructive", }); }, }); }; return (
setData("JudulPost", e.target.value) } /> {errors.JudulPost && (

{errors.JudulPost}

)}
{errors.SlugPost && (

{errors.SlugPost}

)}
{errors.KategoriId && (

{errors.KategoriId}

)}
{data.KategoriId && (
{errors.SubKategoriId && (

{errors.SubKategoriId}

)}
)}
setData("DescPost", content) } init={{ height: 300, menubar: false, plugins: [ "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table paste code help wordcount", ], toolbar: "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | " + "bullist numlist outdent indent | removeformat | help", }} /> {errors.DescPost && (

{errors.DescPost}

)}
{errors.ImagePost && (

{errors.ImagePost}

)} {imagePreview && ( )}
{errors.IsPublish && (

{errors.IsPublish}

)}
); }