update edit post cloudinary

frontend/src/components/EditPost.jsx

@@ -1,129 +1,108 @@
 import { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
-import { getPostById, updatePost, uploadImage } from "../wordpress";
+import { getPostById, updatePost, uploadImageFromUrl } from "../wordpress"; // utilise uploadImageFromUrl
 import { getToken } from "../auth";
 import {
-  Box, Container, Typography, TextField, Button, Paper, Input, IconButton
+  Box, Container, Typography, TextField, Button, Paper
 } from "@mui/material";
 import { ArrowBack, Publish } from "@mui/icons-material";
+import ImageUploaderCloudinary from "./ImageUploaderCloudinary";
+import CloudinaryGallerySelector from "./CloudinaryGallerySelector";
 
 function EditPost() {
-  const { id } = useParams(); // ✅ Récupère l'ID de l'article depuis l'URL
+  const { id } = useParams();
   const navigate = useNavigate();
   const [title, setTitle] = useState("");
   const [content, setContent] = useState("");
-  const [file, setFile] = useState(null);
-  const [loading, setLoading] = useState(true);
+  const [imageUrl, setImageUrl] = useState(null); // preview
+  const [imageFile, setImageFile] = useState(null); // pour upload
 
-  // ✅ Vérification de l'authentification
+  // Auth
   useEffect(() => {
-    if (!getToken()) {
-      navigate("/admin/login");
-    }
+    if (!getToken()) navigate("/admin/login");
   }, [navigate]);
 
-  // ✅ Récupérer les données de l'article
+  // Article
   useEffect(() => {
     const fetchPost = async () => {
       try {
         const post = await getPostById(id);
         setTitle(post.title.rendered);
-        setContent(post.content.rendered.replace(/(<([^>]+)>)/gi, "")); // Enlever le HTML
-        setLoading(false);
-      } catch (error) {
-        console.error("Erreur chargement article :", error);
-        navigate("/admin/gestion-articles"); // Redirige si erreur
+        setContent(post.content.rendered.replace(/(<([^>]+)>)/gi, ""));
+        setImageUrl(post?.jetpack_featured_media_url || null); // preview actuelle
+      } catch (err) {
+        console.error("Erreur chargement article :", err);
+        navigate("/admin/gestion-articles");
       }
     };
-
     fetchPost();
   }, [id, navigate]);
 
+  // 🧠 convertit URL en File
+  const convertUrlToFile = async (url) => {
+    const res = await fetch(url);
+    const blob = await res.blob();
+    return new File([blob], "image-cloudinary.jpg", { type: blob.type });
+  };
+
   const handleUpdate = async (e) => {
     e.preventDefault();
     try {
-      const updatedPost = await updatePost(id, title, content, file);
-      alert("✅ Article mis à jour avec succès !");
-      navigate("/admin/gestion-articles"); // Redirige après modification
+      let imageId = null;
+
+      if (imageFile) {
+        // upload image vers WordPress
+        imageId = await uploadImageFromUrl(imageUrl);
+      }
+
+      await updatePost(id, title, content, imageId);
+      alert("✅ Article mis à jour !");
+      navigate("/admin/gestion-articles");
     } catch (error) {
-      alert("❌ Erreur lors de la mise à jour de l'article.");
+      console.error("❌ Erreur update :", error);
+      alert("❌ Erreur mise à jour.");
     }
   };
 
-  if (loading) return <Typography>Chargement...</Typography>;
-
   return (
-    <Box
-      sx={{
-        minHeight: "100vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundImage: "url('https://source.unsplash.com/1600x900/?office,writing')",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-      }}
-    >
+    <Box sx={{ minHeight: "100vh", display: "flex", justifyContent: "center", alignItems: "center" }}>
       <Container maxWidth="sm">
-        <Paper elevation={6} sx={{ padding: 4, borderRadius: 3 }}>
-          <Button
-            startIcon={<ArrowBack />}
-            variant="outlined"
-            color="secondary"
-            onClick={() => navigate("/admin/gestion-articles")}
-            sx={{ mb: 2 }}
-          >
-            Retour à la gestion des articles
+        <Paper elevation={6} sx={{ p: 4, borderRadius: 3 }}>
+          <Button onClick={() => navigate("/admin/gestion-articles")} variant="outlined" startIcon={<ArrowBack />}>
+            Retour
           </Button>
 
-          <Typography variant="h4" sx={{ fontWeight: "bold", textAlign: "center", mb: 3 }}>
-            Modifier l'article
-          </Typography>
+          <Typography variant="h4" align="center" sx={{ mb: 3 }}>Modifier l'article</Typography>
 
           <form onSubmit={handleUpdate}>
-            <TextField
-              label="Titre de l'article"
-              fullWidth
-              margin="normal"
-              variant="outlined"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              required
+            <TextField label="Titre" fullWidth value={title} onChange={(e) => setTitle(e.target.value)} sx={{ mb: 2 }} />
+            <TextField label="Contenu" multiline rows={4} fullWidth value={content} onChange={(e) => setContent(e.target.value)} sx={{ mb: 2 }} />
+
+            <Typography fontWeight="bold">Image depuis ton ordi :</Typography>
+            <ImageUploaderCloudinary
+              onUploadSuccess={(url) => {
+                setImageUrl(url);
+                convertUrlToFile(url).then(setImageFile);
+              }}
             />
 
-            <TextField
-              label="Contenu"
-              fullWidth
-              margin="normal"
-              variant="outlined"
-              multiline
-              rows={4}
-              value={content}
-              onChange={(e) => setContent(e.target.value)}
-              required
+            <Typography fontWeight="bold" sx={{ mt: 3 }}>Ou choisir une image déjà envoyée :</Typography>
+            <CloudinaryGallerySelector
+              onSelect={async (url) => {
+                setImageUrl(url);
+                const file = await convertUrlToFile(url);
+                setImageFile(file);
+              }}
             />
 
-            {/* Upload de l'image */}
-            <Box sx={{ mt: 2 }}>
-              <Typography variant="body1" sx={{ fontWeight: "bold", mb: 1 }}>
-                Nouvelle image (facultatif) :
-              </Typography>
-              <Input
-                type="file"
-                accept="image/*"
-                onChange={(e) => setFile(e.target.files[0])}
-                sx={{ display: "block", mb: 2 }}
-              />
-            </Box>
+            {imageUrl && (
+              <Box sx={{ mt: 2 }}>
+                <Typography variant="body2">Aperçu :</Typography>
+                <img src={imageUrl} style={{ width: "100%", borderRadius: 6, maxHeight: 200, objectFit: "cover" }} alt="preview" />
+              </Box>
+            )}
 
-            <Button
-              type="submit"
-              variant="contained"
-              color="primary"
-              fullWidth
-              startIcon={<Publish />}
-              sx={{ mt: 3 }}
-            >
+            <Button type="submit" variant="contained" fullWidth sx={{ mt: 3 }} startIcon={<Publish />}>
               Mettre à jour
             </Button>
           </form>