Переписываю спорные решения

src/components/features/quiz/HeaderQuiz.js

@@ -1,50 +1,46 @@
-import {useEffect} from 'react'
-import {useDispatch} from 'react-redux'
-import {useSelector} from 'react-redux'
-import {fetchGet} from '../../../server/server'
+import React, {useEffect} from 'react'
+import {useDispatch, useSelector} from 'react-redux'
+import {selectUserInfo, setQuestionnairesList, setUserInfo} from "../../../redux/quizSlice";
+import {useRequest} from "../../../hooks/useRequest";
 import './quiz.scss'
-import {selectUserInfo, setQuestionnairesList, setUserInfo,} from "../../../redux/quizSlice";
 
 export const HeaderQuiz = ({header}) => {
 
-   const dispatch = useDispatch()
-   const userId = localStorage.getItem('id');
-   const userInfo = useSelector(selectUserInfo);
+  const dispatch = useDispatch();
+  const userId = localStorage.getItem('id');
+  const userInfo = useSelector(selectUserInfo);
 
-   useEffect(() => {
-      dispatch(setUserInfo(userId))
-   }, [dispatch])
+  const {apiRequest} = useRequest();
 
-   useEffect(() => {
-      fetchGet({
-           link: `${process.env.REACT_APP_API_URL}/api/user-questionnaire/questionnaires-list?user_id=${userId}`,
-           Origin: `${process.env.REACT_APP_BASE_URL}`,
-        }
-      ).then(response => {
-         dispatch(setQuestionnairesList(response))
-      })
-   }, [dispatch])
+  useEffect(() => {
+    dispatch(setUserInfo(userId))
+  }, [dispatch]);
 
-   return (
-       <div>
-       { userInfo?.status === 500 ? <div className="error-msg">{userInfo.message}</div> :
-         <div className="header-quiz">
-            <div className="header-quiz__container">
-               {!userInfo ? <h2>Loading...</h2> :
-                 <>
-                    {header && <h2 className={'header-quiz__title-main'}>Добрый день, {userInfo.fio}</h2>}
-                    <div className="header-quiz__body header-quiz__body_interjacent">
-                       <div className="header-quiz__avatar">
+  useEffect(() => {
+    apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
+        .then(res => dispatch(setQuestionnairesList(res)))
+  }, [dispatch]);
+
+  return (
+      <div>
+        {userInfo?.status === 500 ? <div className="error-msg">{userInfo.message}</div> :
+            <div className="header-quiz">
+              <div className="header-quiz__container">
+                {!userInfo ? <h2>Loading...</h2> :
+                    <>
+                      {header && <h2 className={'header-quiz__title-main'}>Добрый день, {userInfo.fio}</h2>}
+                      <div className="header-quiz__body header-quiz__body_interjacent">
+                        <div className="header-quiz__avatar">
                           <img src={userInfo.photo} alt={userInfo.photo}/>
-                       </div>
-                       <div className="header-quiz__name-user">{userInfo.fio}</div>
-                       <div className="header-quiz__title">{userInfo.position_name}</div>
-                    </div>
-                 </>
-               }
+                        </div>
+                        <div className="header-quiz__name-user">{userInfo.fio}</div>
+                        <div className="header-quiz__title">{userInfo.position_name}</div>
+                      </div>
+                    </>
+                }
+              </div>
             </div>
-         </div>
-       }
-       </div>
-   )
-}
+        }
+      </div>
+  )
+};

src/components/features/quiz/Instructions.js

@@ -5,23 +5,26 @@ import './quiz.scss'
 import {useEffect, useState} from "react";
 import {useSelector} from "react-redux";
 import {selectedTest} from "../../../redux/quizSlice";
-import {fetchGet} from "../../../server/server";
+
+import {useRequest} from "../../../hooks/useRequest";
 
 export const Instruction = () => {
 
-   const [countQuestions, setCountQuestions] = useState(null)
-   const test = useSelector(selectedTest)
+   const [countQuestions, setCountQuestions] = useState(null);
+   const test = useSelector(selectedTest);
 
-   useEffect(async () => {
+  const {apiRequest} = useRequest();
 
-      const response = await fetchGet({
-           link: `${process.env.REACT_APP_API_URL}/api/user-questionnaire/get-question-number?user_questionnaire_uuid=${test.uuid}`,
-           Origin: `${process.env.REACT_APP_BASE_URL}`,
-        }
-      )
-      setCountQuestions(response.question_number)
+   useEffect( () => {
 
-   }, [])
+     apiRequest('/user-questionnaire/get-question-number', {
+           params: {user_questionnaire_uuid: test.uuid},
+
+         }
+     ).then((res)=> setCountQuestions(res.question_number))
+
+
+   }, []);
 
    return (
      <div className="instruction">
@@ -49,5 +52,5 @@ export const Instruction = () => {
         </div>
      </div>
    )
-}
+};
 

src/components/features/quiz/Results.js

@@ -1,37 +1,35 @@
 import React, {useEffect, useState} from 'react';
 import {useDispatch, useSelector} from "react-redux";
 import {fetchResultTest, selectedTest, selectResult} from "../../../redux/quizSlice";
-import {fetchGet} from "../../../server/server";
+import {useRequest} from "../../../hooks/useRequest";
 
 
 export const Results = () => {
-   const result = useSelector(selectResult);
-   const test = useSelector(selectedTest);
-   const [maxScore, setMaxScore] = useState('');
-   const dispatch = useDispatch();
+  const result = useSelector(selectResult);
+  const test = useSelector(selectedTest);
+  const [maxScore, setMaxScore] = useState('');
+  const dispatch = useDispatch();
+  const {apiRequest} = useRequest();
 
-   useEffect(async () => {
-      dispatch(fetchResultTest(test.uuid));
-      const response = await fetchGet({
-           link: `${process.env.REACT_APP_API_URL}/api/user-questionnaire/get-points-number?user_questionnaire_uuid=${test.uuid}`,
-           Origin: `${process.env.REACT_APP_BASE_URL}`,
-        }
-      );
-      setMaxScore(response.sum_point)
-   }, []);
+  useEffect(async () => {
+    dispatch(fetchResultTest(test.uuid));
+    apiRequest(`/user-questionnaire/get-points-number?user_questionnaire_uuid=${test.uuid}`)
+        .then((res) => setMaxScore(res.sum_point));
 
-   return (
-     <div className={'result _container'}>
+  }, []);
+
+  return (
+      <div className={'result _container'}>
         {
-           !result ? <h1 style={{display: "block"}}>Ожидайте результата...</h1> :
+          !result ? <h1 style={{display: "block"}}>Ожидайте результата...</h1> :
 
-             <div className="result__body">
+              <div className="result__body">
                 <div className="result__text">Благодарим за прохождение теста</div>
                 <div className="result__text">Ваш Результат: <span
-                  className="result__score">{result.score}</span> из {maxScore} </div>
-             </div>
+                    className="result__score">{result.score}</span> из {maxScore} </div>
+              </div>
         }
-     </div>
-   );
+      </div>
+  );
 };
 

src/components/features/quiz/Task.js

@@ -1,11 +1,11 @@
 import React, {useEffect, useState} from 'react'
-import { useNavigate} from "react-router-dom"
+import {useNavigate} from "react-router-dom"
 import {useSelector, useDispatch} from 'react-redux'
 
 import {
-   fetchGetAnswers,
-   selectAnswer,
-   selectedTest
+  fetchGetAnswers,
+  selectAnswer,
+  selectedTest
 } from '../../../redux/quizSlice'
 
 import {Progressbar} from './ProgressbarQuiz'
@@ -13,140 +13,141 @@ import {GetOptionTask} from './GetOptionTask'
 
 import {fetchUserAnswersMany, fetchUserAnswerOne} from './../../../redux/quizSlice'
 
-import {fetchGet} from "../../../server/server";
 
 import './quiz.scss'
+import {useRequest} from "../../../hooks/useRequest";
 
 export const TaskQuiz = () => {
 
-   const navigate = useNavigate();
-   const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
 
-   const listAnswers = useSelector(selectAnswer);
-   const dataTest = useSelector(selectedTest);
+  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 [index, setIndex] = useState(0);
+  const [checkedValues, setCheckedValues] = useState([]);
+  const [stripValue, setStripValue] = useState(0);
+  const [inputValue, setInputValue] = useState('');
+  const [questions, setQuestions] = useState([]);
 
-   const id = localStorage.getItem('id');
+  const {apiRequest} = useRequest();
 
-   useEffect( () => {
-      const response = fetchGet({
-           link: `${process.env.REACT_APP_API_URL}/api/question/get-questions?uuid=${dataTest.uuid}`,
-           Origin: `${process.env.REACT_APP_BASE_URL}`,
-        }
-      );
-      setQuestions(response);
-      dispatch(fetchGetAnswers(response[0].id));
-      setStripValue((+index + 1) * 100 / response.length)
-   }, [dispatch]);
+  const id = localStorage.getItem('id');
 
-   const nextQuestion = async (e) => {
-      e.preventDefault();
+  useEffect(() => {
+    apiRequest(`/question/get-questions?uuid=${dataTest.uuid}`)
+        .then((response) => {
+          setQuestions(response);
+          dispatch(fetchGetAnswers(response[0].id));
+          setStripValue((+index + 1) * 100 / response.length)
+        })
+  }, [dispatch]);
 
-      //Проверка на валидацию ответов
-      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;
-         }
+  const nextQuestion = async (e) => {
+    e.preventDefault();
 
-         //Проверка на существование следующего запроса
-         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;
+    //Проверка на валидацию ответов
+    if (checkedValues.length || inputValue) {
       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
-            }])
+        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 (
-     <React.StrictMode>
+  return (
+      <React.StrictMode>
         <Progressbar indexQuestion={index + 1} width={stripValue}/>
         <div className="task">
-           {!questions.length || !stripValue || !listAnswers.length ?
-             <h1 className={'_container'} style={{display: "block"}}>Loading....</h1>
-             :
-             <div className="task__container">
+          {!questions.length || !stripValue || !listAnswers.length ?
+              <h1 className={'_container'} style={{display: "block"}}>Loading....</h1>
+              :
+              <div className="task__container">
                 <div className="task__code code">
-                   {/* <CodeSnippetlighter /> */}
+                  {/* <CodeSnippetlighter /> */}
                 </div>
                 <h3 className="task__title quiz-title_h3">{questions[index].question_body}</h3>
                 <div className="task__body">
-                   <form className='task__form form-task'>
-                      {
-                         questions[index].question_type_id === 1 ?
-                           <GetOptionTask
-                             type={1}
-                             inputValue={checkedValues.length ? checkedValues[0].response_body : ''}
-                             handleChange={handleChange}
-                           />
-                           :
-                           listAnswers.map((answer) => (
-                             <GetOptionTask
-                               key={answer.id}
-                               type={questions[index].question_type_id}
-                               handleChange={handleChange}
-                               answer={answer}
-                             />
-                           ))
-                      }
-                      <div className="form-task__buttons">
-                         {questions.length !== index + 1 &&
-                         <button type='submit' className='quiz-btn'
-                                 onClick={(e) => nextQuestion(e)}>Далее</button>}
-                         {questions.length === index + 1 && <button onClick={(e) => nextQuestion(e)}
-                                                                    className='quiz-btn quiz-btn_dark-green'>Завершить</button>}
-                      </div>
-                   </form>
+                  <form className='task__form form-task'>
+                    {
+                      questions[index].question_type_id === 1 ?
+                          <GetOptionTask
+                              type={1}
+                              inputValue={checkedValues.length ? checkedValues[0].response_body : ''}
+                              handleChange={handleChange}
+                          />
+                          :
+                          listAnswers.map((answer) => (
+                              <GetOptionTask
+                                  key={answer.id}
+                                  type={questions[index].question_type_id}
+                                  handleChange={handleChange}
+                                  answer={answer}
+                              />
+                          ))
+                    }
+                    <div className="form-task__buttons">
+                      {questions.length !== index + 1 &&
+                      <button type='submit' className='quiz-btn'
+                              onClick={(e) => nextQuestion(e)}>Далее</button>}
+                      {questions.length === index + 1 &&
+                      <button onClick={(e) => nextQuestion(e)}
+                              className='quiz-btn quiz-btn_dark-green'>Завершить</button>}
+                    </div>
+                  </form>
                 </div>
-             </div>
-           }
+              </div>
+          }
         </div>
-     </React.StrictMode>
-   )
+      </React.StrictMode>
+  )
 };