Maj gestion des articles

2025-01-31 20:05:03 +01:00
parent 841161cb9b
commit 0d42ce54fc
7 changed files with 518 additions and 113 deletions
@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from "react";
+import { Box, Typography, Button, CircularProgress } from "@mui/material";
+import { useParams, useNavigate } from "react-router-dom";
+import api from "../api";
+
+const PostDetails = () => {
+  const { id } = useParams();
+  const [post, setPost] = useState(null);
+  const [image, setImage] = useState(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchPost = async () => {
+      try {
+        const response = await api.get(`wp/v2/posts/${id}?_fields=title,content,featured_media,date`);
+        setPost(response.data);
+
+        // Récupération de l'image
+        if (response.data.featured_media) {
+          const mediaResponse = await api.get(`wp/v2/media/${response.data.featured_media}`);
+          setImage(mediaResponse.data.source_url);
+        }
+      } catch (error) {
+        console.error("Erreur lors de la récupération de l'article :", error);
+      }
+    };
+
+    fetchPost();
+  }, [id]);
+
+  if (!post) {
+    return <CircularProgress sx={{ display: "block", margin: "auto", mt: 5 }} />;
+  }
+
+  return (
+    <Box sx={{ padding: "40px 20px",display:"flex", flexDirection:"column" }}>
+      <Button onClick={() => navigate(-1)} variant="outlined" sx={{ mt:5, mb: 3, maxWidth:"200px" }}>
+        ⬅ Retour
+      </Button>
+
+      <Typography variant="h1" sx={{ 
+        fontWeight: "bold", 
+        textAlign: "center", 
+        mb: 4,
+        fontSize: { xs: '3rem', md: '3rem', lg: '3rem' }, // Responsive 
+        }}>
+        {post.title.rendered}
+      </Typography>
+
+      <Box sx={{ display:"flex", alignItems:"center", justifyContent:"center", padding: "40px 20px",margin:"auto" }}>
+      {image && (
+        <Box
+          component="img"
+          src={image}
+          alt={post.title.rendered}
+          sx={{ width: "33%", maxHeight: "400px", objectFit: "cover", borderRadius: "8px", mb: 3 }}
+        />
+      )}
+
+
+      <Typography variant="body1" sx={{ maxWidth: "800px", mx: "auto" }} dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
+      </Box>
+    </Box>
+  );
+};
+
+export default PostDetails;