update edit post cloudinary
This commit is contained in:
sebvtl728
parent
2ee6c53a98
commit
e267591ebb
@ -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>
|
||||
|
||||
@ -131,76 +131,87 @@ export async function getPostById(postId) {
|
||||
* @param {string} content - Le nouveau contenu
|
||||
* @returns {Promise<Object>} - L'article mis à jour
|
||||
*/
|
||||
export async function updatePost(postId, title, content) {
|
||||
const token = getToken();
|
||||
if (!token) {
|
||||
console.error("❌ Aucun token trouvé !");
|
||||
throw new Error("Utilisateur non authentifié.");
|
||||
}
|
||||
export async function updatePost(postId, title, content, imageId = null) {
|
||||
const token = getToken();
|
||||
if (!token) {
|
||||
console.error("❌ Aucun token trouvé !");
|
||||
throw new Error("Utilisateur non authentifié.");
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.post(`${API_URL}/posts/${postId}`, { // ✅ Rester sur `POST`
|
||||
title,
|
||||
content,
|
||||
status: "publish",
|
||||
}, {
|
||||
headers: {
|
||||
"Authorization": `Basic ${token}`, // ✅ Garder `Basic` si ça fonctionnait avant
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
const dataToSend = {
|
||||
title,
|
||||
content,
|
||||
status: "publish",
|
||||
};
|
||||
|
||||
console.log("✅ Article mis à jour avec succès :", response.data);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error("❌ Erreur mise à jour article :", error.response?.data || error.message);
|
||||
throw error;
|
||||
}
|
||||
if (imageId) {
|
||||
dataToSend.featured_media = imageId; // 🔥 Ajoute l'image en vedette
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.post(`${API_URL}/posts/${postId}`, dataToSend, {
|
||||
headers: {
|
||||
Authorization: `Basic ${token}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
console.log("✅ Article mis à jour avec succès :", response.data);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error("❌ Erreur mise à jour article :", error.response?.data || error.message);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 🔹 Supprime un article WordPress et son image associée
|
||||
* @param {number} postId - L'ID de l'article à supprimer
|
||||
* @param {number} imageId - L'ID de l'image en vedette à supprimer (facultatif)
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
export async function deletePost(postId, imageId) {
|
||||
const token = getToken();
|
||||
if (!token) {
|
||||
console.error("❌ Aucun token trouvé !");
|
||||
throw new Error("Utilisateur non authentifié.");
|
||||
export async function deletePost(postId) {
|
||||
const token = getToken();
|
||||
if (!token) throw new Error("Utilisateur non authentifié.");
|
||||
|
||||
try {
|
||||
console.log(`📢 Suppression article ID: ${postId}...`);
|
||||
|
||||
// 🔍 Récupérer les infos de l'article pour connaître l'image
|
||||
const postRes = await axios.get(`${API_URL}/posts/${postId}`, {
|
||||
headers: {
|
||||
Authorization: `Basic ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
const imageId = postRes.data.featured_media;
|
||||
|
||||
// ✅ Supprimer l'article
|
||||
await axios.delete(`${API_URL}/posts/${postId}?force=true`, {
|
||||
headers: {
|
||||
Authorization: `Basic ${token}`,
|
||||
},
|
||||
});
|
||||
console.log(`✅ Article ${postId} supprimé.`);
|
||||
|
||||
// 🧹 Supprimer l'image si elle existe
|
||||
if (imageId) {
|
||||
await axios.delete(`${API_URL}/media/${imageId}?force=true`, {
|
||||
headers: {
|
||||
Authorization: `Basic ${token}`,
|
||||
},
|
||||
});
|
||||
console.log(`🗑️ Image ${imageId} supprimée.`);
|
||||
}
|
||||
|
||||
try {
|
||||
console.log(`📢 Suppression article ID: ${postId}...`);
|
||||
|
||||
// ✅ Suppression du post
|
||||
await axios.delete(`${API_URL}/posts/${postId}?force=true`, {
|
||||
headers: {
|
||||
"Authorization": `Basic ${token}`, // ✅ Garder `Basic` si ça fonctionnait avant
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
|
||||
console.log(`✅ Article ${postId} supprimé.`);
|
||||
|
||||
// ✅ Suppression de l'image associée si elle existe
|
||||
if (imageId) {
|
||||
console.log(`📢 Suppression image ID: ${imageId}...`);
|
||||
await axios.delete(`${API_URL}/media/${imageId}?force=true`, {
|
||||
headers: {
|
||||
"Authorization": `Basic ${token}`, // ✅ Garder `Basic` si ça fonctionnait avant
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
console.log(`✅ Image ${imageId} supprimée.`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Erreur suppression :", error.response?.data || error.message);
|
||||
throw error;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Erreur suppression article ou image :", error.response?.data || error.message);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 🔹 Met à jour les champs ACF d'une page WordPress
|
||||
* @param {number} pageId - L'ID de la page à modifier
|
||||
|
||||
@ -7,7 +7,8 @@ dotenv.config();
|
||||
const app = express();
|
||||
|
||||
app.use(cors({
|
||||
origin: "https://octopusdesign.fr"
|
||||
// origin: "https://octopusdesign.fr"
|
||||
origin: ["https://octopusdesign.fr", "http://localhost:3000"]
|
||||
}));
|
||||
|
||||
app.use("/api", cloudinaryRoute);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user