update contact & FAQ loop compossent

frontend/src/components/Faq.jsx

@@ -1,32 +1,44 @@
 import React, { useState, useEffect } from "react";
-import { Box, TextField, Typography, Collapse } from "@mui/material";
+import { Box, TextField, Typography, Collapse, CircularProgress } from "@mui/material";
+import axios from "axios";
 
 const Faq = ({ showFAQ }) => {
   const [faqSearch, setFaqSearch] = useState("");
   const [filteredFaqs, setFilteredFaqs] = useState([]);
-
-  const faqs = [
-    {
-      question: "Comment contacter notre service client ?",
-      answer:
-        "Vous pouvez nous appeler au +33 1 23 45 67 89 ou nous écrire via le formulaire de contact.",
-    },
-    {
-      question: "Quels sont vos horaires d'ouverture ?",
-      answer: "Nous sommes ouverts du lundi au vendredi de 9h00 à 18h00.",
-    },
-    {
-      question: "Où êtes-vous situés ?",
-      answer: "Notre adresse est 123 Rue Exemple, Paris, France.",
-    },
-    {
-      question: "Proposez-vous des services personnalisés ?",
-      answer: "Oui, contactez-nous pour discuter de vos besoins spécifiques.",
-    },
-  ];
+  const [faqs, setFaqs] = useState([]);
+  const [loading, setLoading] = useState(true); // Ajout d'un état de chargement
+  const [error, setError] = useState(null); // Ajout d'un état d'erreur
 
   useEffect(() => {
-    setFilteredFaqs(faqs);
+    const fetchFaqs = async () => {
+      try {
+        // Requête pour récupérer les FAQs depuis l'API WordPress
+        const response = await axios.get(
+          "https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/116?_fields=acf.faq.faq_list"
+        );
+
+        const faqList = response.data.acf?.faq?.faq_list; // Chemin vers le répéteur dans l'API
+        if (faqList && Array.isArray(faqList)) {
+          const formattedFaqs = faqList.map((item) => ({
+            question: item.question || "Question non définie",
+            answer: item.answer || "Réponse non définie",
+          }));
+
+          setFaqs(formattedFaqs);
+          setFilteredFaqs(formattedFaqs); // Initialiser la liste filtrée
+        } else {
+          console.warn("Aucune FAQ trouvée dans le champ répéteur.");
+          setError("Aucune FAQ disponible pour le moment.");
+        }
+      } catch (error) {
+        console.error("Erreur lors de la récupération des FAQs :", error);
+        setError("Impossible de récupérer les FAQs. Veuillez réessayer plus tard.");
+      } finally {
+        setLoading(false); // Désactiver le chargement
+      }
+    };
+
+    fetchFaqs();
   }, []);
 
   const handleSearch = (e) => {
@@ -51,7 +63,7 @@ const Faq = ({ showFAQ }) => {
         }}
       >
         <Typography
-          variant="h4"
+          variant="h3"
           sx={{
             fontWeight: "bold",
             mb: 4,
@@ -62,40 +74,54 @@ const Faq = ({ showFAQ }) => {
           FAQ
         </Typography>
 
-        {/* Barre de recherche */}
-        <TextField
-          placeholder="Rechercher dans la FAQ..."
-          fullWidth
-          variant="outlined"
-          value={faqSearch}
-          onChange={handleSearch}
-          sx={{
-            mb: 4,
-          }}
-        />
+        {loading ? (
+          <Box sx={{ textAlign: "center", py: 4 }}>
+            <CircularProgress />
+          </Box>
+        ) : error ? (
+          <Typography variant="body1" sx={{ color: "red", textAlign: "center" }}>
+            {error}
+          </Typography>
+        ) : (
+          <>
+            {/* Barre de recherche */}
+            <TextField
+              placeholder="Rechercher dans la FAQ..."
+              fullWidth
+              variant="outlined"
+              value={faqSearch}
+              onChange={handleSearch}
+              sx={{
+                mb: 4,
+              }}
+            />
 
-        {/* Liste des FAQs */}
-        <Box>
-          {filteredFaqs.length > 0 ? (
-            filteredFaqs.map((faq, index) => (
-              <Box key={index} sx={{ mb: 3 }}>
-                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
-                  {faq.question}
+            {/* Liste des FAQs */}
+            <Box>
+              {filteredFaqs.length > 0 ? (
+                filteredFaqs.map((faq, index) => (
+                  <Box key={index} sx={{ mb: 3 }}>
+                    <Typography variant="h4" sx={{ fontWeight: "bold" }}>
+                      {faq.question}
+                    </Typography>
+                    <Typography
+                      variant="body1"
+                      sx={{ color: "#666" }}
+                      dangerouslySetInnerHTML={{ __html: faq.answer }} // Si la réponse contient du HTML
+                    />
+                  </Box>
+                ))
+              ) : (
+                <Typography
+                  variant="body1"
+                  sx={{ color: "#999", textAlign: "center" }}
+                >
+                  Aucun résultat trouvé. Essayez un autre mot-clé.
                 </Typography>
-                <Typography variant="body1" sx={{ color: "#666" }}>
-                  {faq.answer}
-                </Typography>
-              </Box>
-            ))
-          ) : (
-            <Typography
-              variant="body1"
-              sx={{ color: "#999", textAlign: "center" }}
-            >
-              Aucun résultat trouvé.
-            </Typography>
-          )}
-        </Box>
+              )}
+            </Box>
+          </>
+        )}
       </Box>
     </Collapse>
   );