| import React, { useState, useEffect } from "react"; |
| import { Box, CircularProgress } from "@mui/material"; |
| import { useSearchParams, Navigate } from "react-router-dom"; |
| import Intro from "../components/Intro"; |
| import Display from "../components/Evaluation/Display"; |
| import { useThemeMode } from "../hooks/useThemeMode"; |
| import getTheme from "../config/theme"; |
| import API_CONFIG from "../config/api"; |
| import ErrorDisplay from "../components/common/ErrorDisplay"; |
|
|
| function EvaluationDisplayPage() { |
| const [searchParams] = useSearchParams(); |
| const sessionId = searchParams.get("session"); |
| const [isValidSession, setIsValidSession] = useState(true); |
| const [isLoading, setIsLoading] = useState(true); |
| const [evaluationResults, setEvaluationResults] = useState(null); |
| const [error, setError] = useState(null); |
| const { mode } = useThemeMode(); |
| const theme = getTheme(mode); |
|
|
| |
| const baseDocuments = ["the-bitter-lesson", "hurricane-faq", "pokemon-guide"]; |
| const isBaseDocument = baseDocuments.includes(sessionId); |
|
|
| useEffect(() => { |
| if (!sessionId) { |
| console.log( |
| "Session ID manquante pour l'affichage des résultats, redirection vers l'accueil" |
| ); |
| setIsValidSession(false); |
| return; |
| } |
|
|
| const fetchEvaluationResults = async () => { |
| try { |
| |
| const sessionCheckResponse = await fetch( |
| `${API_CONFIG.BASE_URL}/benchmark-questions/${sessionId}` |
| ); |
|
|
| if (!sessionCheckResponse.ok) { |
| console.error( |
| `Session invalide ou erreur serveur: ${sessionCheckResponse.status}` |
| ); |
| setIsValidSession(false); |
| return; |
| } |
|
|
| |
| const evalResponse = await fetch( |
| `${API_CONFIG.BASE_URL}/evaluation-results/${sessionId}` |
| ); |
|
|
| if (!evalResponse.ok) { |
| setError(`Failed to fetch results: ${evalResponse.status}`); |
| setIsLoading(false); |
| return; |
| } |
|
|
| const data = await evalResponse.json(); |
|
|
| if (!data.success) { |
| setError(data.message || "Failed to fetch evaluation results"); |
| setIsLoading(false); |
| return; |
| } |
|
|
| setEvaluationResults(data.results); |
| } catch (error) { |
| console.error("Error fetching evaluation results:", error); |
| setError(error.message); |
| } finally { |
| setIsLoading(false); |
| } |
| }; |
|
|
| fetchEvaluationResults(); |
| }, [sessionId]); |
|
|
| |
| useEffect(() => { |
| |
| if (isBaseDocument || isLoading || !evaluationResults) { |
| return; |
| } |
|
|
| |
| const cleanupSession = async () => { |
| try { |
| const response = await fetch( |
| `${API_CONFIG.BASE_URL}/cleanup-session/${sessionId}`, |
| { |
| method: "DELETE", |
| } |
| ); |
|
|
| if (response.ok) { |
| console.log(`Session ${sessionId} cleaned up successfully`); |
| } else { |
| console.warn(`Failed to clean up session ${sessionId}`); |
| } |
| } catch (error) { |
| console.error("Error cleaning up session:", error); |
| } |
| }; |
|
|
| |
| const cleanupTimeout = setTimeout(() => { |
| cleanupSession(); |
| }, 2000); |
|
|
| |
| return () => clearTimeout(cleanupTimeout); |
| }, [sessionId, isBaseDocument, isLoading, evaluationResults]); |
|
|
| if (!isValidSession) { |
| return <Navigate to="/" />; |
| } |
|
|
| return ( |
| <> |
| <Intro /> |
| {isLoading ? ( |
| <Box |
| sx={{ |
| display: "flex", |
| justifyContent: "center", |
| alignItems: "center", |
| mt: 8, |
| mb: 8, |
| }} |
| > |
| <CircularProgress size={60} /> |
| </Box> |
| ) : error ? ( |
| <ErrorDisplay error={error} title="Error" /> |
| ) : ( |
| <Box |
| sx={{ |
| border: `1px solid ${theme.palette.divider}`, |
| borderRadius: 2, |
| p: 4, |
| bgcolor: "background.paper", |
| }} |
| > |
| <Display sessionId={sessionId} results={evaluationResults} /> |
| </Box> |
| )} |
| </> |
| ); |
| } |
|
|
| export default EvaluationDisplayPage; |
|
|