From cbc63d5461d2b7cf8073b8f36e95f4bf17361794 Mon Sep 17 00:00:00 2001
From: "guilhem.carron" <gcarron@grandlyon.com>
Date: Tue, 22 Jun 2021 11:52:19 +0200
Subject: [PATCH] Fix explanation modal overlap
---
src/components/Quiz/QuizQuestionContent.tsx | 44 +++++++++++----------
1 file changed, 23 insertions(+), 21 deletions(-)
diff --git a/src/components/Quiz/QuizQuestionContent.tsx b/src/components/Quiz/QuizQuestionContent.tsx
index 9c8e63b24..c9e2e7ead 100644
--- a/src/components/Quiz/QuizQuestionContent.tsx
+++ b/src/components/Quiz/QuizQuestionContent.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import React, { Dispatch, SetStateAction, useCallback, useState } from 'react'
import './quizQuestion.scss'
import CloseIcon from 'assets/icons/ico/close.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
@@ -34,7 +34,6 @@ const QuizQuestionContent: React.FC<QuizQuestionContent> = ({
const [questionIndex, setQuestionIndex] = useState<number>(
questionIndexLocked
)
- const [enableNextQuest, setEnableNextQuest] = useState<boolean>(false)
const client: Client = useClient()
const dispatch = useDispatch()
@@ -67,23 +66,24 @@ const QuizQuestionContent: React.FC<QuizQuestionContent> = ({
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setUserChoice(e.target.value)
}
-
- const goNextQuestion = async () => {
- setEnableNextQuest(true)
+ const goNextQuestion = useCallback(() => {
+ setUserChoice('')
setOpenModal(false)
if (questionIndex === userChallenge.quiz.questions.length - 1) {
setIsCustomQuest(true)
}
- }
- useEffect(() => {
- if (enableNextQuest) {
- if (questionIndex !== userChallenge.quiz.questions.length - 1) {
- setQuestionIndex(questionIndex + 1)
- }
- setEnableNextQuest(false)
- setUserChoice('')
+ if (questionIndex !== userChallenge.quiz.questions.length - 1) {
+ setQuestionIndex(questionIndex + 1)
}
- }, [enableNextQuest, questionIndex, userChallenge, userChoice])
+ }, [
+ questionIndex,
+ setIsCustomQuest,
+ setQuestionIndex,
+ setUserChoice,
+ setOpenModal,
+ userChallenge.quiz.questions.length,
+ ])
+
return (
<div className="quiz-container">
<div className="question-container">
@@ -127,13 +127,15 @@ const QuizQuestionContent: React.FC<QuizQuestionContent> = ({
{t('quiz.button_validate')}
</Button>
)}
- <QuizExplanationModal
- open={openModal}
- answerIndex={answerIndex}
- question={userChallenge.quiz.questions[questionIndex]}
- goNext={goNextQuestion}
- handleCloseClick={() => setOpenModal(false)}
- />
+ {openModal && (
+ <QuizExplanationModal
+ open={openModal}
+ answerIndex={answerIndex}
+ question={userChallenge.quiz.questions[questionIndex]}
+ goNext={goNextQuestion}
+ handleCloseClick={() => setOpenModal(false)}
+ />
+ )}
</div>
)
}
--
GitLab