import React, {useEffect, useState} from 'react' import {useNavigate} from "react-router-dom" import {useSelector, useDispatch} from 'react-redux' import { fetchGetAnswers, selectAnswer, selectedTest } from '../../../redux/quizSlice' import {Progressbar} from './ProgressbarQuiz' import {GetOptionTask} from './GetOptionTask' import {fetchUserAnswersMany, fetchUserAnswerOne} from './../../../redux/quizSlice' import './quiz.scss' import {useRequest} from "../../../hooks/useRequest"; export const TaskQuiz = () => { const navigate = useNavigate(); const dispatch = useDispatch(); const listAnswers = useSelector(selectAnswer); const dataTest = useSelector(selectedTest); const [index, setIndex] = useState(0); const [checkedValues, setCheckedValues] = useState([]); const [stripValue, setStripValue] = useState(0); const [inputValue, setInputValue] = useState(''); const [questions, setQuestions] = useState([]); const {apiRequest} = useRequest(); const id = localStorage.getItem('id'); useEffect(() => { apiRequest(`/question/get-questions?uuid=${dataTest.uuid}`) .then((response) => { setQuestions(response); dispatch(fetchGetAnswers(response[0].id)); setStripValue((+index + 1) * 100 / response.length) }) }, [dispatch]); const nextQuestion = async (e) => { e.preventDefault(); //Проверка на валидацию ответов if (checkedValues.length || inputValue) { switch (questions[index].question_type_id) { case '3': dispatch(fetchUserAnswersMany(checkedValues)); break; case '2': case '1': case '4': dispatch(fetchUserAnswerOne(checkedValues)); break; default: break; } //Проверка на существование следующего запроса if (index < questions.length - 1) { await dispatch(fetchGetAnswers(questions[index + 1].id)); setIndex(prev => prev >= questions.length - 1 ? prev : prev + 1); setStripValue((prev => prev + (100 / questions.length))); setCheckedValues([]); setInputValue('') } else { navigate(`/quiz-result`); alert("Тест пройден!") } } else { alert("Вы не ответили на вопрос") } }; const handleChange = (e) => { const checked = e.target.checked; switch (questions[index].question_type_id) { case '3': checked ? setCheckedValues(prev => [...prev, { user_id: id, user_questionnaire_uuid: dataTest.uuid, question_id: questions[index].id, response_body: e.target.value }]) : setCheckedValues(prev => [...prev.filter(item => item.response_body !== e.target.value)]); break; case '1': case '2': case '4': setCheckedValues([{ user_id: id, user_questionnaire_uuid: dataTest.uuid, question_id: questions[index].id, response_body: e.target.value }]) } }; return (
{!questions.length || !stripValue || !listAnswers.length ?

Loading....

:
{/* */}

{questions[index].question_body}

{ questions[index].question_type_id === 1 ? : listAnswers.map((answer) => ( )) }
{questions.length !== index + 1 && } {questions.length === index + 1 && }
}
) };