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 Posting { PostId: number; KategoriId: number; SubKategoriId: number; JudulPost: string; ImagePost: string; SlugPost: string; DescPost: string; IsPublish: boolean; } interface EditPostProps { posting: Posting; 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({ posting, kategori, subkategori, }: EditPostProps) { const { toast } = useToast(); const [imagePreview, setImagePreview] = useState(null); const { data, setData, post, processing, errors } = useForm({ KategoriId: posting.KategoriId.toString(), SubKategoriId: posting.SubKategoriId.toString(), JudulPost: posting.JudulPost, SlugPost: posting.SlugPost, DescPost: posting.DescPost, ImagePost: null, IsPublish: posting.IsPublish, }); useEffect(() => { if (posting.ImagePost) { const path = `${posting.ImagePost}`; setImagePreview(path); } }, [posting.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); // Send the boolean value directly formData.append("IsPublish", data.IsPublish.toString()); if (data.ImagePost instanceof File) { formData.append("ImagePost", data.ImagePost); } post(`/admin/post/${posting.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={{ plugins: [ // Free plugins only "anchor", "autolink", "charmap", "codesample", "emoticons", "image", "link", "lists", "media", "searchreplace", "table", "visualblocks", "wordcount", "code", "fullscreen", "preview", ], toolbar: "undo redo | blocks | bold italic underline strikethrough | link image media table | align | bullist numlist | emoticons charmap | fullscreen preview code | removeformat", height: 300, menubar: "file edit view insert format tools table help", image_caption: true, quickbars_selection_toolbar: "bold italic | quicklink h2 h3 blockquote", contextmenu: "link image table", }} initialValue="Isi Artikel" /> {/*

SEO Tips:

  • Gunakan heading tags (H1, H2, H3) dengan struktur yang tepat
  • Tambahkan alt text pada gambar
  • Gunakan link dengan atribut rel yang sesuai
  • Sertakan kata kunci utama dalam paragraf awal
*/} {errors.DescPost && (

{errors.DescPost}

)}
{errors.ImagePost && (

{errors.ImagePost}

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

{errors.IsPublish}

)}
); }