From 623b749e4ffc533cb069a98d49afcb0469c09e9a Mon Sep 17 00:00:00 2001 From: "C. Fuhrman" Date: Sat, 8 Mar 2025 11:05:25 -0500 Subject: [PATCH] refactor AnswerType --- client/src/Types/StudentType.tsx | 4 +++- .../MultipleChoiceQuestionDisplay.test.tsx | 3 ++- .../TrueFalseQuestionDisplay.test.tsx | 3 ++- .../MultipleChoiceQuestionDisplay.tsx | 7 ++++--- .../NumericalQuestionDisplay/NumericalQuestionDisplay.tsx | 7 ++++--- client/src/components/QuestionsDisplay/QuestionDisplay.tsx | 5 +++-- .../ShortAnswerQuestionDisplay.tsx | 7 ++++--- .../TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx | 5 +++-- client/src/components/StudentModeQuiz/StudentModeQuiz.tsx | 7 ++++--- client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx | 4 ++-- client/src/pages/Teacher/ManageRoom/ManageRoom.tsx | 3 ++- client/src/services/WebsocketService.tsx | 5 +++-- 12 files changed, 36 insertions(+), 24 deletions(-) diff --git a/client/src/Types/StudentType.tsx b/client/src/Types/StudentType.tsx index b484af5..41a4a63 100644 --- a/client/src/Types/StudentType.tsx +++ b/client/src/Types/StudentType.tsx @@ -1,5 +1,7 @@ +import { AnswerType } from "src/pages/Student/JoinRoom/JoinRoom"; + export interface Answer { - answer: string | number | boolean; + answer: AnswerType; isCorrect: boolean; idQuestion: number; } diff --git a/client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx b/client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx index 018d96d..8751e8b 100644 --- a/client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx +++ b/client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx @@ -5,6 +5,7 @@ import { act } from 'react'; import { MemoryRouter } from 'react-router-dom'; import { MultipleChoiceQuestion, parse } from 'gift-pegjs'; import MultipleChoiceQuestionDisplay from 'src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay'; +import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; const questions = parse( `::Sample Question 1:: Question stem @@ -21,7 +22,7 @@ describe('MultipleChoiceQuestionDisplay', () => { const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => { const [showAnswerState, setShowAnswerState] = useState(showAnswer); - const handleOnSubmitAnswer = (answer: string | number | boolean) => { + const handleOnSubmitAnswer = (answer: AnswerType) => { mockHandleOnSubmitAnswer(answer); setShowAnswerState(true); }; diff --git a/client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx b/client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx index f640710..e6910d4 100644 --- a/client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx +++ b/client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx @@ -5,6 +5,7 @@ import '@testing-library/jest-dom'; import { MemoryRouter } from 'react-router-dom'; import TrueFalseQuestionDisplay from 'src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay'; import { parse, TrueFalseQuestion } from 'gift-pegjs'; +import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; describe('TrueFalseQuestion Component', () => { const mockHandleSubmitAnswer = jest.fn(); @@ -16,7 +17,7 @@ describe('TrueFalseQuestion Component', () => { const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => { const [showAnswerState, setShowAnswerState] = useState(showAnswer); - const handleOnSubmitAnswer = (answer: string | number | boolean) => { + const handleOnSubmitAnswer = (answer: AnswerType) => { mockHandleSubmitAnswer(answer); setShowAnswerState(true); }; diff --git a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx index c3658c2..df46193 100644 --- a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx @@ -4,17 +4,18 @@ import '../questionStyle.css'; import { Button } from '@mui/material'; import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate'; import { MultipleChoiceQuestion } from 'gift-pegjs'; +import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; interface Props { question: MultipleChoiceQuestion; - handleOnSubmitAnswer?: (answer: string | number | boolean) => void; + handleOnSubmitAnswer?: (answer: AnswerType) => void; showAnswer?: boolean; - passedAnswer?: string | number | boolean; + passedAnswer?: AnswerType; } const MultipleChoiceQuestionDisplay: React.FC = (props) => { const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props; - const [answer, setAnswer] = useState(passedAnswer || ''); + const [answer, setAnswer] = useState(passedAnswer || ''); let disableButton = false; diff --git a/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx index 4828185..525501d 100644 --- a/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx @@ -5,18 +5,19 @@ import { Button, TextField } from '@mui/material'; import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate'; import { NumericalQuestion, SimpleNumericalAnswer, RangeNumericalAnswer, HighLowNumericalAnswer } from 'gift-pegjs'; import { isSimpleNumericalAnswer, isRangeNumericalAnswer, isHighLowNumericalAnswer, isMultipleNumericalAnswer } from 'gift-pegjs/typeGuards'; +import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; interface Props { question: NumericalQuestion; - handleOnSubmitAnswer?: (answer: string | number | boolean) => void; + handleOnSubmitAnswer?: (answer: AnswerType) => void; showAnswer?: boolean; - passedAnswer?: string | number | boolean; + passedAnswer?: AnswerType; } const NumericalQuestionDisplay: React.FC = (props) => { const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props; - const [answer, setAnswer] = useState(passedAnswer || ''); + const [answer, setAnswer] = useState(passedAnswer || ''); const correctAnswers = question.choices; let correctAnswer = ''; diff --git a/client/src/components/QuestionsDisplay/QuestionDisplay.tsx b/client/src/components/QuestionsDisplay/QuestionDisplay.tsx index a1f0f30..af6e6d8 100644 --- a/client/src/components/QuestionsDisplay/QuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/QuestionDisplay.tsx @@ -5,13 +5,14 @@ import TrueFalseQuestionDisplay from './TrueFalseQuestionDisplay/TrueFalseQuesti import MultipleChoiceQuestionDisplay from './MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay'; import NumericalQuestionDisplay from './NumericalQuestionDisplay/NumericalQuestionDisplay'; import ShortAnswerQuestionDisplay from './ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay'; +import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; // import useCheckMobileScreen from '../../services/useCheckMobileScreen'; interface QuestionProps { question: Question; - handleOnSubmitAnswer?: (answer: string | number | boolean) => void; + handleOnSubmitAnswer?: (answer: AnswerType) => void; showAnswer?: boolean; - answer?: string | number | boolean; + answer?: AnswerType; } const QuestionDisplay: React.FC = ({ diff --git a/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx index 1dc02b5..28876f9 100644 --- a/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx @@ -3,19 +3,20 @@ import '../questionStyle.css'; import { Button, TextField } from '@mui/material'; import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate'; import { ShortAnswerQuestion } from 'gift-pegjs'; +import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; interface Props { question: ShortAnswerQuestion; - handleOnSubmitAnswer?: (answer: string | number | boolean) => void; + handleOnSubmitAnswer?: (answer: AnswerType) => void; showAnswer?: boolean; - passedAnswer?: string | number | boolean; + passedAnswer?: AnswerType; } const ShortAnswerQuestionDisplay: React.FC = (props) => { const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props; - const [answer, setAnswer] = useState(passedAnswer || ''); + const [answer, setAnswer] = useState(passedAnswer || ''); useEffect(() => { if (passedAnswer !== undefined) { diff --git a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx index 736563b..8908338 100644 --- a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx @@ -4,12 +4,13 @@ import '../questionStyle.css'; import { Button } from '@mui/material'; import { TrueFalseQuestion } from 'gift-pegjs'; import { FormattedTextTemplate } from 'src/components/GiftTemplate/templates/TextTypeTemplate'; +import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; interface Props { question: TrueFalseQuestion; - handleOnSubmitAnswer?: (answer: string | number | boolean) => void; + handleOnSubmitAnswer?: (answer: AnswerType) => void; showAnswer?: boolean; - passedAnswer?: string | number | boolean; + passedAnswer?: AnswerType; } const TrueFalseQuestionDisplay: React.FC = (props) => { diff --git a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx index 1feb4a1..192c0b2 100644 --- a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx +++ b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx @@ -8,11 +8,12 @@ import { Button } from '@mui/material'; import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton'; import { Question } from 'gift-pegjs'; import { AnswerSubmissionToBackendType } from 'src/services/WebsocketService'; +import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; interface StudentModeQuizProps { questions: QuestionType[]; answers: AnswerSubmissionToBackendType[]; - submitAnswer: (_answer: string | number | boolean, _idQuestion: number) => void; + submitAnswer: (_answer: AnswerType, _idQuestion: number) => void; disconnectWebSocket: () => void; } @@ -25,7 +26,7 @@ const StudentModeQuiz: React.FC = ({ //Ajouter type AnswerQuestionType en remplacement de QuestionType const [questionInfos, setQuestion] = useState(questions[0]); const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false); - // const [answer, setAnswer] = useState(''); + // const [answer, setAnswer] = useState(''); const previousQuestion = () => { @@ -42,7 +43,7 @@ const StudentModeQuiz: React.FC = ({ setQuestion(questions[Number(questionInfos.question?.id)]); }; - const handleOnSubmitAnswer = (answer: string | number | boolean) => { + const handleOnSubmitAnswer = (answer: AnswerType) => { const idQuestion = Number(questionInfos.question.id) || -1; submitAnswer(answer, idQuestion); setIsAnswerSubmitted(true); diff --git a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx index c11e8a5..8925c09 100644 --- a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx +++ b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx @@ -13,7 +13,7 @@ import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; interface TeacherModeQuizProps { questionInfos: QuestionType; answers: AnswerSubmissionToBackendType[]; - submitAnswer: (_answer: string | number | boolean, _idQuestion: number) => void; + submitAnswer: (_answer: AnswerType, _idQuestion: number) => void; disconnectWebSocket: () => void; } @@ -50,7 +50,7 @@ const TeacherModeQuiz: React.FC = ({ setIsFeedbackDialogOpen(isAnswerSubmitted); }, [isAnswerSubmitted]); - const handleOnSubmitAnswer = (answer: string | number | boolean) => { + const handleOnSubmitAnswer = (answer: AnswerType) => { const idQuestion = Number(questionInfos.question.id) || -1; submitAnswer(answer, idQuestion); // setAnswer(answer); diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx index 411567c..bcdc80d 100644 --- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx +++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx @@ -24,6 +24,7 @@ import QuestionDisplay from 'src/components/QuestionsDisplay/QuestionDisplay'; import ApiService from '../../../services/ApiService'; import { QuestionType } from 'src/Types/QuestionType'; import { Button } from '@mui/material'; +import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; const ManageRoom: React.FC = () => { const navigate = useNavigate(); @@ -319,7 +320,7 @@ const ManageRoom: React.FC = () => { }; function checkIfIsCorrect( - answer: string | number | boolean, + answer: AnswerType, idQuestion: number, questions: QuestionType[] ): boolean { diff --git a/client/src/services/WebsocketService.tsx b/client/src/services/WebsocketService.tsx index 212aa21..9262a59 100644 --- a/client/src/services/WebsocketService.tsx +++ b/client/src/services/WebsocketService.tsx @@ -1,4 +1,5 @@ import { io, Socket } from 'socket.io-client'; +import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; import { QuestionType } from 'src/Types/QuestionType'; // Must (manually) sync these types to server/socket/socket.js @@ -6,14 +7,14 @@ import { QuestionType } from 'src/Types/QuestionType'; export type AnswerSubmissionToBackendType = { roomName: string; username: string; - answer: string | number | boolean; + answer: AnswerType; idQuestion: number; }; export type AnswerReceptionFromBackendType = { idUser: string; username: string; - answer: string | number | boolean; + answer: AnswerType; idQuestion: number; };