work on results page

src/components/exams/examDetails.js

@@ -31,10 +31,10 @@ const Questions = (props) => {
                 <div className="mt-3" key={k}>
                     <p><span>سوال {k+1} ) </span>  {i.question} </p>
                     <Radio.Group onChange={ (e) =>handleAnswer(i.id, e) }>
-                        <Radio className="px-2" value={i.ans1}>{i.ans1}</Radio>
-                        <Radio className="px-2" value={i.ans2}>{i.ans2}</Radio>
-                        <Radio className="px-2" value={i.ans3}>{i.ans3}</Radio>
-                        <Radio className="px-2" value={i.ans4}>{i.ans4}</Radio>
+                        <Radio className="px-2" value="1">{i.ans1}</Radio>
+                        <Radio className="px-2" value="2">{i.ans2}</Radio>
+                        <Radio className="px-2" value="3">{i.ans3}</Radio>
+                        <Radio className="px-2" value="4">{i.ans4}</Radio>
                     </Radio.Group>
                 </div>
             ) )}

src/components/login/login.js

@@ -32,9 +32,9 @@ export default function Login(props) {
         }).catch(e => error( e.message ? e.message : undefined ))
     }
 
-    React.useEffect( () => {
-        if (isLoggedIn) setTimeout( () => props.history.push("/"), 1000 )
-    }, [])
+    // React.useEffect( () => {
+    //     if (isLoggedIn) setTimeout( () => props.history.push("/"), 1000 )
+    // }, [])
 
     const layout = {
         labelCol: { span: 6 },

src/components/public/routes.js

@@ -6,6 +6,7 @@ import Questions from "../questions/questions";
 import Tenants from "../tenants/tenants";
 import Exams from "../exams/exams";
 import ExamDetails from "../exams/examDetails";
+import Results from "../results/results";
 
 
 export default [
@@ -17,4 +18,5 @@ export default [
     { path: "/tenants", name: "مدارس", Component: Tenants },
     { path: "/exams", name: "آزمون ها", Component: Exams },
     { path: "/exams/:examId(\\d+)", name: "آزمون ", Component: ExamDetails },
+    { path: "/results", name: "نتایج ", Component: Results },
   ];

src/components/public/sider.js

@@ -65,6 +65,11 @@ export default function SideMenu(props) {
                         </>
                     )
                 }
+                <Menu.Item key="3">
+                    <NavLinkRouter className="text-white text-decoration-none" to="/results">
+                        نتایج
+                    </NavLinkRouter>
+                </Menu.Item>
             </Menu>
         </div>
     )

src/components/results/results.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import {NavLink} from "react-router-dom";
+import {Descriptions, Divider, Collapse } from "antd";
+import {fetcher} from "../../utils/common";
+import { error } from "../../utils/message";
+import {USER_ANSWERSET} from "../../utils/constants";
+import { FaCheck } from "react-icons/fa";
+import { HiBadgeCheck } from "react-icons/hi";
+
+
+const { Panel } = Collapse;
+
+
+const QuestionItemDescription = (props) => (
+    <Collapse>
+        <Panel header={
+            <div className="d-flex justify-content-between">
+                <div>مشاهده پاسخ‌ها</div>
+            </div>
+            }
+        >
+            { props.answersInfo.map( (item, key) => (
+                <div key={key}>
+                    <div>{item.question_info.question}</div>
+                    <div className="d-flex justify-content-between">
+                        <p> 
+                            { item.question_info.answer_index === 1 && <HiBadgeCheck size="1.5em" color="green" /> }
+                             گزینه 1) {item.question_info.ans1}
+                            { item.chosen_index === 1 && <FaCheck /> }
+                        </p>
+                        <p> 
+                            { item.question_info.answer_index === 2 && <HiBadgeCheck size="1.5em" color="green" /> }
+                            گزینه 2) {item.question_info.ans2}
+                            { item.chosen_index === 2 && <FaCheck /> }
+                        </p>
+                        <p> 
+                            { item.question_info.answer_index === 3 && <HiBadgeCheck size="1.5em" color="green" /> }
+                            گزینه 3) {item.question_info.ans3}
+                            { item.chosen_index === 3 && <FaCheck /> }
+                        </p>
+                        <p> 
+                            { item.question_info.answer_index === 4 && <HiBadgeCheck size="1.5em" color="green" /> }
+                            گزینه 4) {item.question_info.ans4}
+                            { item.chosen_index === 4 && <FaCheck /> }
+                        </p>
+                    </div>
+                </div>
+            ))}
+        </Panel>
+    </Collapse>
+)
+
+
+const AnswersetDescription = (props) => (
+    <div className="my-3">
+        <h6>نتایج آزمون {props.item.test_set}</h6>
+        <div>نمره کسب شده : {props.item.mark}</div>
+        <div className="p-2">
+            <QuestionItemDescription answersInfo={props.item.answers_info} />
+        </div>
+        <Divider />
+    </div>
+)
+
+
+export default function Results(props) {
+
+    const [answersets, setAnswersets] = React.useState([]);
+
+    React.useEffect( () => {
+        fetchAnswersets();
+    }, [])
+
+    const fetchAnswersets = () => {
+        fetcher(USER_ANSWERSET)
+        .then( response => setAnswersets(response))
+        .catch( e => error(String(e)))
+    }
+
+    return (
+        <div className="p-5">
+            <div className="d-flex justify-content-between">
+                <h5>نتایج</h5>
+            </div>
+            {answersets.map( (item , key) => <AnswersetDescription key={key} item={item} /> )}
+        </div>
+    )
+}

src/utils/constants.js

@@ -18,6 +18,7 @@ module.exports = {
     QUESTIONS_DETAIL: (id) => `/portal/questions/${id}`,
     TENANTS_LIST: "/portal/tenants",
     ANSWER_SET: (id) => `/portal/sets/${id}/answer`,
+    USER_ANSWERSET: "/portal/answersets",
 
     // PARAMS:
     COOKIE_EXPIRES: 1 // IN DAYS