Separated Views For Adding Questions And Questionnaires

Also Fixed AnswerSheets For Now, Big Bugs!

src/components/AnswerSheet/index.js

@@ -1,29 +1,42 @@
 import React, { useEffect, useState } from "react";
 
-const AnswerSheet = ({questionsQuantity, optionsQuantity }) => {
+const AnswerSheet = ({ questionsQuantity, optionsQuantity, selectedCourseId, passAnswers }) => {
     const [data, setData] = useState([]);
     const [options, setOptions] = useState([]);
+    const [success, setSuccess] = useState(selectedCourseId);
     useEffect(() => {
         let array = [];
         let optionsArray = [];
-        for(var i =1; i <=  questionsQuantity; i++){
+        for (var i = 1; i <= questionsQuantity; i++) {
             array.push({
-                questionId : i,
+                questionId: i,
                 answer: null,
+                courseId: selectedCourseId
             });
         }
-        for(var i =1; i<= optionsQuantity; i++){
+        for (var i = 1; i <= optionsQuantity; i++) {
             optionsArray.push({
                 id: i,
                 active: false,
             })
         }
+
         setOptions(optionsArray);
         setData(array)
-         console.log(data, options)
+        passAnswers(data)
-    }, [questionsQuantity])
+
+        //  console.log(data, options)
+    }, [selectedCourseId])
+    console.log(selectedCourseId)
+
+    return (success == selectedCourseId && success !== undefined? 
+        
+        <div className="w-full flex justify-center">
+            <button className="bg-green-600 text-white p-4 mt-40 rounded-md font-bold">ویرایش پاسخ ها</button>
+        </div> 
+        
+        :
 
-    return(
         <div className="w-full flex flex-col border border-gray-200 rounded-xl bg-white">
             {
                 data.map((item, index) => (
@@ -32,37 +45,48 @@ const AnswerSheet = ({questionsQuantity, optionsQuantity }) => {
                             {item.questionId}
                         </p>
                         <form className="flex w-full h-full px-8 items-center justify-between border-l border-gray-200">
-                        
-                        {
-                            options.map(
-                                (option) => (
-                                    
-                                    <p type='radio' value={option.id}  className={`w-8 h-6 rounded-full  border border-gray-400 cursor-pointer ${option.id == item.answer ? 'bg-green-500' : 'bg-white'}`} onClick={() => {
-                                        var newArray = [...data];
 
-                                        newArray[index].answer = option.id;
+                            {
+                                options.map(
+                                    (option) => (
+
+                                        <p type='radio' value={option.id} className={`w-8 h-6 rounded-full  border border-gray-400 cursor-pointer ${option.id == item.answer ? 'bg-green-500' : 'bg-white'}`}
+                                            onClick={() => {
+                                                var newArray = [...data];
+
+                                                newArray[index].answer = option.id;
+
+                                                setData(newArray)
+                                                // console.log(data)
+
 
-                                        setData(newArray)
+                                            }} >
-                                        console.log(data)
-                                    }} >
 
                                         </p>
-                                        
+
-                                    
+
+                                    )
                                 )
-                            )
+                            }
-                        }
-                        
-    </form>
 
+                        </form>
 
-    <div className="w-32 ">
-        نمره : ۱
-        </div>
 
+                        <div className="w-32 ">
+                            نمره : ۱
                         </div>
+
+                    </div>
                 ))
             }
+
+        {data.length > 0 &&
+         <div className="w-full flex justify-center">
+            <button className="my-2 py-2 px-4 rounded-md text-white bg-green-500 w-1/4"
+                onClick={() => {passAnswers(data); setSuccess(selectedCourseId);}}
+
+            >تایید پاسخ ها</button>
+        </div>}
         </div>
     )
 }

src/redux/reducers/exam.js

@@ -1,3 +1,5 @@
+import { IoReturnUpBack } from "react-icons/io5"
+
 const initialState = {
     grade: 8,
     groupId: 0,
@@ -27,21 +29,20 @@ const initialState = {
             questionnaireId: 1,
             questionsQuantity:20,
             name: 'دینی',
+            coefficient: 4
         },
         {
             id: 1,
             questionnaireId: 2,
             questionsQuantity:20,
             name: 'ریاضی',
+            coefficient: 4,
         },
 
     ],
 
     answers: [
-        {
+        
-            questionId: 1,
-            answer: 2,
-        }
     ]
 }
 
@@ -81,6 +82,21 @@ export default function addExamReduser(state = initialState, { type, payload })
                 ...state,
                 questionnaires: [...state.questionnaires, payload]
             }
+        case 'ADD_QUESTIONNAIRE_COURSES' :
+            return {
+                ...state,
+                questionairesCourses: [
+                    ...state.questionairesCourses,
+                    payload
+                ]
+            }    
+        case 'ADD_ANSWERS':
+            return{
+                ...state, 
+                answers: [
+                    ...state.answers, payload
+                ]
+            }    
 
         default:
             return state;

src/view/addExam/components/addQuestionnaireCourse.js

@@ -0,0 +1,54 @@
+import React from "react";
+
+const AddQuestionnaireCourse = ({submitOnClick, nameOnChange, questionQuantityOnChange, coefficientOnChange, closeOnClick}) => {
+    return(
+<div className="w-full z-10 fixed h-screen backdrop-blur flex items-center -mt-10 justify-center">
+                    <div className="w-1/2 bg-white rounded-xl flex flex-col shadow-lg p-6">
+                        <div className="w-full">
+                            <div className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52" onClick={closeOnClick}>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
+                                    <g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
+                                        <g id="card-remove" transform="translate(253.309 512.31)">
+                                            <path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
+                                            <path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
+                                        </g>
+                                    </g>
+                                </svg>
+                            </div>
+                        </div>
+                        <h1 className="w-full text-right text-lg text-red52 font-bold pt-4">
+                            افزودن درس
+                        </h1>
+                        <div className="w-full flex items-center flex-col  mt-6 px-2 ">
+                            <div className="flex justify-between w-full">
+                                <input type='text' placeholder="نام درس..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none" 
+                                onChange={nameOnChange} 
+                                />
+                                <input type='number' placeholder="تعداد سوال..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none" 
+                                onChange={questionQuantityOnChange} 
+                                />
+                                <input type='number' placeholder="ضریب ..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none" 
+                                onChange={coefficientOnChange} 
+                                />
+                                <input type='number' placeholder="تعداد گزینه" className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none" 
+                                // onChange={} 
+                                />
+                                
+                            </div>
+                            <div className="flex w-full justify-end pt-4">
+                                <button className="px-6 py-2 rounded-md bg-red52 text-white font-bold"
+                                onClick={submitOnClick}
+                                >
+                                        تایید
+                                </button>
+                            </div>
+
+                           
+
+                        </div>
+                    </div>
+                </div>
+    )
+}
+
+export default AddQuestionnaireCourse;

src/view/addExam/index.js

@@ -51,7 +51,7 @@ const AddExam = () => {
          backStep={() => backStep()}
          />,
         <AddQuestions 
-        stepClick={() => {setStep(2); setActiveStep([true, true, true, false, false, false])}} 
+        stepClick={() => {setStep(3); setActiveStep([true, true, true, true, false, false])}} 
         backStep={() => backStep()}
         />,
         '',

src/view/addExam/views/AddQuestionsFromBank.js

@@ -0,0 +1,277 @@
+
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import AnswerSheet from "../../../components/AnswerSheet";
+import Button from "../../../components/Button";
+import DatePicker from "../../../components/Calendar/CalendarComponents/DatePicker";
+import Checkbox from "../../../components/Checkbox";
+import RangeDatePicker from "../../../components/RangeDatePicker";
+import SelectedCourse from "../../../components/selectedCourse";
+import AddQuestionnaireCourse from "../components/addQuestionnaireCourse";
+
+const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
+    const [name, setName] = useState(null);
+    const [type, setType] = useState(null);
+    const [description, setDescription] = useState(null);
+    const [questionarePopUp, setQuestionairePopUp] = useState(false);
+    const [addCoursePopup, setAddCoursePopup] = useState(false);
+    const [newQuestionaire, setNewQuestionaire] = useState({
+        id: addExamState.questionnaires.length + 1,
+        name: '',
+        fileUrl: '',
+    });
+    const [showCoursesInList, setShowCoursesInList] = useState([]);
+    const [choosedQuestionaries, seChoosedQuestionaries] = useState([]);
+    const [selectedQuestionare, setSelectedQuestionare] = useState({
+        id: null, 
+        courses: []
+    });
+    const [answers, setAnswers] = useState(null);
+    const [newCourse, setNewCourse] = useState({
+        id: addExamState.questionairesCourses.length + 1,
+        questionnaireId: selectedQuestionare.id,
+        questionsQuantity:20,
+        name: '',
+        coefficient: 4
+    })
+    const [selectedCourse, setSelectedCourse] = useState({
+        sortId: 1,
+        title: 'ادبیات فارسی',
+        coefficient: 3,
+        questionStart: 1,
+        questionEnd: 0,
+
+    })
+    // console.log(choosedQuestionaries)
+    // console.log(newQuestionaire)
+    // console.log(addExamState.questionnaires)
+    console.log(newCourse)
+    console.log(addExamState.questionairesCourses)
+    console.log(selectedCourse)
+    console.log(answers)
+ 
+    const [fakeState, setFakeState] = useState(2);
+
+
+    useEffect(() => {
+        // questoinaresLists.map(item => showCoursesInList.push(false));
+        if(answers !== null && answers !== []) {
+        answers.map(item => dispatch({type: 'ADD_ANSWERS', payload : item}))
+        }
+        
+    }, [answers])
+
+    const payload = { name: name, description: description, type: type };
+
+    
+
+    return (
+        <>
+            {
+                questionarePopUp && <div className="w-full z-10 fixed h-screen backdrop-blur flex items-center -mt-10 justify-center">
+                    <div className="w-1/2 bg-white rounded-xl flex flex-col shadow-lg p-6">
+                        <div className="w-full">
+                            <div className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52" onClick={() => setQuestionairePopUp(false)}>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
+                                    <g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
+                                        <g id="card-remove" transform="translate(253.309 512.31)">
+                                            <path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
+                                            <path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
+                                        </g>
+                                    </g>
+                                </svg>
+                            </div>
+                        </div>
+                        <h1 className="w-full text-right text-lg text-red52 font-bold pt-4">
+                            افزودن دفترچه
+                        </h1>
+                        <div className="w-full flex items-center flex-col  mt-6 px-2 ">
+                            <div className="flex justify-between w-full">
+                                <input type='text' placeholder="نام دفترچه..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none" 
+                                onChange={e => setNewQuestionaire({...newQuestionaire, name: e.target.value})} />
+                                <input type="file" placeholder="آپلود فایل دفترچه" className="bg-white items-center flex h-12 text-red26 outline-none"
+                                />
+                            </div>
+                            <div className="flex w-full justify-end pt-2">
+                                <button className="px-6 py-2 rounded-md bg-red52 text-white font-bold"
+                                onClick={() => {dispatch({type: 'ADD_EXAM_QUESTIONAIRES', payload: newQuestionaire}); setQuestionairePopUp(false) }}
+                                >
+                                        تایید
+                                </button>
+                            </div>
+
+                            {/* {
+                                questoinaresLists.map(
+                                    (item, index) => (
+                                        <>
+                                            <div className="w-full flex items-center py-2 justify-between border-b pl-8 border-gray-300">
+                                                <Checkbox name={`PICK_QUESTIONARE_${index}`}
+                                                    onChange={(e) => 
+                                                         e.target.checked ? 
+                                                            seChoosedQuestionaries([...choosedQuestionaries, item])
+                                                        : 
+                                                        
+
+                                                        seChoosedQuestionaries(choosedQuestionaries.filter(itm => itm.id !== item.id))
+
+
+                                                    }
+
+                                                />
+                                                <h2 className="text-red26 font-bold">{item.title}</h2>
+                                                <h4>تعداد سوالات: {item.numberOfQuestions}</h4>
+                                                <p>تعداد دروس: {item.courses.length}</p>
+                                                <p className="cursor-pointer" onClick={() => {
+                                                    let newArray = [...showCoursesInList];
+                                                    
+                                                    newArray[index] = !newArray[index];
+
+
+                                                    setShowCoursesInList(newArray)
+
+                                                }}>نمایش دروس</p>
+
+                                            </div>
+                                            {
+                                                showCoursesInList[index] && <div className="w-full flex flex-col">
+                                                    {
+                                                        item.courses.map((course) => (
+                                                            <div className="w-full flex items-center text-right px-8 py-1 border-b border-gray-100" key={`COURSE_IN_LIST__${course.sortId}`}>
+                                                                <p className="w-1/3">
+                                                                    {course.title}
+                                                                </p>
+                                                                <p className="w-1/3">
+                                                                    ضریب : {course.coefficient}
+                                                                </p>
+                                                                <p
+                                                                    className="w-1/3"
+                                                                >از سوال {course.questionStart} تا سوال {course.questionEnd}</p>
+                                                            </div>
+                                                        ))
+                                                    }
+                                                </div>
+                                            }
+                                        </>
+                                    )
+                                )
+                            } */}
+
+                        </div>
+                    </div>
+                </div>
+            }
+            {
+                addCoursePopup && 
+                <AddQuestionnaireCourse
+                  closeOnClick={() => setAddCoursePopup(false)}
+                  nameOnChange={e => setNewCourse({...newCourse, name: e.target.value})}
+                  coefficientOnChange={e => setNewCourse({...newCourse, coefficient: e.target.vlaue})}
+                  questionQuantityOnChange={e => setNewCourse({...newCourse, questionsQuantity: e.target.value, questionnaireId: selectedQuestionare.id})}
+                  submitOnClick={() => {dispatch({type: 'ADD_QUESTIONNAIRE_COURSES', payload : newCourse}); setAddCoursePopup(false); setFakeState(fakeState + 356)} }
+                  />
+
+               
+            }
+            <div className="flex py-10 items-start px-10 border-b border-gray-300">
+                <div className="flex flex-col w-1/6">
+                    <div className="text-blue3A text-lg font-bold  text-right px-4  border-r-4 border-blue65">
+                        تنظیمات آزمون
+
+                    </div>
+                    <p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p>
+                </div>
+                <div className="w-5/6 flex flex-row">
+
+                    {
+                        addExamState.questionnaires.map(
+                            (item => (
+                                <div className={`flex flex-col ${selectedQuestionare.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'}  items-center justify-center w-36 h-32 mx-2 font-bold  rounded-xl cursor-pointer`}
+                                 onClick={() => setSelectedQuestionare({id : item.id,name: item.name, courses: addExamState.questionairesCourses.filter(itm => itm.questionnaireId == item.id)})}
+                                 >
+                        
+                        <p className="text-red52">
+                           دفترچه {item.name}
+                        </p>
+                    </div>
+                            ))
+                        )
+                    }
+
+                    <div className="flex flex-col bg-white items-center justify-center w-36 h-32 mx-2 font-bold border border-gray-300 text-blue3A rounded-xl cursor-pointer" onClick={() => addExamState.type == 'bank' ? console.log('bank') : setQuestionairePopUp(true)}>
+                        <p className="" style={{ fontSize: '40px' }}>
+                            +
+                        </p>
+                        <p className="">
+                            {addExamState.type == 'bank' ? 'افزودن درس' : 'افزودن دفترچه'}
+                        </p>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div className="w-full flex  px-10">
+
+                <div className="w-1/2 border-l flex flex-col border-gray-300 py-10">
+                    {
+                        selectedQuestionare.id !== null && (<>
+                        <h1 className="text-blue3A  w-full font-bold text-lg text-right">
+                           دفترچه {selectedQuestionare.name}
+                        </h1>
+                        <div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{height: '500px'}}>
+                            <div className="w-4/5 ">
+
+                            {
+                                addExamState.questionairesCourses.filter(itm => itm.questionnaireId == selectedQuestionare.id).map(
+                                    (item) => (
+                                        <SelectedCourse title={item.name} coefficient={item.coefficient} questionQuantity={item.questionsQuantity} 
+                                        onClick={() => {setSelectedCourse(item); console.log(selectedCourse)}}/>
+                                    )
+                                )
+                            }
+                        </div>
+                        </div>
+                        </>)
+                    }
+                    {selectedQuestionare.id !== null &&
+                        <div className="w-full flex justify-center mt-10">
+                        <button className=" bg-gray-300 text-xl text-gray-500 border-gray-500 w-1/3 h-12 rounded-xl border" onClick={() => setAddCoursePopup(true)}>
+                                افزودن درس
+                        </button>
+                        </div>}
+                </div>
+                <div className="w-1/2 flex justify-center">
+                    <div className="w-4/5 py-8">
+                    <AnswerSheet questionsQuantity={selectedCourse.questionsQuantity} optionsQuantity={4} selectedCourseId={selectedCourse.id}
+                    passAnswers={data => {setAnswers(data); setFakeState(fakeState - 2)}}/>
+                    </div>
+                </div>
+                
+            </div>
+
+
+            <div className="flex w-full px-10 items-center justify-end">
+                <button className=' mx-6 h-12 mt-4  text-red52 font-bold flex items-center justify-center' onClick={() => backStep()}> بازگشت به مرحله قبل </button>
+                <Button
+                    title='ارسال پیام'
+                    className='w-1/12'
+                    onClick={() => {
+                        dispatch({ type: 'ADD_EXAM_DESCRIPTION', payload });
+                        stepClick()
+                    }}
+
+                />
+
+
+            </div>
+
+        </>
+    )
+}
+
+const mapStateToProps = (state) => ({
+    grades: state.publicApi.grades,
+    addExamState: state.addExamReduser
+})
+
+export default connect(mapStateToProps)(AddQuestionsFromBank);

src/view/addExam/views/addQuestionnaireExam.js

@@ -0,0 +1,277 @@
+
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import AnswerSheet from "../../../components/AnswerSheet";
+import Button from "../../../components/Button";
+import DatePicker from "../../../components/Calendar/CalendarComponents/DatePicker";
+import Checkbox from "../../../components/Checkbox";
+import RangeDatePicker from "../../../components/RangeDatePicker";
+import SelectedCourse from "../../../components/selectedCourse";
+import AddQuestionnaireCourse from "../components/addQuestionnaireCourse";
+
+const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
+    const [name, setName] = useState(null);
+    const [type, setType] = useState(null);
+    const [description, setDescription] = useState(null);
+    const [questionarePopUp, setQuestionairePopUp] = useState(false);
+    const [addCoursePopup, setAddCoursePopup] = useState(false);
+    const [newQuestionaire, setNewQuestionaire] = useState({
+        id: addExamState.questionnaires.length + 1,
+        name: '',
+        fileUrl: '',
+    });
+    const [showCoursesInList, setShowCoursesInList] = useState([]);
+    const [choosedQuestionaries, seChoosedQuestionaries] = useState([]);
+    const [selectedQuestionare, setSelectedQuestionare] = useState({
+        id: null, 
+        courses: []
+    });
+    const [answers, setAnswers] = useState(null);
+    const [newCourse, setNewCourse] = useState({
+        id: addExamState.questionairesCourses.length + 1,
+        questionnaireId: selectedQuestionare.id,
+        questionsQuantity:20,
+        name: '',
+        coefficient: 4
+    })
+    const [selectedCourse, setSelectedCourse] = useState({
+        sortId: 1,
+        title: 'ادبیات فارسی',
+        coefficient: 3,
+        questionStart: 1,
+        questionEnd: 0,
+
+    })
+    // console.log(choosedQuestionaries)
+    // console.log(newQuestionaire)
+    // console.log(addExamState.questionnaires)
+    console.log(newCourse)
+    console.log(addExamState.questionairesCourses)
+    console.log(selectedCourse)
+    console.log(answers)
+ 
+    const [fakeState, setFakeState] = useState(2);
+
+
+    useEffect(() => {
+        // questoinaresLists.map(item => showCoursesInList.push(false));
+        if(answers !== null && answers !== []) {
+        answers.map(item => dispatch({type: 'ADD_ANSWERS', payload : item}))
+        }
+        
+    }, [answers])
+
+    const payload = { name: name, description: description, type: type };
+
+    
+
+    return (
+        <>
+            {
+                questionarePopUp && <div className="w-full z-10 fixed h-screen backdrop-blur flex items-center -mt-10 justify-center">
+                    <div className="w-1/2 bg-white rounded-xl flex flex-col shadow-lg p-6">
+                        <div className="w-full">
+                            <div className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52" onClick={() => setQuestionairePopUp(false)}>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
+                                    <g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
+                                        <g id="card-remove" transform="translate(253.309 512.31)">
+                                            <path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
+                                            <path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
+                                        </g>
+                                    </g>
+                                </svg>
+                            </div>
+                        </div>
+                        <h1 className="w-full text-right text-lg text-red52 font-bold pt-4">
+                            افزودن دفترچه
+                        </h1>
+                        <div className="w-full flex items-center flex-col  mt-6 px-2 ">
+                            <div className="flex justify-between w-full">
+                                <input type='text' placeholder="نام دفترچه..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none" 
+                                onChange={e => setNewQuestionaire({...newQuestionaire, name: e.target.value})} />
+                                <input type="file" placeholder="آپلود فایل دفترچه" className="bg-white items-center flex h-12 text-red26 outline-none"
+                                />
+                            </div>
+                            <div className="flex w-full justify-end pt-2">
+                                <button className="px-6 py-2 rounded-md bg-red52 text-white font-bold"
+                                onClick={() => {dispatch({type: 'ADD_EXAM_QUESTIONAIRES', payload: newQuestionaire}); setQuestionairePopUp(false) }}
+                                >
+                                        تایید
+                                </button>
+                            </div>
+
+                            {/* {
+                                questoinaresLists.map(
+                                    (item, index) => (
+                                        <>
+                                            <div className="w-full flex items-center py-2 justify-between border-b pl-8 border-gray-300">
+                                                <Checkbox name={`PICK_QUESTIONARE_${index}`}
+                                                    onChange={(e) => 
+                                                         e.target.checked ? 
+                                                            seChoosedQuestionaries([...choosedQuestionaries, item])
+                                                        : 
+                                                        
+
+                                                        seChoosedQuestionaries(choosedQuestionaries.filter(itm => itm.id !== item.id))
+
+
+                                                    }
+
+                                                />
+                                                <h2 className="text-red26 font-bold">{item.title}</h2>
+                                                <h4>تعداد سوالات: {item.numberOfQuestions}</h4>
+                                                <p>تعداد دروس: {item.courses.length}</p>
+                                                <p className="cursor-pointer" onClick={() => {
+                                                    let newArray = [...showCoursesInList];
+                                                    
+                                                    newArray[index] = !newArray[index];
+
+
+                                                    setShowCoursesInList(newArray)
+
+                                                }}>نمایش دروس</p>
+
+                                            </div>
+                                            {
+                                                showCoursesInList[index] && <div className="w-full flex flex-col">
+                                                    {
+                                                        item.courses.map((course) => (
+                                                            <div className="w-full flex items-center text-right px-8 py-1 border-b border-gray-100" key={`COURSE_IN_LIST__${course.sortId}`}>
+                                                                <p className="w-1/3">
+                                                                    {course.title}
+                                                                </p>
+                                                                <p className="w-1/3">
+                                                                    ضریب : {course.coefficient}
+                                                                </p>
+                                                                <p
+                                                                    className="w-1/3"
+                                                                >از سوال {course.questionStart} تا سوال {course.questionEnd}</p>
+                                                            </div>
+                                                        ))
+                                                    }
+                                                </div>
+                                            }
+                                        </>
+                                    )
+                                )
+                            } */}
+
+                        </div>
+                    </div>
+                </div>
+            }
+            {
+                addCoursePopup && 
+                <AddQuestionnaireCourse
+                  closeOnClick={() => setAddCoursePopup(false)}
+                  nameOnChange={e => setNewCourse({...newCourse, name: e.target.value})}
+                  coefficientOnChange={e => setNewCourse({...newCourse, coefficient: e.target.vlaue})}
+                  questionQuantityOnChange={e => setNewCourse({...newCourse, questionsQuantity: e.target.value, questionnaireId: selectedQuestionare.id})}
+                  submitOnClick={() => {dispatch({type: 'ADD_QUESTIONNAIRE_COURSES', payload : newCourse}); setAddCoursePopup(false); setFakeState(fakeState + 356)} }
+                  />
+
+               
+            }
+            <div className="flex py-10 items-start px-10 border-b border-gray-300">
+                <div className="flex flex-col w-1/6">
+                    <div className="text-blue3A text-lg font-bold  text-right px-4  border-r-4 border-blue65">
+                        تنظیمات آزمون
+
+                    </div>
+                    <p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p>
+                </div>
+                <div className="w-5/6 flex flex-row">
+
+                    {
+                        addExamState.questionnaires.map(
+                            (item => (
+                                <div className={`flex flex-col ${selectedQuestionare.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'}  items-center justify-center w-36 h-32 mx-2 font-bold  rounded-xl cursor-pointer`}
+                                 onClick={() => setSelectedQuestionare({id : item.id,name: item.name, courses: addExamState.questionairesCourses.filter(itm => itm.questionnaireId == item.id)})}
+                                 >
+                        
+                        <p className="text-red52">
+                           دفترچه {item.name}
+                        </p>
+                    </div>
+                            ))
+                        )
+                    }
+
+                    <div className="flex flex-col bg-white items-center justify-center w-36 h-32 mx-2 font-bold border border-gray-300 text-blue3A rounded-xl cursor-pointer" onClick={() => addExamState.type == 'bank' ? console.log('bank') : setQuestionairePopUp(true)}>
+                        <p className="" style={{ fontSize: '40px' }}>
+                            +
+                        </p>
+                        <p className="">
+                            {addExamState.type == 'bank' ? 'افزودن درس' : 'افزودن دفترچه'}
+                        </p>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div className="w-full flex  px-10">
+
+                <div className="w-1/2 border-l flex flex-col border-gray-300 py-10">
+                    {
+                        selectedQuestionare.id !== null && (<>
+                        <h1 className="text-blue3A  w-full font-bold text-lg text-right">
+                           دفترچه {selectedQuestionare.name}
+                        </h1>
+                        <div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{height: '500px'}}>
+                            <div className="w-4/5 ">
+
+                            {
+                                addExamState.questionairesCourses.filter(itm => itm.questionnaireId == selectedQuestionare.id).map(
+                                    (item) => (
+                                        <SelectedCourse title={item.name} coefficient={item.coefficient} questionQuantity={item.questionsQuantity} 
+                                        onClick={() => {setSelectedCourse(item); console.log(selectedCourse)}}/>
+                                    )
+                                )
+                            }
+                        </div>
+                        </div>
+                        </>)
+                    }
+                    {selectedQuestionare.id !== null &&
+                        <div className="w-full flex justify-center mt-10">
+                        <button className=" bg-gray-300 text-xl text-gray-500 border-gray-500 w-1/3 h-12 rounded-xl border" onClick={() => setAddCoursePopup(true)}>
+                                افزودن درس
+                        </button>
+                        </div>}
+                </div>
+                <div className="w-1/2 flex justify-center">
+                    <div className="w-4/5 py-8">
+                    <AnswerSheet questionsQuantity={selectedCourse.questionsQuantity} optionsQuantity={4} selectedCourseId={selectedCourse.id}
+                    passAnswers={data => {setAnswers(data); setFakeState(fakeState - 2)}}/>
+                    </div>
+                </div>
+                
+            </div>
+
+
+            <div className="flex w-full px-10 items-center justify-end">
+                <button className=' mx-6 h-12 mt-4  text-red52 font-bold flex items-center justify-center' onClick={() => backStep()}> بازگشت به مرحله قبل </button>
+                <Button
+                    title='ارسال پیام'
+                    className='w-1/12'
+                    onClick={() => {
+                        dispatch({ type: 'ADD_EXAM_DESCRIPTION', payload });
+                        stepClick()
+                    }}
+
+                />
+
+
+            </div>
+
+        </>
+    )
+}
+
+const mapStateToProps = (state) => ({
+    grades: state.publicApi.grades,
+    addExamState: state.addExamReduser
+})
+
+export default connect(mapStateToProps)(AddQuestionnaireExam);

src/view/addExam/views/addQuestions.js

@@ -7,307 +7,16 @@ import DatePicker from "../../../components/Calendar/CalendarComponents/DatePick
 import Checkbox from "../../../components/Checkbox";
 import RangeDatePicker from "../../../components/RangeDatePicker";
 import SelectedCourse from "../../../components/selectedCourse";
-
+import AddQuestionnaireCourse from "../components/addQuestionnaireCourse";
-const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
+import AddQuestionnaireExam from "./addQuestionnaireExam";
-    const [name, setName] = useState(null);
+import AddQuestionsFromBank from "./AddQuestionsFromBank";
-    const [type, setType] = useState(null);
+
-    const [description, setDescription] = useState(null);
+const AddQuestions = ({ addExamState, stepClick, backStep }) => {
-    const [questionarePopUp, setQuestionairePopUp] = useState(false);
+   return(
-    const [newQuestionaire, setNewQuestionaire] = useState({
+       addExamState.type == 'pdf' ? 
-        id: addExamState.questionnaires.length + 1,
+       <AddQuestionnaireExam stepClick={stepClick} backStep={backStep} /> :
-        name: '',
+       <AddQuestionsFromBank stepClick={stepClick} backStep={backStep} />
-        fileUrl: '',
+   )
-    });
-    const [showCoursesInList, setShowCoursesInList] = useState([]);
-    const [choosedQuestionaries, seChoosedQuestionaries] = useState([]);
-    const [selectedQuestionare, setSelectedQuestionare] = useState({
-        id: null, 
-        courses: []
-    });
-    const [selectedCourse, setSelectedCourse] = useState({
-        sortId: 1,
-        title: 'ادبیات فارسی',
-        coefficient: 3,
-        questionStart: 1,
-        questionEnd: 0,
-
-    })
-    console.log(choosedQuestionaries)
-    console.log(newQuestionaire)
-    console.log(addExamState.questionnaires)
-
-
-    useEffect(() => {
-        questoinaresLists.map(item => showCoursesInList.push(false));
-        console.log(showCoursesInList)
-    }, [])
-
-    const payload = { name: name, description: description, type: type };
-
-    const questoinaresLists = [
-        {
-            id: 1,
-            title: 'دفترچه عمومی',
-            numberOfQuestions: 60,
-            courses: [
-                {
-                    sortId: 1,
-                    title: 'ادبیات فارسی',
-                    coefficient: 3,
-                    questionStart: 1,
-                    questionEnd: 20,
-
-                },
-                {
-                    sortId: 2,
-                    title: 'عربی',
-                    coefficient: 3,
-                    questionStart: 21,
-                    questionEnd: 35,
-
-                },
-                {
-                    sortId: 3,
-                    title: 'دینی',
-                    coefficient: 2,
-                    questionStart: 36,
-                    questionEnd: 46,
-
-                },
-                {
-                    sortId: 4,
-                    title: 'زبان خارجه',
-                    coefficient: 1,
-                    questionStart: 47,
-                    questionEnd: 60,
-
-                },
-            ]
-        },
-        {
-            id: 2,
-            title: 'دفترچه اختصاصی',
-            numberOfQuestions: 60,
-            courses: [
-                {
-                    sortId: 1,
-                    title: 'ریاضی',
-                    coefficient: 3,
-                    questionStart: 1,
-                    questionEnd: 20,
-
-                },
-                {
-                    sortId: 2,
-                    title: 'فیزیک',
-                    coefficient: 3,
-                    questionStart: 21,
-                    questionEnd: 35,
-
-                },
-                {
-                    sortId: 3,
-                    title: 'شیمی',
-                    coefficient: 2,
-                    questionStart: 36,
-                    questionEnd: 46,
-
-                },
-                {
-                    sortId: 4,
-                    title: 'زیست ',
-                    coefficient: 1,
-                    questionStart: 47,
-                    questionEnd: 60,
-
-                },
-            ]
-        }
-    ]
-
-    return (
-        <>
-            {
-                questionarePopUp && <div className="w-full z-10 fixed h-screen backdrop-blur flex items-center -mt-10 justify-center">
-                    <div className="w-1/2 bg-white rounded-xl flex flex-col shadow-lg p-6">
-                        <div className="w-full">
-                            <div className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52" onClick={() => setQuestionairePopUp(false)}>
-                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
-                                    <g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
-                                        <g id="card-remove" transform="translate(253.309 512.31)">
-                                            <path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
-                                            <path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
-                                        </g>
-                                    </g>
-                                </svg>
-                            </div>
-                        </div>
-                        <h1 className="w-full text-right text-lg text-red52 font-bold pt-4">
-                            افزودن دفترچه
-                        </h1>
-                        <div className="w-full flex items-center flex-col  mt-6 px-2 ">
-                            <div className="flex justify-between w-full">
-                                <input type='text' placeholder="نام دفترچه..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none" 
-                                onChange={e => setNewQuestionaire({...newQuestionaire, name: e.target.value})} />
-                                <input type="file" placeholder="آپلود فایل دفترچه" className="bg-white items-center flex h-12 text-red26 outline-none"
-                                />
-                            </div>
-                            <div className="flex w-full justify-end pt-2">
-                                <button className="px-6 py-2 rounded-md bg-red52 text-white font-bold"
-                                onClick={() => {dispatch({type: 'ADD_EXAM_QUESTIONAIRES', payload: newQuestionaire}); setQuestionairePopUp(false) }}
-                                >
-                                        تایید
-                                </button>
-                            </div>
-
-                            {/* {
-                                questoinaresLists.map(
-                                    (item, index) => (
-                                        <>
-                                            <div className="w-full flex items-center py-2 justify-between border-b pl-8 border-gray-300">
-                                                <Checkbox name={`PICK_QUESTIONARE_${index}`}
-                                                    onChange={(e) => 
-                                                         e.target.checked ? 
-                                                            seChoosedQuestionaries([...choosedQuestionaries, item])
-                                                        : 
-                                                        
-
-                                                        seChoosedQuestionaries(choosedQuestionaries.filter(itm => itm.id !== item.id))
-
-
-                                                    }
-
-                                                />
-                                                <h2 className="text-red26 font-bold">{item.title}</h2>
-                                                <h4>تعداد سوالات: {item.numberOfQuestions}</h4>
-                                                <p>تعداد دروس: {item.courses.length}</p>
-                                                <p className="cursor-pointer" onClick={() => {
-                                                    let newArray = [...showCoursesInList];
-                                                    
-                                                    newArray[index] = !newArray[index];
-
-
-                                                    setShowCoursesInList(newArray)
-
-                                                }}>نمایش دروس</p>
-
-                                            </div>
-                                            {
-                                                showCoursesInList[index] && <div className="w-full flex flex-col">
-                                                    {
-                                                        item.courses.map((course) => (
-                                                            <div className="w-full flex items-center text-right px-8 py-1 border-b border-gray-100" key={`COURSE_IN_LIST__${course.sortId}`}>
-                                                                <p className="w-1/3">
-                                                                    {course.title}
-                                                                </p>
-                                                                <p className="w-1/3">
-                                                                    ضریب : {course.coefficient}
-                                                                </p>
-                                                                <p
-                                                                    className="w-1/3"
-                                                                >از سوال {course.questionStart} تا سوال {course.questionEnd}</p>
-                                                            </div>
-                                                        ))
-                                                    }
-                                                </div>
-                                            }
-                                        </>
-                                    )
-                                )
-                            } */}
-
-                        </div>
-                    </div>
-                </div>
-            }
-            <div className="flex py-10 items-start px-10 border-b border-gray-300">
-                <div className="flex flex-col w-1/6">
-                    <div className="text-blue3A text-lg font-bold  text-right px-4  border-r-4 border-blue65">
-                        تنظیمات آزمون
-
-                    </div>
-                    <p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p>
-                </div>
-                <div className="w-5/6 flex flex-row">
-
-                    {
-                        addExamState.questionnaires.map(
-                            (item => (
-                                <div className={`flex flex-col ${selectedQuestionare.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'}  items-center justify-center w-36 h-32 mx-2 font-bold  rounded-xl cursor-pointer`}
-                                 onClick={() => setSelectedQuestionare({id : item.id, courses: addExamState.questionairesCourses.filter(itm => itm.questionnaireId == item.id)})}
-                                 >
-                        
-                        <p className="text-red52">
-                            {item.name}
-                        </p>
-                    </div>
-                            ))
-                        )
-                    }
-
-                    <div className="flex flex-col bg-white items-center justify-center w-36 h-32 mx-2 font-bold border border-gray-300 text-blue3A rounded-xl cursor-pointer" onClick={() => addExamState.type == 'bank' ? console.log('bank') : setQuestionairePopUp(true)}>
-                        <p className="" style={{ fontSize: '40px' }}>
-                            +
-                        </p>
-                        <p className="">
-                            {addExamState.type == 'bank' ? 'افزودن درس' : 'افزودن دفترچه'}
-                        </p>
-                    </div>
-
-                </div>
-
-            </div>
-
-            <div className="w-full flex  px-10">
-
-                <div className="w-1/2 border-l flex flex-col border-gray-300 py-10">
-                    {
-                        selectedQuestionare !== null && (<>
-                        <h1 className="text-blue3A  w-full font-bold text-lg text-right">
-                            {selectedQuestionare.title}
-                        </h1>
-                        <div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{height: '450px'}}>
-                            <div className="w-4/5 ">
-
-                            {
-                                selectedQuestionare?.courses.map(
-                                    (item) => (
-                                        <SelectedCourse title={item.title} coefficient={item.coefficient} questionQuantity={item.questionEnd - item.questionStart + 1} 
-                                        onClick={() => {setSelectedCourse(item); console.log(selectedCourse)}}/>
-                                    )
-                                )
-                            }
-                        </div>
-                        </div>
-                        </>)
-                    }
-                </div>
-                <div className="w-1/2 flex justify-center">
-                    <div className="w-4/5 py-8">
-                    <AnswerSheet questionsQuantity={selectedCourse.questionEnd - selectedCourse.questionStart + 1} optionsQuantity={4}/>
-                    </div>
-                </div>
-                
-            </div>
-
-
-            <div className="flex w-full px-10 items-center justify-end">
-                <button className=' mx-6 h-12 mt-4  text-red52 font-bold flex items-center justify-center' onClick={() => backStep()}> بازگشت به مرحله قبل </button>
-                <Button
-                    title='ارسال پیام'
-                    className='w-1/12'
-                    onClick={() => {
-                        dispatch({ type: 'ADD_EXAM_DESCRIPTION', payload });
-                        stepClick()
-                    }}
-
-                />
-
-
-            </div>
-
-        </>
-    )
 }
 
 const mapStateToProps = (state) => ({