|
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; |
|
|