Ladebeze66/devsite
1
0
Fork 0
mirror of https://github.com/Ladebeze66/devsite.git synced 2025-12-13 12:46:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

okhttps

Browse Source
This commit is contained in:
Ladebeze66 2025-02-09 17:36:50 +01:00
parent d45d36465c
commit aaee2b5952
5 changed files with 79 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/Competences/[slug]/page.tsx
View File

@ -1,9 +1,10 @@
import ContentSectionCompetencesContainer from "../../components/ContentSectionCompetencesContainer";
export default function CompetencePage({ params }: { params: { slug: string } }) {
// Vérifie que le paramètre `slug` est bien défini
export default function CompetencePage({ params }: { params: { slug?: string } }) {
// ✅ Vérification du slug avant d'afficher le composant
if (!params?.slug) {
return <div>Erreur : Slug introuvable.</div>;
console.error("❌ [CompetencePage] Erreur : Aucun slug fourni !");
return <div className="text-center text-red-500">❌ Erreur : Compétence introuvable.</div>;
}
return <ContentSectionCompetencesContainer collection="competences" slug={params.slug} />;

41
app/components/ContentSectionCompetences.tsx
View File

@ -1,7 +1,7 @@
"use client";
import { useState, useEffect } from "react";
import { getApiUrl } from "../utils/getApiUrl"; // ✅ Importation de l'URL dynamique
import { getApiUrl } from "../utils/getApiUrl";
import CarouselCompetences from "./CarouselCompetences";
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
@ -37,28 +37,42 @@ interface ContentSectionProps {
contentClass?: string;
}
// ✅ Composant principal
export default function ContentSectionCompetences({ competenceData, glossaireData, titleClass, contentClass }: ContentSectionProps) {
export default function ContentSectionCompetences({
competenceData,
glossaireData,
titleClass,
contentClass,
}: ContentSectionProps) {
console.log("🔍 [ContentSectionCompetences] Chargement du composant...");
console.log("📌 [ContentSectionCompetences] Données reçues - competenceData :", competenceData);
console.log("📌 [ContentSectionCompetences] Données reçues - glossaireData :", glossaireData);
const [selectedMot, setSelectedMot] = useState<GlossaireItem | null>(null);
const apiUrl = getApiUrl(); // ✅ Détection automatique de l'URL API
const [loading, setLoading] = useState(competenceData === null); // ✅ Initialiser correctement loading
const apiUrl = getApiUrl();
useEffect(() => {
if (competenceData) {
setLoading(false); // ✅ Mise à jour de loading une seule fois après chargement
}
}, [competenceData]);
// ✅ Affichage d'un message de chargement
if (loading) {
return <div className="text-center text-gray-500">⏳ Chargement des détails de la compétence...</div>;
}
if (!competenceData) {
console.error("❌ [ContentSectionCompetences] Compétence introuvable !");
return <div className="text-red-500 text-center">❌ Compétence introuvable.</div>;
}
// ✅ Déstructuration des données de la compétence
const { name, content, picture } = competenceData;
// ✅ Transformation des images de Strapi en format attendu par le carrousel
const images = picture?.map((img) => ({
url: `${apiUrl}${img.formats?.large?.url || img.url}`, // ✅ Correction ici
alt: img.name || "Image de compétence",
})) || [];
const images =
picture?.map((img) => ({
url: `${apiUrl}${img.formats?.large?.url || img.url}`,
alt: img.name || "Image de compétence",
})) || [];
console.log("✅ [ContentSectionCompetences] Images préparées :", images);
@ -68,7 +82,9 @@ export default function ContentSectionCompetences({ competenceData, glossaireDat
let modifiedText = text;
glossaireData.forEach(({ mot_clef, variantes }) => {
const regexVariants = variantes.map((v) => v.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
const regexVariants = variantes
.map((v) => v.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"))
.join("|");
const regex = new RegExp(`\\b(${mot_clef}|${regexVariants})\\b`, "gi");
modifiedText = modifiedText.replace(regex, (match) => {
@ -101,7 +117,6 @@ export default function ContentSectionCompetences({ competenceData, glossaireDat
return (
<div className="max-w-3xl mx-auto p-6">
{/* ✅ Ajout de logs visuels dans le rendu */}
<h1 className={titleClass || "text-3xl mb-6 font-bold text-gray-700"}>{name}</h1>
<CarouselCompetences images={images} className="w-full h-64" />
<div className={contentClass || "mt-6 text-lg text-black-700"}>

40
app/components/ContentSectionCompetencesContainer.tsx
View File

@ -1,3 +1,6 @@
"use client"; // ✅ Indique que ce composant fonctionne côté client
import { useEffect, useState } from "react";
import { fetchDataCompetences, fetchDataGlossaire } from "../utils/fetchDataCompetences";
import ContentSectionCompetences from "./ContentSectionCompetences";
@ -8,14 +11,39 @@ interface ContentSectionProps {
contentClass?: string;
}
export default async function ContentSectionCompetencesContainer({ collection, slug, titleClass, contentClass }: ContentSectionProps) {
export default function ContentSectionCompetencesContainer({ collection, slug, titleClass, contentClass }: ContentSectionProps) {
console.log("🔍 [ContentSectionCompetencesContainer] Chargement des données...");
const competenceData = await fetchDataCompetences(collection, slug);
console.log("✅ [ContentSectionCompetencesContainer] Données compétences :", JSON.stringify(competenceData, null, 2));
const glossaireData = await fetchDataGlossaire();
console.log("✅ [ContentSectionCompetencesContainer] Données glossaire :", JSON.stringify(glossaireData, null, 2));
// ✅ États pour stocker les données récupérées
const [competenceData, setCompetenceData] = useState(null);
const [glossaireData, setGlossaireData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchData() {
setLoading(true);
try {
const competence = await fetchDataCompetences(collection, slug);
console.log("✅ [ContentSectionCompetencesContainer] Données compétences :", competence);
setCompetenceData(competence);
const glossaire = await fetchDataGlossaire();
console.log("✅ [ContentSectionCompetencesContainer] Données glossaire :", glossaire);
setGlossaireData(glossaire);
} catch (error) {
console.error("❌ [ContentSectionCompetencesContainer] Erreur lors de la récupération des données :", error);
} finally {
setLoading(false);
}
}
fetchData();
}, [collection, slug]); // ⚡ S'exécute à chaque changement de `collection` ou `slug`
// ✅ Affichage d'un message de chargement
if (loading) {
return <div className="text-center text-gray-500">⏳ Chargement des compétences...</div>;
}
return (
<ContentSectionCompetences

2
app/page.tsx
View File

@ -28,7 +28,7 @@ export default function HomePage() {
getHomepageData().then((data) => setHomepage(data));
}, []);
if (!homepage) return <p className="text-center text-red-500">Erreur lors du chargement du contenu.</p>;
if (!homepage) return <p className="text-center text-blue-500">Chargement de la page...</p>;
const title = homepage.title ?? "Titre par défaut";
const cv = homepage.cv ?? "";

21
app/utils/fetchDataCompetences.ts
View File

@ -3,6 +3,11 @@ import { getApiUrl } from "./getApiUrl";
export async function fetchDataCompetences(collection: string, slug: string) {
const apiUrl = getApiUrl();
if (!apiUrl) {
console.error("❌ [fetchDataCompetences] URL de l'API invalide !");
return null;
}
const query = qs.stringify({
filters: { slug: { $eq: slug } },
populate: "picture",
@ -14,11 +19,8 @@ export async function fetchDataCompetences(collection: string, slug: string) {
try {
const response = await fetch(fullUrl, { cache: "no-store" });
console.log(`📡 [fetchDataCompetences] Réponse HTTP : ${response.status} ${response.statusText}`);
if (!response.ok) {
console.error(`❌ [fetchDataCompetences] Erreur HTTP ${response.status} : ${response.statusText}`);
return null;
throw new Error(`HTTP ${response.status} : ${response.statusText}`);
}
const data = await response.json();
@ -32,18 +34,19 @@ export async function fetchDataCompetences(collection: string, slug: string) {
export async function fetchDataGlossaire() {
const apiUrl = getApiUrl();
const fullUrl = `${apiUrl}/api/glossaires?populate=images`;
if (!apiUrl) {
console.error("❌ [fetchDataGlossaire] URL de l'API invalide !");
return [];
}
const fullUrl = `${apiUrl}/api/glossaires?populate=images`;
console.log("🔍 [fetchDataGlossaire] Requête API :", fullUrl);
try {
const response = await fetch(fullUrl, { cache: "no-store" });
console.log(`📡 [fetchDataGlossaire] Réponse HTTP : ${response.status} ${response.statusText}`);
if (!response.ok) {
console.error(`❌ [fetchDataGlossaire] Erreur HTTP ${response.status} : ${response.statusText}`);
return [];
throw new Error(`HTTP ${response.status} : ${response.statusText}`);
}
const data = await response.json();