work on roles work on questions

docker-compose.yml

@@ -2,8 +2,8 @@ version: "3"
 
 services:
     app:
-        container_name: "front_app"
-        image: node:lts-alpine
+        container_name: "front_app2"
+        image: node:12-alpine
         volumes:
             - .:/app
             - /app/node_modules

src/components/public/home.js

@@ -1,9 +1,7 @@
 import React from 'react';
-import {store} from "../../context/store";
 
 
 export default function Home(props) {
-    const {userRole} = React.useContext(store)
 
     return (
         <div className="d-flex justify-content-center align-items-center">

src/components/public/sider.js

@@ -1,8 +1,11 @@
 import React, { useContext } from 'react';
 import { NavLink as NavLinkRouter } from "react-router-dom";
 import {store} from "../../context/store";
-import {USER_LOGGED_OUT} from "../../context/actionType";
+import {USER_LOGGED_OUT, SET_USER_ROLE} from "../../context/actionType";
 import { Menu } from 'antd';
+import {fetcher} from "../../utils/common";
+import { error } from "../../utils/message";
+import {USER_ROLE} from "../../utils/constants";
 
 
 export default function SideMenu(props) {
@@ -13,6 +16,14 @@ export default function SideMenu(props) {
         dispatch({type: USER_LOGGED_OUT})
     }
 
+    React.useEffect( () => {
+        if(userRole === null){
+            fetcher(USER_ROLE).then(res => {
+                dispatch({type: SET_USER_ROLE, payload: res.role});
+            }).catch(e => error( e.message ? e.message : undefined ))
+        }
+    },[]) 
+
     return (
         <div style={{ backgroundColor: "#002329", color: "white" }}>
             <div className="text-right p-3" style={{ minHeight: "150px" }}>
@@ -34,11 +45,15 @@ export default function SideMenu(props) {
                 // defaultSelectedKeys={['1']}
                 style={{ height: '100%', borderRight: 0, backgroundColor: "#002329", color: "white" }}
             >
-                <Menu.Item key="1">
-                    <NavLinkRouter className="text-white text-decoration-none" to="/exams">
-                        آزمون ها
-                    </NavLinkRouter>
-                </Menu.Item>
+                {
+                    userRole !== "teacher" && (
+                        <Menu.Item key="1">
+                            <NavLinkRouter className="text-white text-decoration-none" to="/exams">
+                                آزمون ها
+                            </NavLinkRouter>
+                        </Menu.Item>
+                    )
+                }
                 {
                     userRole !== "student" && (
                         <>

src/components/sets/setsDetails.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import {NavLink} from "react-router-dom";
-import {Descriptions, Divider, Form, Input, Button, Checkbox, Collapse, Upload} from "antd";
+import {Descriptions, Divider, Form, Input, Button, Checkbox, Collapse, Upload, Select} from "antd";
 import {fetcher} from "../../utils/common";
 import { error, success } from "../../utils/message";
-import {SETS_DETAIL, QUESTIONS_LIST} from "../../utils/constants";
+import {SETS_DETAIL, QUESTIONS_LIST, QUESTIONS_DETAIL} from "../../utils/constants";
 import {getTokenObject} from "../../utils/utils";
 import {FaEdit, FaFileUpload} from "react-icons/fa";
 
@@ -31,7 +31,13 @@ const QuestionItemDescription = (props) => (
     <Collapse>
         {
             props.questions.map( (i,k) => (
-                <Panel header={i.question} key={k}>
+                <Panel header={
+                    <div className="d-flex justify-content-between">
+                        <div>{i.question}</div>
+                        <div className="pointer" onClick={ () => props.setEditQuestion(i) }>ویرایش</div>
+                    </div>
+                    } key={k}
+                >
                     <div className="d-flex justify-content-between">
                         <p> گزینه 1) {i.ans1}</p>
                         <p> گزینه 2) {i.ans2}</p>
@@ -121,10 +127,22 @@ const QuestionCreateForm = (props) => {
     }
 
     const [form] = Form.useForm();
+    const [isEdditing, setIsEdditing] = React.useState(false)
+
+    React.useEffect( () => {
+        if(props.editQuestion !== null){
+            setIsEdditing(true)
+            form.setFieldsValue(props.editQuestion)
+        }
+    },[props.editQuestion])
 
     const onFinish = (values) =>{
         values["test_set"] = props.setId
-        addQuestion(values)
+        if (isEdditing){
+            editQuestion(values)
+        }else{
+            addQuestion(values)
+        }
     }
 
     const addQuestion = (payload) => {
@@ -137,6 +155,16 @@ const QuestionCreateForm = (props) => {
         }).catch( e => error(String(e)) )
     }
 
+    const editQuestion = (payload) => {
+        fetcher(QUESTIONS_DETAIL(props.editQuestion.id),{
+            method: "PUT",
+            body: JSON.stringify(payload)
+        }).then( response => {
+            success("ویرایش شد");
+            setTimeout( () => window.location.reload(), 1000);
+        }).catch( e => error(String(e)) )
+    }
+
     return (
         <Form
             {...formLayout}
@@ -152,7 +180,7 @@ const QuestionCreateForm = (props) => {
             <Form.Item name="ans1" label="گزینه۱" rules={[{ required: true }]}>
                 <Input />
             </Form.Item>
-            <Form.Item name="ans2" label="گزین۲" rules={[{ required: true }]}>
+            <Form.Item name="ans2" label="گزینه۲" rules={[{ required: true }]}>
                 <Input />
             </Form.Item>
             <Form.Item name="ans3" label="گزینه۳" rules={[{ required: true }]}>
@@ -161,8 +189,24 @@ const QuestionCreateForm = (props) => {
             <Form.Item name="ans4" label="گزینه۴" rules={[{ required: true }]}>
                 <Input />
             </Form.Item>
+            <Form.Item name="answer_index" label="پاسخ صحیح" rules={[{ required: true }]}>
+                <Select>
+                    <Select.Option className="text-right" value="1">گزینه۱</Select.Option>
+                    <Select.Option className="text-right" value="2">گزینه۲</Select.Option>
+                    <Select.Option className="text-right" value="3">گزینه۳</Select.Option>
+                    <Select.Option className="text-right" value="4">گزینه۴</Select.Option>
+                </Select>
+            </Form.Item>
             <Form.Item >
                 <Button type="primary" htmlType="submit">ثبت</Button>
+                {
+                    isEdditing && (
+                        <Button
+                            className="mr-2" 
+                            onClick={ () => {setIsEdditing(false); form.resetFields(); props.setEditQuestion(null)}}
+                        >انصراف</Button>
+                    )
+                }
             </Form.Item>
         </Form>
     )
@@ -174,6 +218,7 @@ export default function SetDetails(props) {
     const [setItem, setSetItem] = React.useState({});
 
     const [isEditing, setIsEditing] = React.useState(false);
+    const [editQuestion, setEditQuestion] = React.useState(null)
 
     React.useEffect( () => {
         fetchSets()
@@ -186,7 +231,7 @@ export default function SetDetails(props) {
     }
 
     return (
-        <div className="p-5">
+        <div className="p-5 mb-5">
             <div className="p-3">
                 <SetItemDescription item={setItem} setIsEditing={setIsEditing} />
             </div>
@@ -197,12 +242,13 @@ export default function SetDetails(props) {
             <div className="my-2">
                 <h5 className="mb-3">لیست سوالات</h5>
                 { setItem?.questions_info?.length && (
-                    <QuestionItemDescription questions={setItem.questions_info} />
+                    <QuestionItemDescription setEditQuestion={setEditQuestion} questions={setItem.questions_info} />
                 )}
             </div>
             <Divider />
             <h5>اضافه کردن سوال جدید</h5>
-            <QuestionCreateForm setId={props.match.params.setId} />
+            <QuestionCreateForm setId={props.match.params.setId} editQuestion={editQuestion} setEditQuestion={setEditQuestion} />
+            <div className="py-5"></div>
         </div>
     )
 }