Getting Questionnaires From And Posting Them To Redux

src/redux/reducers/exam.js

@@ -8,8 +8,41 @@ const initialState = {
     endTime: '',
     description: '',
     type: 1,
-    courses: [],
+    
-    questionnaires: []
+    questionnaires: [
+        {
+            id:1,
+            name: 'عمومی',
+            fileUrl: '',
+        },
+        {
+            id:2,
+            name: 'اختصاصی',
+            fileUrl: '',
+        }
+    ],
+    questionairesCourses: [
+        {
+            id: 0,
+            questionnaireId: 1,
+            questionsQuantity:20,
+            name: 'دینی',
+        },
+        {
+            id: 1,
+            questionnaireId: 2,
+            questionsQuantity:20,
+            name: 'ریاضی',
+        },
+
+    ],
+
+    answers: [
+        {
+            questionId: 1,
+            answer: 2,
+        }
+    ]
 }
 
 export default function addExamReduser(state = initialState, { type, payload }) {
@@ -46,7 +79,7 @@ export default function addExamReduser(state = initialState, { type, payload })
         case 'ADD_EXAM_QUESTIONAIRES':
             return {
                 ...state,
-                payload
+                questionnaires: [...state.questionnaires, payload]
             }
 
         default:

src/view/addExam/views/addQuestions.js

@@ -13,9 +13,17 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
     const [type, setType] = useState(null);
     const [description, setDescription] = useState(null);
     const [questionarePopUp, setQuestionairePopUp] = 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(null);
+    const [selectedQuestionare, setSelectedQuestionare] = useState({
+        id: null, 
+        courses: []
+    });
     const [selectedCourse, setSelectedCourse] = useState({
         sortId: 1,
         title: 'ادبیات فارسی',
@@ -25,6 +33,9 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
 
     })
     console.log(choosedQuestionaries)
+    console.log(newQuestionaire)
+    console.log(addExamState.questionnaires)
+
 
     useEffect(() => {
         questoinaresLists.map(item => showCoursesInList.push(false));
@@ -131,9 +142,25 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
                                 </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>
 
-                        <div className="w-full flex items-center flex-col overflow-x-hidden mt-6 px-2 overflow-scroll" style={{ height: '400px' }}>
+                            {/* {
-                            {
                                 questoinaresLists.map(
                                     (item, index) => (
                                         <>
@@ -187,7 +214,8 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
                                         </>
                                     )
                                 )
-                            }
+                            } */}
+
                         </div>
                     </div>
                 </div>
@@ -203,13 +231,14 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
                 <div className="w-5/6 flex flex-row">
 
                     {
-                        choosedQuestionaries.map(
+                        addExamState.questionnaires.map(
                             (item => (
-                                <div className={`flex flex-col ${selectedQuestionare === item ? '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`}
+                                <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(item)}>
+                                 onClick={() => setSelectedQuestionare({id : item.id, courses: addExamState.questionairesCourses.filter(itm => itm.questionnaireId == item.id)})}
+                                 >
                         
                         <p className="text-red52">
-                            {item.title}
+                            {item.name}
                         </p>
                     </div>
                             ))