updated: instead of localstorage used params and navigate

src/CompletedBody/CompletedBody.jsx

@@ -16,43 +16,38 @@ const CompletedBody = () => {
   const [output, setOutput] = useState(""); // State to store the output
   const { questionId } = useParams(); // Getting questionId from the URL params
   const [question, setQuestion] = useState("");
-  const [response, setResponse] = useState(
-    JSON.parse(localStorage.getItem("response")) || null
-  ); // Retrieve response from localStorage if available
+  const [response, setResponse] = useState(null);
   const location = useLocation();
 
-  // Extract studentId and paperId from location state
   const studentId = location.state?.studentId || "";
   const paperId = location.state?.paperId || "";
   const questionUrl =
     location.state?.url || "http://localhost:5000/paper/getCompletedQuestion";
   const responseUrl = "http://localhost:5000/student/getResponse";
 
   useEffect(() => {
-    // Fetch question details
-    axios
-      .post(questionUrl, { questionId })
-      .then((res) => {
-        setQuestion(res.data.question);
-      })
-      .catch((err) => {
-        console.error(err);
-      });
+    if (questionId) {
+      axios
+        .post(questionUrl, { questionId })
+        .then((res) => {
+          setQuestion(res.data.question);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    }
 
-    // Fetch the response by paperId and studentId if both are available
-    if (paperId && studentId && !response) {
+    if (paperId && studentId && questionId) {
       axios
         .post(responseUrl, { paperId, studentId })
         .then((res) => {
           setResponse(res.data.response); // Store the response data
-          localStorage.setItem("response", JSON.stringify(res.data.response)); // Save response to localStorage
         })
         .catch((err) => {
           console.error("Error fetching response:", err);
         });
     }
 
-    // Resize observer
     const observer = new ResizeObserver((entries) => {
       if (bodyContentsRef.current) {
         const { width } = entries[0].contentRect;
@@ -71,7 +66,7 @@ const CompletedBody = () => {
       }
       observer.disconnect();
     };
-  }, [questionId, paperId, studentId, questionUrl, response]);
+  }, [questionId, paperId, studentId, questionUrl]);
 
   return (
     <>
@@ -80,8 +75,6 @@ const CompletedBody = () => {
         <CompletedQuestionsDescription question={question} />
 
         <div role="separator" tabIndex="1"></div>
-
-        {/* Conditionally render based on width */}
         {isSmallWidth ? (
           <div className="body-contents-small" ref={bodyContentsRef}>
             <p>Code</p>

src/CompletedNavbar/CompletedNavbar.jsx

@@ -1,16 +1,19 @@
 import React, { useState, useEffect } from "react";
 import "./CompletedNavbar.css";
 import axios from "axios";
-import { FaChevronLeft,
-    FaChevronRight, } from "react-icons/fa";
-import { useParams} from "react-router-dom";
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
+import { useParams, useNavigate, useLocation } from "react-router-dom";
 
 const CompletedNavbar = () => {
   const [allotDisplay, setAllotDisplay] = useState(false);
   const { questionId } = useParams();
   const [marks, setMarks] = useState("");
-  const [question,setQuestion] = useState();
-  const [studentDetails, setStudentDetails] = useState([]);
+  const [question, setQuestion] = useState(null);
+  const [studentDetails, setStudentDetails] = useState({});
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const studentId = location.state?.studentId || "";
 
   const handleMarksChange = (e) => {
     const value = e.target.value.replace(/[^0-9]/g, "");
@@ -30,9 +33,10 @@ const CompletedNavbar = () => {
       if (response.status === 200) {
         const nextQuestion = response.data?.question;
         if (nextQuestion && nextQuestion._id) {
-            setQuestion(response.data.question);
-          // Use React Router's navigate to change route
-          window.location.href=`/Evaluation/${nextQuestion._id}`;
+          setQuestion(nextQuestion);
+          navigate(`/Evaluation/${nextQuestion._id}`, {
+            state: { studentId },
+          });
         }
       }
     } catch (err) {
@@ -49,45 +53,55 @@ const CompletedNavbar = () => {
   };
 
   useEffect(() => {
-    axios
-      .post("http://localhost:5000/student/getStudentDetailsByStudentId", {
-        studentId: JSON.parse(localStorage.getItem("response")).studentId,
-      })
-      .then((res) => {
-        setStudentDetails(res.data.student[0]);
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  }, []);
+    if (studentId) {
+      axios
+        .post("http://localhost:5000/student/getStudentDetailsByStudentId", {
+          studentId,
+        })
+        .then((res) => {
+          setStudentDetails(res.data.student[0]);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    }
+  }, [studentId]);
 
   return (
-    <>
-      <div className="completed-navbar">
-        <div className="completed-nb-contents completed-nb-fullName">
-          {studentDetails.fullName}
+    <div className="completed-navbar">
+      <div className="completed-nb-contents completed-nb-fullName">
+        {studentDetails.fullName}
+      </div>
+      <div className="completed-nb-contents">
+        <div
+          className="completed-content-button completed-previous"
+          onClick={handleLeft}
+          disabled={!question?.previousQuestionId}
+        >
+          <FaChevronLeft />
+          <div>Previous</div>
         </div>
-        <div className="completed-nb-contents">
-          <div className="completed-content-button completed-previous" onClick={handleLeft} disabled={!question?.previousQuestionId}>
-            <FaChevronLeft />
-            <div>Previous</div>
-          </div>
-          <div className="completed-content-button completed-student-button">
-            Next Student
-          </div>
-          <div className="completed-content-button completed-next" onClick={handleRight} disabled={!question?.nextQuestionId}>
-            <div>Next</div>
-            <FaChevronRight />
-          </div>
+        <div className="completed-content-button completed-student-button">
+          Next Student
         </div>
-        <div className="completed-nb-contents completed-nb-marksAllocation">
-          <div className="completed-allot-marks">Allotted Marks:</div>
-          <input type="tel" onChange={handleMarksChange} value={marks} />
-          <div className="completed-allot-marks completed-marks">/20</div>
-          {allotDisplay && <div className="completed-content-button completed-allot">Allot</div>}
+        <div
+          className="completed-content-button completed-next"
+          onClick={handleRight}
+          disabled={!question?.nextQuestionId}
+        >
+          <div>Next</div>
+          <FaChevronRight />
         </div>
       </div>
-    </>
+      <div className="completed-nb-contents completed-nb-marksAllocation">
+        <div className="completed-allot-marks">Allotted Marks:</div>
+        <input type="tel" onChange={handleMarksChange} value={marks} />
+        <div className="completed-allot-marks completed-marks">/20</div>
+        {allotDisplay && (
+          <div className="completed-content-button completed-allot">Allot</div>
+        )}
+      </div>
+    </div>
   );
 };