Faire l'appel de TextTypeTemplate au lieu de format() et sanitize()

Fixes #233

client/src/components/GiftTemplate/GIFTTemplatePreview.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import Template, { ErrorTemplate } from './templates';
 import { parse } from 'gift-pegjs';
 import './styles.css';
-import DOMPurify from 'dompurify';
+import { FormattedTextTemplate } from './templates/TextTypeTemplate';
 
 interface GIFTTemplatePreviewProps {
     questions: string[];
@@ -74,7 +74,7 @@ const GIFTTemplatePreview: React.FC<GIFTTemplatePreviewProps> = ({
                 <div className="error">{error}</div>
             ) : isPreviewReady ? (
                 <div data-testid="preview-container">
-                    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(items) }}></div>
+                    <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate({ format: 'html', text: items }) }}></div>
                 </div>
             ) : (
                 <div className="loading">Chargement de la prévisualisation...</div>

client/src/components/GiftTemplate/templates/TextTypeTemplate.ts

@@ -4,7 +4,7 @@ import katex from 'katex';
 import { TextFormat } from 'gift-pegjs';
 import DOMPurify from 'dompurify';  // cleans HTML to prevent XSS attacks, etc.
 
-export function formatLatex(text: string): string {
+function formatLatex(text: string): string {
     return text
         .replace(/\$\$(.*?)\$\$/g, (_, inner) => katex.renderToString(inner, { displayMode: true }))
         .replace(/\$(.*?)\$/g, (_, inner) => katex.renderToString(inner, { displayMode: false }))

client/src/components/LiveResults/LiveResults.tsx

@@ -20,7 +20,7 @@ import {
     TableRow
 } from '@mui/material';
 import { StudentType } from '../../Types/StudentType';
-import { formatLatex } from '../GiftTemplate/templates/TextTypeTemplate';
+import { FormattedTextTemplate } from '../GiftTemplate/templates/TextTypeTemplate';
 
 interface LiveResultsProps {
     socket: Socket | null;
@@ -30,117 +30,13 @@ interface LiveResultsProps {
     students: StudentType[]
 }
 
-// interface Answer {
-//     answer: string | number | boolean;
-//     isCorrect: boolean;
-//     idQuestion: number;
-// }
-
-// interface StudentResult {
-//     username: string;
-//     idUser: string;
-//     answers: Answer[];
-// }
 
 const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => {
     const [showUsernames, setShowUsernames] = useState<boolean>(false);
     const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false);
-    // const [students, setStudents] = useState<StudentType[]>(initialStudents);
-    // const [studentResultsMap, setStudentResultsMap] = useState<Map<string, StudentResult>>(new Map());
 
     const maxQuestions = questions.length;
 
-    // useEffect(() => {
-    //     // Initialize the map with the current students
-    //     const newStudentResultsMap = new Map<string, StudentResult>();
-
-    //     for (const student of students) {
-    //         newStudentResultsMap.set(student.id, { username: student.name, idUser: student.id, answers: [] });
-    //     }
-
-    //     setStudentResultsMap(newStudentResultsMap);
-    // }, [])
-
-    // update when students change
-    // useEffect(() => {
-    //     // studentResultsMap is inconsistent with students -- need to update
-
-    //     for (const student of students as StudentType[]) {
-    //     }
-
-    // }, [students])
-
-    // useEffect(() => {
-    //     if (socket) {
-    //         const submitAnswerHandler = ({
-    //             idUser,
-    //             answer,
-    //             idQuestion
-    //         }: {
-    //             idUser: string;
-    //             username: string;
-    //             answer: string | number | boolean;
-    //             idQuestion: number;
-    //         }) => {
-    //             console.log(`Received answer from ${idUser} for question ${idQuestion}: ${answer}`);
-
-    //             // print the list of current student names
-    //             console.log('Current students:');
-    //             students.forEach((student) => {
-    //                 console.log(student.name);
-    //             });
-
-    //             // Update the students state using the functional form of setStudents
-    //             setStudents((prevStudents) => {
-    //                 let foundStudent = false;
-    //                 const updatedStudents = prevStudents.map((student) => {
-    //                     if (student.id === idUser) {
-    //                         foundStudent = true;
-    //                         const updatedAnswers = student.answers.map((ans) => {
-    //                             const newAnswer: Answer = { answer, isCorrect: checkIfIsCorrect(answer, idQuestion), idQuestion };
-    //                             console.log(`Updating answer for ${student.name} for question ${idQuestion} to ${answer}`);
-    //                             return (ans.idQuestion === idQuestion ? { ...ans, newAnswer } : ans);
-    //                         }
-    //                         );
-    //                         return { ...student, answers: updatedAnswers };
-    //                     }
-    //                     return student;
-    //                 });
-    //                 if (!foundStudent) {
-    //                     console.log(`Student ${idUser} not found in the list of students in LiveResults`);
-    //                 }
-    //                 return updatedStudents;
-    //             });
-
-
-    //             // make a copy of the students array so we can update it
-    //             // const updatedStudents = [...students];
-
-    //             // const student = updatedStudents.find((student) => student.id === idUser);
-    //             // if (!student) {
-    //             //     // this is a bad thing if an answer was submitted but the student isn't in the list
-    //             //     console.log(`Student ${idUser} not found in the list of students in LiveResults`);
-    //             //     return;
-    //             // }
-
-    //             // const isCorrect = checkIfIsCorrect(answer, idQuestion);
-    //             // const newAnswer: Answer = { answer, isCorrect, idQuestion };
-    //             // student.answers.push(newAnswer);
-    //             // // print list of answers
-    //             // console.log('Answers:');
-    //             // student.answers.forEach((answer) => {
-    //             //     console.log(answer.answer);
-    //             // });
-    //             // setStudents(updatedStudents); // update the state
-    //         };
-
-    //         socket.on('submit-answer', submitAnswerHandler);
-    //         return () => {
-    //             socket.off('submit-answer');
-    //         };
-    //     }
-    // }, [socket]);
-
     const getStudentGrade = (student: StudentType): number => {
         if (student.answers.length === 0) {
             return 0;
@@ -185,85 +81,6 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
         );
     };
 
-    //     (studentResults.filter((student) =>
-    //         student.answers.some(
-    //             (answer) =>
-    //                 parseInt(answer.idQuestion.toString()) === index + 1 && answer.isCorrect
-    //         )
-    //     ).length /
-    //         studentResults.length) *
-    //     100
-    // );
-    // };
-
-    // function checkIfIsCorrect(answer: string | number | boolean, idQuestion: number): boolean {
-    //     const questionInfo = questions.find((q) =>
-    //         q.question.id ? q.question.id === idQuestion.toString() : false
-    //     ) as QuestionType | undefined;
-
-    //     const answerText = answer.toString();
-    //     if (questionInfo) {
-    //         const question = questionInfo.question as GIFTQuestion;
-    //         if (question.type === 'TF') {
-    //             return (
-    //                 (question.isTrue && answerText == 'true') ||
-    //                 (!question.isTrue && answerText == 'false')
-    //             );
-    //         } else if (question.type === 'MC') {
-    //             return question.choices.some(
-    //                 (choice) => choice.isCorrect && choice.text.text === answerText
-    //             );
-    //         } else if (question.type === 'Numerical') {
-    //             if (question.choices && !Array.isArray(question.choices)) {
-    //                 if (
-    //                     question.choices.type === 'high-low' &&
-    //                     question.choices.numberHigh &&
-    //                     question.choices.numberLow
-    //                 ) {
-    //                     const answerNumber = parseFloat(answerText);
-    //                     if (!isNaN(answerNumber)) {
-    //                         return (
-    //                             answerNumber <= question.choices.numberHigh &&
-    //                             answerNumber >= question.choices.numberLow
-    //                         );
-    //                     }
-    //                 }
-    //             }
-    //             if (question.choices && Array.isArray(question.choices)) {
-    //                 if (
-    //                     question.choices[0].text.type === 'range' &&
-    //                     question.choices[0].text.number &&
-    //                     question.choices[0].text.range
-    //                 ) {
-    //                     const answerNumber = parseFloat(answerText);
-    //                     const range = question.choices[0].text.range;
-    //                     const correctAnswer = question.choices[0].text.number;
-    //                     if (!isNaN(answerNumber)) {
-    //                         return (
-    //                             answerNumber <= correctAnswer + range &&
-    //                             answerNumber >= correctAnswer - range
-    //                         );
-    //                     }
-    //                 }
-    //                 if (
-    //                     question.choices[0].text.type === 'simple' &&
-    //                     question.choices[0].text.number
-    //                 ) {
-    //                     const answerNumber = parseFloat(answerText);
-    //                     if (!isNaN(answerNumber)) {
-    //                         return answerNumber === question.choices[0].text.number;
-    //                     }
-    //                 }
-    //             }
-    //         } else if (question.type === 'Short') {
-    //             return question.choices.some(
-    //                 (choice) => choice.text.text.toUpperCase() === answerText.toUpperCase()
-    //             );
-    //         }
-    //     }
-    //     return false;
-    // }
-
     return (
         <div>
             <div className="action-bar mb-1">
@@ -370,7 +187,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
                                                 }
                                             >
                                                 {showCorrectAnswers ? (
-                                                    <div>{formatLatex(answerText)}</div>
+                                                    <div dangerouslySetInnerHTML={{ __html:FormattedTextTemplate({ format: '', text: answerText }) }}></div>
                                                 ) : isCorrect ? (
                                                     <FontAwesomeIcon icon={faCheck} />
                                                 ) : (