Octopus-React-Wp/frontend/src/components/PostForm.jsx

import { useState } from "react";
import { uploadImage, createPost } from "../wordpress";

function PostForm() {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [file, setFile] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setError("");

    // 1️⃣ Vérification des champs
    if (!title.trim() || !content.trim() || !file) {
      setError("Tous les champs sont requis !");
      setIsLoading(false);
      return;
    }

    
    try {
      // 2️⃣ Upload de l’image
      const mediaId = await uploadImage(file);
      if (!mediaId) {
        setError("Échec de l'upload de l'image !");
        setIsLoading(false);
        return;
      }

      // 3️⃣ Création de l’article
      const success = await createPost(title, content, mediaId);
      if (success) {
        alert("Article publié avec succès !");
        setTitle("");
        setContent("");
        setFile(null);
      } else {
        setError("Échec de la publication !");
      }
    } catch (err) {
      console.error("❌ Erreur lors du traitement :", err);
      setError("Une erreur est survenue, veuillez réessayer.");
    }

    setIsLoading(false);
  };

  return (
    <div>
      <h2>Créer un nouvel article</h2>
      {error && <p style={{ color: "red" }}>{error}</p>}
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Titre"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          required
        />
        <textarea
          placeholder="Contenu"
          value={content}
          onChange={(e) => setContent(e.target.value)}
          required
        />
        <input
          type="file"
          accept="image/*"
          onChange={(e) => setFile(e.target.files[0])}
          required
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? "Publication..." : "Publier"}
        </button>
      </form>
    </div>
  );
}

export default PostForm;