добавляет отправку запроса на открытый вопрос

codEnjoyer · Dec 18, 2023 · 32e48da · 32e48da
1 parent 800d84f
commit 32e48da
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 21 deletions.
diff --git a/frontend/src/components/authentication/AuthForm.tsx b/frontend/src/components/authentication/AuthForm.tsx
@@ -2,6 +2,7 @@ import React, {useCallback, useState} from 'react';
 
 import CustomInput from "../../UIComponents/customInput/CustomInput";
 import CustomCheckbox from "../../UIComponents/customCheckbox/CustomCheckbox";
+import CustomButton from "../../UIComponents/customButton/CustomButton.tsx";
 
 import {useNavigate} from "react-router-dom"
 import {useForm} from "react-hook-form";
@@ -10,8 +11,8 @@ import {observer} from "mobx-react-lite";
 
 import authStore from "../../store/authStore";
 import auth from "../../utils/auth";
+
 import Starfield from "react-starfield";
-import CustomButton from "../../UIComponents/customButton/CustomButton.tsx";
 
 export type FormValues = {
     login: string,

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx
@@ -10,13 +10,14 @@ import HeaderModal from "../../../../UIComponents/modalWindow/HeaderModal.tsx";
 import MenuItem from "./MenuItem.tsx";
 import TaskOpenQuestionEditor from "./TaskOpenQuestionEditor.tsx";
 
-import {IAnswerType, ITaskType, ITheoryUnitType} from "../../../../types/TaskType.ts";
+import {ITaskType, ITheoryUnitType} from "../../../../types/TaskType.ts";
 import {IMenuItemType} from "../../../../types/MenuItemType.ts";
 import {ILevelType} from "../../../../types/LevelType.ts";
 import mapMenuStore from "../../../../store/mapMenuStore.ts";
 import moduleMenuStore from "../../../../store/moduleMenuStore.ts";
-import levelStore from "../../../../store/levelStore.ts";
 import axios from "axios";
+import SingleChoice from "./QuestionTypes/SingleChoice.tsx";
+import {useForm} from "react-hook-form";
 
 
 interface IModalLevelProps {
@@ -27,6 +28,8 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({level}) => {
     const bodyHeader = renderBodyHeader()
     const [levelIndex, setLevelIndex] = useState(1)
     const [textOpenQuestion, setTextOpenQuestion] = useState("")
+    const {register, handleSubmit} = useForm()
+
 
     const menuItems: IMenuItemType[] = [
         {
@@ -97,7 +100,10 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({level}) => {
     const renderTest = (unit: ITaskType | null) => {
         return (
             <div className="task-info">
-                <form className="level-body">
+                <form
+                    className="level-body"
+                    onSubmit={handleSubmit((data) => onHandleSubmit(data))}
+                >
                     {unit
                         ? unit.questions.map((question) => {
                             switch (question.type) {
@@ -107,12 +113,7 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({level}) => {
                                             <div className="question-title">{question.question}</div>
 
                                             {question.answer_options.map((answer) => {
-                                                    return (
-                                                        <div className="question-answer-option" key={answer.id}>
-                                                            <input id={answer.answer} type="radio" value="question"/>
-                                                            <label htmlFor={answer.answer}>{answer.answer}</label>
-                                                        </div>
-                                                    )
+                                                    return <SingleChoice answer={answer} register={register}/>
                                                 }
                                             )}
                                         </div>
@@ -126,7 +127,8 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({level}) => {
                                             {question.answer_options.map((answer) => {
                                                     return (
                                                         <div className="question-answer-option" key={answer.id}>
-                                                            <input id={answer.answer} type="radio" value="question"/>
+                                                            <input id={answer.answer} type="checkbox"
+                                                                   value="question" {...register(answer.answer)}/>
                                                             <label htmlFor={answer.answer}>{answer.answer}</label>
                                                         </div>
                                                     )
@@ -151,23 +153,45 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({level}) => {
                         : null
                     }
                     <CustomButton
-                        handleOnClick={handleOnClickSendData}
+                        type="submit"
                         text="Отправить ответ"
                     />
                 </form>
             </div>
         )
     }
 
-    const handleOnClickSendData = useCallback((e: Event) => {
-        e.preventDefault();
-        const openQuestionAnswer: IAnswerType = {}
-        axios.post("http://localhost:8000" +
-            " /maps/" + mapMenuStore.choosedMap?.id +
-            "/modules/" + moduleMenuStore.choosedModule?.id +
-            "/levels/" + level.id +
-            "/tasks/" + level.task_units[0].id +
-            "/check/", {}).then(r =>)
+    const onHandleSubmit = useCallback((data: any) => {
+        console.log(data)
+        if (level.task_units) {
+            if (textOpenQuestion !== "") {
+                axios.post("http://localhost:8000" +
+                    " /maps/" + mapMenuStore.choosedMap?.id +
+                    "/modules/" + moduleMenuStore.choosedModule?.id +
+                    "/levels/" + level.id +
+                    "/tasks/" + level.task_units[0].id +
+                    "/check/", {
+                    type: "open",
+                    question: level.task_units[0].questions[0],
+                    id: level.task_units[0].id,
+                    answers: [
+                        {
+                            answer: textOpenQuestion,
+                            id: level.task_units[0].questions[0].answer_options[0].id,
+                        }
+                    ]
+                })
+                    .then(r => console.log(r))
+            } else {
+                axios.post("http://localhost:8000" +
+                    " /maps/" + mapMenuStore.choosedMap?.id +
+                    "/modules/" + moduleMenuStore.choosedModule?.id +
+                    "/levels/" + level.id +
+                    "/tasks/" + level.task_units[0].id +
+                    "/check/", {})
+                    .then(r => console.log(r))
+            }
+        }
     }, [])
 
 

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/QuestionTypes/SingleChoice.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/QuestionTypes/SingleChoice.tsx
@@ -0,0 +1,32 @@
+import React, {useCallback, useState} from 'react';
+import {IAnswerType} from "../../../../../types/TaskType.ts";
+import {UseFormRegister} from "react-hook-form";
+
+interface IPropTypes {
+    answer: IAnswerType,
+    register: UseFormRegister<any>
+}
+
+const SingleChoice: React.FC<IPropTypes> = ({answer, register}) => {
+    const [isChecked, setCheck] = useState<boolean>(false)
+
+    const handleOnCheck = useCallback(() => {
+        setCheck(!isChecked)
+    }, [isChecked])
+
+    return (
+        <div className="question-answer-option" key={answer.id}>
+            <input
+                id={answer.answer}
+                type="radio"
+                value="question"
+                checked={isChecked}
+                onClick={handleOnCheck}
+                {...register(answer.answer)}
+            />
+            <label htmlFor={answer.answer}>{answer.answer}</label>
+        </div>
+    )
+};
+
+export default SingleChoice;