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

src/components/features/bookkeeping/ActContent/ActContent.js

@@ -1,102 +1,101 @@
-import React, { useEffect, useState } from 'react';
-import { ContentTitle } from "../ContentTitle/ContentTitle"
-import { ContentButton } from "../ContentButton/ContentButton"
-import { BookkeepingFormField } from "../BookkeepingFormField/BookkeepingFormField"
-import { BookkepingSelect } from '../BookkepingSelect/BookkepingSelect';
-import { BookkepingInput } from '../BookkepingInput/BookkepingInput';
-import { fetchGet } from '../../../../server/server'
-import { Link } from "react-router-dom"
+import React, {useEffect, useState} from 'react';
+import {Link} from "react-router-dom"
+import {ContentTitle} from "../ContentTitle/ContentTitle"
+import {ContentButton} from "../ContentButton/ContentButton"
+import {BookkeepingFormField} from "../BookkeepingFormField/BookkeepingFormField"
+import {BookkepingSelect} from '../BookkepingSelect/BookkepingSelect';
+import {BookkepingInput} from '../BookkepingInput/BookkepingInput';
+
+import {useRequest} from "../../../../hooks/useRequest";
+
 import "./actContent.css"
 
-export const ActContent = ()=> {
-     
-    const [templates, setTemplates] = useState([])
-    const [selectedTemplate, setSelectedTemplate] = useState()
-    const [templatedFields, setTemplatedFields] = useState([])
+export const ActContent = () => {
 
-    useEffect(() => {
-        fetchGet({
-          link: `${process.env.REACT_APP_API_URL}/api/template/get-template-list`,
-        }).then((res) => {
-            setTemplates(res)
-        })
-      }, [])
+  const [templates, setTemplates] = useState([]);
+  const [selectedTemplate, setSelectedTemplate] = useState();
+  const [templatedFields, setTemplatedFields] = useState([]);
 
-      useEffect(() => {
-        if (selectedTemplate === undefined) {
-            return
-        }
-        fetchGet({
-            link: `${process.env.REACT_APP_API_URL}/api/template/get-template-fields?template_id=${selectedTemplate}`,
-          })
-          .then((res) => {
-            setTemplatedFields(res[0].templateDocumentFields)
-          })
-      }, [selectedTemplate])
+  const {apiRequest} = useRequest();
+
+  useEffect(() => {
+    apiRequest('/template/get-template-list')
+        .then(res => setTemplates(res))
+  }, []);
+
+  useEffect(() => {
+    if (selectedTemplate === undefined) {
+      return
+    }
+    apiRequest(`/template/get-template-fields?template_id=${selectedTemplate}`)
+        .then(res => setTemplatedFields(res[0].templateDocumentFields))
+  }, [selectedTemplate]);
 
 
-      
+  return (
+      <div>
+        <div className="content__info">
+          <ContentTitle title="Создание акта" description="# Описание"/>
+          <div className="content__info-main">
+            <form className='contract'>
+              <div className="contract__create">
+                <div className="contract__title">Создание акта №</div>
+                <input type="text" className="contract__number" placeholder="#"/>
+                <span>от</span>
+                <input type="date" className="contract__date"/>
+              </div>
 
-    return(
-        <div>
-            <div className="content__info">
-            <ContentTitle title="Создание акта" description="# Описание" />
-            <div className="content__info-main">
-                <form className='contract'>
-                    <div className="contract__create">
-                        <div className="contract__title">Создание акта №</div>
-                        <input type="text" className="contract__number" placeholder="#" />
-                        <span>от</span>
-                        <input type="date" className="contract__date" />
-                    </div>
+              <BookkeepingFormField
+                  title="Шаблон документа"
+                  Component={BookkepingSelect}
+                  innerComponentProps={{
+                    onSelect: setSelectedTemplate,
+                    textField: "title",
+                    options: templates,
+                    defaultIndexSelected: 0,
+                  }}
+                  action={{
+                    text: "Добавить свой шаблон",
+                    method: () => {
+                    }
+                  }}
+              />
 
-                    <BookkeepingFormField title="Шаблон документа"
-                        Component={BookkepingSelect} 
-                        innerComponentProps={{
-                            onSelect: setSelectedTemplate,
-                            textField: "title",
-                            options: templates,
-                            defaultIndexSelected: 0,
-                        }}
-                        action={{
-                            text: "Добавить свой шаблон",
-                            method: () => {}
-                        }}
-                    />
-                    
-                        {templatedFields.map((field, index ) => 
-                            <BookkeepingFormField title={field.field.title} key={index}
-                            Component={BookkepingInput}
-                            innerComponentProps={{
-                                placeholder: "Введите данные",
-                            }}
-                        />
-                        )}
+              {templatedFields.map((field, index) =>
+                  <BookkeepingFormField
+                      title={field.field.title} key={index}
+                      Component={BookkepingInput}
+                      innerComponentProps={{
+                        placeholder: "Введите данные",
+                      }}
+                  />
+              )}
 
-                    
 
-                    <div className="content__btn-list">
-                        <ContentButton styles={{ width: "290px",
-                        height: "75px",
-                        boxShadow: "6px 5px 20px rgba(182, 75, 62, 0.21)",
-                        borderRadius: "38px",
-                        backgroundColor: "#b64b3e",
-                        border: "none",
-                        color: "#ffffff",
-                        }}>Сохранить</ContentButton>
-                        <Link to="/documents" className="link-act-button">
-                            <div className='act-Button'>
-                                <ContentButton styles={{color: "#282828",
-                                marginLeft: "40px",
-                                background: "none",
-                                border: "none"
-                                }}>Отменить</ContentButton>
-                            </div>
-                        </Link>
-                    </div>
-                </form>
-            </div>
+              <div className="content__btn-list">
+                <ContentButton styles={{
+                  width: "290px",
+                  height: "75px",
+                  boxShadow: "6px 5px 20px rgba(182, 75, 62, 0.21)",
+                  borderRadius: "38px",
+                  backgroundColor: "#b64b3e",
+                  border: "none",
+                  color: "#ffffff",
+                }}>Сохранить</ContentButton>
+                <Link to="/documents" className="link-act-button">
+                  <div className='act-Button'>
+                    <ContentButton styles={{
+                      color: "#282828",
+                      marginLeft: "40px",
+                      background: "none",
+                      border: "none"
+                    }}>Отменить</ContentButton>
+                  </div>
+                </Link>
+              </div>
+            </form>
+          </div>
         </div>
-        </div>
-    )
-}
+      </div>
+  )
+};

src/components/features/bookkeeping/ContractContent/ContractContent.js

@@ -1,97 +1,98 @@
-import React, { useEffect, useState } from "react";
-import { ContentTitle } from "../ContentTitle/ContentTitle"
-import { ContentButton } from "../ContentButton/ContentButton"
-import { BookkeepingFormField } from "../BookkeepingFormField/BookkeepingFormField"
-import { BookkepingSelect } from '../BookkepingSelect/BookkepingSelect';
-import { BookkepingInput } from '../BookkepingInput/BookkepingInput';
-import { fetchGet } from '../../../../server/server'
-import { Link } from "react-router-dom"
+import React, {useEffect, useState} from "react";
+import {ContentTitle} from "../ContentTitle/ContentTitle"
+import {ContentButton} from "../ContentButton/ContentButton"
+import {BookkeepingFormField} from "../BookkeepingFormField/BookkeepingFormField"
+import {BookkepingSelect} from '../BookkepingSelect/BookkepingSelect';
+import {BookkepingInput} from '../BookkepingInput/BookkepingInput';
+import {Link} from "react-router-dom"
+import {useRequest} from "../../../../hooks/useRequest";
 
 export const ContractContent = () => {
 
-    const [templates, setTemplates] = useState([])
-    const [selectedTemplate, setSelectedTemplate] = useState()
-    const [templatedFields, setTemplatedFields] = useState([])
-    
-    useEffect(() => {
-        fetchGet({
-          link: `${process.env.REACT_APP_API_URL}/api/document/get-document-list`,
-        }).then((res) => {
-            setTemplates(res)
-        })
-      }, [])
+  const [templates, setTemplates] = useState([]);
+  const [selectedTemplate, setSelectedTemplate] = useState();
+  const [templatedFields, setTemplatedFields] = useState([]);
 
-      useEffect(() => {
-        if (selectedTemplate === undefined) {
-            return
-        }
-        fetchGet({
-            link: `${process.env.REACT_APP_API_URL}/api/document/get-document?document_id=${selectedTemplate}`,
-          })
-          .then((res) => {
-            setTemplatedFields(res[0].templateDocumentFields)
-          })
-      }, [selectedTemplate])
+  const {apiRequest} = useRequest();
 
-    return (
-        <div>
-            <div className="content__info">
-            <ContentTitle  title="Создание договора" description="# Описание" />
-            <div className="content__info-main">
-                
+  useEffect(() => {
+    apiRequest(`/document/get-document-list`)
+        .then(res => setTemplates(res))
+  }, []);
 
-                <form className='contract'>
-                    <div className="contract__create">
-                        <div className="contract__title">Создание договора №</div>
-                        <input type="text" className="contract__number" placeholder="#" />
-                        <span>от</span>
-                        <input type="date" className="contract__date" />
-                    </div>
-                    <BookkeepingFormField title="Шаблон документа"
-                        Component={BookkepingSelect} 
-                        innerComponentProps={{
-                            onSelect: setSelectedTemplate,
-                            textField: "title",
-                            options: templates,
-                            defaultIndexSelected: 0,
-                        }}
-                        action={{
-                            text: "Добавить свой шаблон",
-                            method: () => {}
-                        }}
-                    />
-                    
-                    {templatedFields.map((field, index ) => 
-                            <BookkeepingFormField title={field.field.title} key={index}
-                            Component={BookkepingInput}
-                            innerComponentProps={{
-                                placeholder: "Введите данные",
-                            }}
-                        />
-                        )}
+  useEffect(() => {
+    if (selectedTemplate === undefined) {
+      return
+    }
+    apiRequest(`/document/get-document?document_id=${selectedTemplate}`)
+        .then(res => setTemplatedFields(res[0].templateDocumentFields)
+        )
+  }, [selectedTemplate]);
 
-                    <div className="content__btn-list">
-                        <ContentButton styles={{ width: "290px",
-                        height: "75px",
-                        boxShadow: "6px 5px 20px rgba(182, 75, 62, 0.21)",
-                        borderRadius: "38px",
-                        backgroundColor: "#b64b3e",
-                        border: "none",
-                        color: "#ffffff",
-                        }}>Сохранить</ContentButton>
-                        <Link to="/documents" className="link-act-button">
-                            <div className='act-Button'>
-                                <ContentButton styles={{color: "#282828",
-                                marginLeft: "40px",
-                                background: "none",
-                                border: "none"
-                                }}>Отменить</ContentButton>
-                            </div>
-                        </Link>
-                    </div>
-                </form>
-            </div>
+  return (
+      <div>
+        <div className="content__info">
+          <ContentTitle title="Создание договора" description="# Описание"/>
+          <div className="content__info-main">
+
+
+            <form className='contract'>
+              <div className="contract__create">
+                <div className="contract__title">Создание договора №</div>
+                <input type="text" className="contract__number" placeholder="#"/>
+                <span>от</span>
+                <input type="date" className="contract__date"/>
+              </div>
+              <BookkeepingFormField
+                  title="Шаблон документа"
+                  Component={BookkepingSelect}
+                  innerComponentProps={{
+                    onSelect: setSelectedTemplate,
+                    textField: "title",
+                    options: templates,
+                    defaultIndexSelected: 0,
+                  }}
+                  action={{
+                    text: "Добавить свой шаблон",
+                    method: () => {
+                    }
+                  }}
+              />
+
+              {templatedFields.map((field, index) =>
+                  <BookkeepingFormField
+                      title={field.field.title} key={index}
+                      Component={BookkepingInput}
+                      innerComponentProps={{
+                        placeholder: "Введите данные",
+                      }}
+                  />
+              )}
+
+              <div className="content__btn-list">
+                <ContentButton styles={{
+                  width: "290px",
+                  height: "75px",
+                  boxShadow: "6px 5px 20px rgba(182, 75, 62, 0.21)",
+                  borderRadius: "38px",
+                  backgroundColor: "#b64b3e",
+                  border: "none",
+                  color: "#ffffff",
+                }}>Сохранить</ContentButton>
+                <Link to="/documents" className="link-act-button">
+                  <div className='act-Button'>
+                    <ContentButton styles={{
+                      color: "#282828",
+                      marginLeft: "40px",
+                      background: "none",
+                      border: "none"
+                    }}>Отменить</ContentButton>
+                  </div>
+                </Link>
+              </div>
+            </form>
+          </div>
         </div>
-        </div>
-    )
-} 
+      </div>
+  )
+};

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