guild_front/src/components/features/quiz/Task.js

import React, { useEffect, useState } from 'react'
import { useNavigate } from "react-router-dom"
import { useSelector, useDispatch } from 'react-redux'
import questionIcon from "../../../images/question.png"
import { Progressbar } from './ProgressbarQuiz'
import { GetOptionTask } from './GetOptionTask'
import {
  fetchUserAnswersMany, fetchUserAnswerOne, fetchGetAnswers, answersSelector, selectedTest, questionsSelector, setAnswers, setCompleteTest
} from './../../../redux/quizSlice'

import './quiz.scss'
import { apiRequest } from "../../../api/request";
import { HeaderQuiz } from './HeaderQuiz'

export const TaskQuiz = () => {

  const navigate = useNavigate();
  const dispatch = useDispatch();

  const answers = useSelector(answersSelector);
  const questions = useSelector(questionsSelector);


  const dataTest = useSelector(selectedTest);
  const [index, setIndex] = useState(0);
  const [checkedValues, setCheckedValues] = useState([]);
  //const [stripValue, setStripValue] = useState(0);
  const [inputValue, setInputValue] = useState('');



  const id = localStorage.getItem('id');

  useEffect(() => {
    // fetch('https://itguild.info/api/user-questionnaire/questionnaires-list?user_id=110').then(response => response.json())
    // .then(json => console.log(json))
    apiRequest(`/question/get-questions?uuid=${dataTest.uuid}`)
        .then((response) => {
          console.log(response)
          dispatch(fetchGetAnswers(response[0].id));
          setStripValue((+index + 1) * 100 / response.length)
        })
  }, [dispatch]);

  const nextQuestion = async (e) => {
    e.preventDefault();
    //Проверка на валидацию ответов
    if (!(checkedValues.length || inputValue)) {
      alert("Вы не ответили на вопрос")
      return
    }

    //отправка ответов на сервер
    if (questions[index].question_type_id != 3) {
      //dispatch(fetchUserAnswerOne(checkedValues));
    } else {
      console.log(checkedValues);      
      // dispatch(fetchUserAnswersMany(checkedValues));
    }

    //Проверка на окончание теста
    if (!(index < questions.length - 1)) {
      dispatch(setCompleteTest())
      return
    }

    dispatch(fetchGetAnswers(questions[index + 1].id));
    setIndex(prev => prev + 1);
    setCheckedValues([]);
    setInputValue('')
  };


  const handleChange = (e) => {
    const checked = e.target.checked;

    if (questions[index].question_type_id != 3) {
      setCheckedValues([{
        user_id: id,
        user_questionnaire_uuid: dataTest.uuid,
        question_id: questions[index].id,
        response_body: e.target.value
      }])
      return
    }

    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)]);
  };


console.log('render task');


  return (
    <div className="task">
      {
        <div className="task__container">
          <div className='task__header'>
            <img src={questionIcon} alt="" />
            <h3 className="task__title quiz-title_h3">{questions[index].question_body}</h3>
          </div>

          <div className="task__body">
            <form className='task__form form-task' onSubmit={nextQuestion}>
              {

                answers.map((answer) => (
                  <GetOptionTask
                    key={answer.id}
                    type={questions[index].question_type_id}
                    handleChange={handleChange}
                    answer={answer}                   
                  />
                ))
              }
              <div className="form-task__buttons">
                {/* {
                  index != 0 && <button type='submit' className='form-task__btn quiz-btn quiz-btn_back'
                    onClick={prevQuestion}>Назад</button>
                } */}
                {
                  index != questions.length && <button onClick={nextQuestion}
                    className='form-task__btn quiz-btn'>Далее</button>
                }
              </div>

            </form>
          </div>
        </div>

      }
    </div>

  )
};